前言

最近在配置代码格式化和代码质量工具，希望能在ctrl+s保存时自动格式化、并进行eslint质量检验、优化vscode设置，提高开发效率，统一项目组不同开发人员代码风格。在网上搜了很多文章进行研究和尝试，非常感谢各位大牛的分享，从一头雾水到配置出一套适合自己的方案，花了不少时间。因此，整理了一下笔记，如果能帮到正在看文章的你，那再好不过了。也欢迎大神指教。这篇文章也会持续更新，补充实战中遇到的问题，以及后期husky、CI/CD规范的配置。

一、作用分工

1 、vetur

开发vue项目基本必装的一个插件，主要功能：

语法高亮、代码片段、质量提示&错误、格式化（风格）、智能提示等

2、 prettier

非常优秀的、代码格式化的工具，只管代码格式化，不管代码质量。

3、 eslint

eslint重在代码质量，虽然也可以格式化，但是不如prettier专业。因此，采用eslint来规范代码，prettier来统一代码格式。

二、我的配置步骤

1、安装、配置eslint

[参考文章1]深入浅出eslint——关于我学习eslint的心得

（1）安装

本地安装：

你使用的任何插件或共享配置必须安装在本地来与安装在本地的ESLint一起工作。

npm install eslint --save-dev

全局安装：

如果你想让ESLint可用到所有的项目,建议全局安装ESLint。

npm install -g eslint 

（2）配置eslint的方法和优先级顺序

有两种主要的方法来配置ESLint：

1、配置注释 - 使用JavaScript注释将配置信息直接嵌入到文件中。****

2、配置文件 - 使用下面任一的文件来为全部的目录和它的子目录指定配置信息。

• A、javascript：使用.eslintrc.js文件并导出一个包含配置的对象。
• B、YAML：.eslintrc.yaml或者.eslintrc.
• C、yml JSON：.eslintrc.json，并且此文件允许使用JS形式的注释
• D、废弃的用法：.eslintrc，此文件可以是JSON或者YAML
• E、package.json：在package.json文件中创建eslintConfig属性，所有的配置包含在此属性中。

Ps： 这些文件的优先级则是按照以上出现的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

（3）具体配置

方法1：在package.json-eslintConfig中配置

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "@typescript-eslint/no-explicit-any": [
      "off"
    ],
    "@typescript-eslint/no-this-alias": [
      "off"
    ]
  }
 }

方法2：在项目目录下新建.eslintrc.js文件，进行配置

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "@typescript-eslint/no-explicit-any": [
      "off"
    ],
    "@typescript-eslint/no-this-alias": [
      "off"
    ]
  }
 }

2、安装、配置prettier

（1）安装和初始化

# 安装包
npm i prettier -D  

# 新建 .prettierrc.js
echo module.exports = {} > .prettierrc.js

# 新建 .prettierignore
echo > .prettierignore

（2）配置.prettierrc.js

【参考文章2】ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验

Prettier 支持可以配置参数不多，总共才 21 个，这里是所有参数的说明 prettier options

所有参数都有默认值，也就是说即使你没有配置 .prettierrc.js，当你用 Prettier 去格式化代码的时候全部都会走默认配置。针对个别参数，你不想用默认设置的话，就可以在 .prettierrc.js 配置具体想要的值。

比如：

module.exports = {
    printWidth: 80,                    //（默认值80）单行代码超出 80 个字符自动换行
    tabWidth: 2,                       //（默认值2）一个 tab 键缩进相当于 2 个空格
    useTabs: true,                     // 行缩进使用 tab 键代替空格
    semi: false,                       //（默认值是true,语句的末尾加上分号)
    singleQuote: true,                 // （默认false）使用单引号
    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', //（默认值）允许自动格式化内嵌的代码块
};

3、在vscode的settings.json中进行格式化配置

【参考文章3】一文学会搭建vue3+TypeScript项目规范

【参考文章4】vscode之代码格式化的prettier、eslint、vetur以及vscode的settings.json配置文件

（1）、设置代码在保存的时候自动格式化

{
    "editor.formatOnSave": true
}

（2）、根据语言 设置其对应的默认格式化工具为 prettier

{
    // 设置编辑器的默认格式化工具为 prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode", 
    // 根据语言设置其对应的默认格式化工具
    "[vue]": {
		  "editor.defaultFormatter": "esbenp.prettier-vscode"
	  }
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript|react]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript|react]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }

（3）eslint配置

{
    "eslint.alwaysShowStatus": true,  // 总是在 VSCode 显示 ESLint 的状态
    "eslint.quiet": true,             // 忽略 warning 的错误
    "editor.codeActionsOnSave": {     // 保存时使用 ESLint 修复可修复错误
        "source.fixAll": true,
        "source.fixAll.eslint": true
    }	
}

三、本人实战中的配置，分享一下

{
  "workbench.colorTheme": "Default Dark+",
  // 1、vscode编辑器基础配置
  // vscode 默认是启用根据文件类型自动设置 tabSize 的值，这里设为false，不自动设置，统一设置为2
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  // 文件暂停输入10秒后自动保存
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10000,
  // 自动换行
  "editor.wordWrap": "on",

  // 2、vscode编辑器 格式化配置
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具为prettier
  // ------prettier的格式化rule配置开始，和.prettierrc.js保持一致----------
  "prettier.semi": true, // 语句的末尾加上分号 （默认值true）
  "prettier.printWidth": 100, // 单行代码超出 100 个字符自动换行（默认值80）
  "prettier.tabWidth": 2, // 一个 tab 键缩进相当于 2 个空格（默认值2）
  "prettier.singleQuote": true, // 使用单引号（默认false）
  // ------prettier的格式化rule配置结束----------
  // 也可以根据语言单独设置其对应的默认格式化工具
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[javascript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[typescript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[javascript|react]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[typescript|react]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[less]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[css]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[json]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },

  //3、eslint代码质量校验配置
  "vetur.validation.template": true,
  "vetur.validation.style": true,
  "vetur.validation.script": false,
  "eslint.enable": true, //开启vscode的eslint
  // 在 ESLint 2.0.4 版本开始，不需要通过 eslint.validate 来指定校验的文件类型了，已经自动支持了 .vue 文件
  // "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "eslint.alwaysShowStatus": true, // 总是在 VSCode 显示 ESLint 的状态
  // "eslint.quiet": true, // 忽略 warning 的错误
  "editor.codeActionsOnSave": {
    // 保存时使用 ESLint 修复可修复错误
    "source.fixAll.eslint": true
  }
}

// .prettierrc.js
module.exports = {
  semi: true, // 语句的末尾加上分号 （默认值true）
  printWidth: 100, // 单行代码超出 100 个字符自动换行（默认值80）
  tabWidth: 2, // 一个 tab 键缩进相当于 2 个空格（默认值2）
  singleQuote: true // 使用单引号（默认false）
}

// .eslintrc.js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        '@typescript-eslint/no-explicit-any': ['off'],
        '@typescript-eslint/no-this-alias': ['off'],
        semi: [2, 'always'] // 默认值
    }
}

咳咳，之所以上方.eslintrc文件特地设置semi: [2, 'always']，是为了方便接下来检验自己上述的配置有没有达到下述2个目的效果： ctrl+s保存之后，1、是否按prettier格式化 2、又同时进行eslint校验

为了测试这个效果，我故意把 settings.json和 .prettierrc.js里的 semi: true改成false，让prettier和eslint规则不同，看看ctrl+s之后的效果（见下图）：

按照prettier去掉了分号，然后又根据eslint校验报错，说明2个目的都达到了，完美！！

这个实践其实是刻意为之，其实eslint和prettier默认都是加分号。但是，这个实践也启示我们思考，如果eslint和prettier在某些格式化规则确实冲突怎么办？

两个解决方案：

1、eslint和prettier规则根据项目需求，统一配置成一样的

2、采用下方“四、解决eslint和prettier的冲突”安装2个插件进行解决。但是我尝试了一下，安装prettier和2个插件（slint-plugin-prettier 和 eslint-config-prettier）。结果发现2个插件安装不上，于是查了一下是因为eslint版本问题。但是我又不想更改现有项目已安装的eslint版本，因此没有npm安装prettier和2个插件，直接在vscode用的prettier插件，目前也能满足项目开发需要。具体看每个人选择。

四、解决eslint和prettier的冲突

1、安装2个插件：eslint-plugin-prettier 和 eslint-config-prettier

npm i eslint-plugin-prettier eslint-config-prettier -D

vue-cli 在创建项目时，如果选择 prettier，那么这两个插件会自动安装。这两个插件的作用是：

• eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
• eslint-plugin-prettier：将prettier作为ESLint规范来使用

2、修改.eslintrc.js文件内容,在extends数组的最后新增一项：

module.exports = {
  ...// 其他的配置项
  extends: [
  ... //extends数组里其他配置项
  'plugin:prettier/recommended' // 解决prettier和eslint的冲突
  ],
}

五、再聊聊

1、setting.json和.eslintrc.js、.prettierrc.js的关系

eslint插件（同理prettier插件）默认会首先遵循离当前文件最近的.eslintrc.js（同理.prettierrc.js）文件中的配置，如果这个文件的同级或者更上几级的目录中没有.eslintrc（同理.prettierrc）的配置文件，此时运行eslint命令（同理prettier命令）或者使用eslint插件（同理prettier插件）才会使用settings.json中的配置

追问：为什么要在vscode的eslint插件setting.json和.eslingrc.js中配两次 这两处什么关系？

目标不一样

setting.json：针对于插件或者vscode自身的配置。

.eslintrc：是对代码规范的配置，而且还有个好处：便于其他项目的复用。

2、husky

待学习和整理

3、CI/CD规范

待学习和整理