eslint+prettier+vue3格式化

1. 项目里面安装并配置eslint。

参考官网执行如下命令

npm init @eslint/config 
等价于 
npm install eslint -D  //安装eslint
npx eslint --init //初始化配置eslint

执行后会有一些配置选项，按需选择。如下是按照个人当前项目需要进行的选择，可以作为参考。执行完后项目里面会多出一个.eslintrc.js文件，用于后面eslint的配置。

2. 配置.eslintrc.js和.prettierrc文件

eslint提供两类规则：检查格式化的规则、检查代码质量的规则。说到底eslint是通过一条条规则限制代码规范，且规则的重点不在代码风格上，因此单凭eslint不能完全统一代码风格。

而prettier只负责代码格式化，不负责管理代码质量，采用prettier来统一代码风格优选。prettier支持配置的参数不多，且所有参数都有默认值，若需更改默认配置，新建.prettierrc.js文件配置具体值，参考prettier config。如下参数说明：

module.exports = {
    printWidth: 80,                    //（默认值）单行代码超出 80 个字符自动换行
    tabWidth: 2,                       //（默认值）一个 tab 键缩进相当于 2 个空格
    useTabs: true,                     // 行缩进使用 tab 键代替空格
    semi: false,                       //（默认值）语句的末尾加上分号
    singleQuote: true,                 // 使用单引号
    quoteProps: 'as-needed',           //（默认值）仅仅当必须的时候才会加上双引号
    jsxSingleQuote: true,              // 在 JSX 中使用单引号
    trailingComma: 'all',              // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
    bracketSpacing: true,              //（默认值）在括号和对象的文字之间加上一个空格
    jsxBracketSameLine: true,          // 把 > 符号放在多行的 JSX 元素的最后一行
    arrowParens: 'avoid',              // 当箭头函数中只有一个参数的时候可以忽略括弧
    htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行
    vueIndentScriptAndStyle: false,    //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
    embeddedLanguageFormatting: 'auto', //（默认值）允许自动格式化内嵌的代码块
};

问题1：eslint和prettier都可以管控代码风格，此时可能会出现冲突。目前已经有了非常成熟的解决方案，即 eslint-config-prettier + eslint-plugin-prettier。

• eslint-config-prettier：关闭eslint中与prettier相互冲突的规则。

• eslint-plugin-prettier：eslint使用prettier规则来美化代码风格。

在 .eslintrc.js中extends的最后添加一个配置，此时prettier和eslint便可以无冲突协作，保存时候也能自动修复并格式化代码了。

extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // 增加的配置
],

问题2：eslint解析.vue 文件中的template无效。eslint-plugin-vue是对.vue 文件进行代码校验的插件,插件一些扩展如下。个人项目里面用的vue3，选用的plugin:vue/vue3-recommended。

plugin:vue/base：基础
plugin:vue/essential：预防错误的（用于 Vue 2.x）
plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；
plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；
plugin:vue/vue3-essential：（用于 Vue 3.x）
plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）
plugin:vue/vue3-recommended：（用于 Vue 3.x）

配置eslint-plugin-vue插件和extends后，template校验还是会失效，此时需要再配置和eslint-plugin-vue插件对应的解析器vue-eslint-parser。vue-eslint-parser能解析 template的内容，但不会解析JS，因此需要再配置一个解析器@typescript-eslint/parser。

• vue-eslint-parser：配置在外面，eslint能解析<template>标签中的内容

• @typescript-eslint/parser：配置在parserOptions中用来解析vue文件中<script>标签中的代码。

具体配置如下：

parser: 'vue-eslint-parser', // 解析<template>标签中的内容
 parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser', // 解析vue文件中<script>标签内容
    sourceType: 'module',
},

问题3： 可以采用如下命令检测.eslintrc.js文件中是否有未安装的插件，确保插件全部安装后eslint才可起作用。

npx eslint 文件名

3. 配置.editorconfig文件

.editorConfig专注于统一编辑器编码风格配置,对多种类型的单文件进行简单的格式化。它提供的配置参数很少，具体如下所示。

# 已经是顶层配置文件，不必继续向上搜索
root = true
[*]
# 编码字符集
charset = utf-8
# 缩进风格是空格
indent_style = space
# 一个缩进占用两个空格，因没有设置tab_with，一个Tab占用2列
indent_size = 2
# 换行符 lf
end_of_line = lf
# 文件以一个空白行结尾
insert_final_newline = true
# 去除行首的任意空白字符
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

可以看到 .editorConfig 和 .prettierrc会存在一些重复的配置，比如都提供缩进的配置参数。建议在实际应用中将二者参数设置为一致。一些注意事项如下：

• 不同编辑器的配置存在差异，vscode 这类编辑器，需要自行安装 editorconfig 插件

• 编辑器的行为会与 .editorconfig 文件中定义的一致，其优先级比编辑器自身的设置要高。比如编辑器vscode中，当.editorConfig中indent_size和settings.json中editor.tabSize同时配置Tab空格数， indent_size优先生效。

• .editorconfig配置缩进时，优先级没有.eslintrc.js文件中的高，但两者并不冲突，配合使用可以使代码风格更加优雅。