eslint+prettier+vue3格式化

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

参考官网执行如下命令

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

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

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

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

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

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

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

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

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

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

1.  
   extends: [
2.  
   'plugin:vue/vue3-recommended',
3.  
   'airbnb-base',
4.  
   'plugin:@typescript-eslint/recommended',
5.  
   'plugin:prettier/recommended', // 增加的配置
6.  
   ],

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

1.  
   plugin:vue/base：基础
2.  
   plugin:vue/essential：预防错误的（用于 Vue 2.x）
3.  
   plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；
4.  
   plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；
5.  
   plugin:vue/vue3-essential：（用于 Vue 3.x）
6.  
   plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）
7.  
   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>标签中的代码。

具体配置如下：

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

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

npx eslint 文件名

3. 配置.editorconfig文件

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

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

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

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

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

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