如何在vue项目中正确集成Eslint和prettier

一、正确理解eslint和prettier

Eslint：ESLint 是一款 Lint 工具，主要用于代码的质量检查，同时也具备一定的代码风格的格式化能力；

Prettier：仅仅只是一个代码风格的约束工具，对于代码可能产生的 Bug 等并不关心；

联系：两者都是用来帮助开发者规范代码风格的工具；

区别：

        ESLint只能作用于js代码及文件，html、css、json、vue代码及文件的相关格式处理不了；

        Prettier全部代码都可以自定义格式化

虽然说 ESLint 其实也具备一定的代码风格的格式化能力，但是在实践中，我们一般采用 ESlint 来做代码质量的约束，用 Prettier 来做代码风格的约束

二、 规则冲突

ESLint和Prettier都可以作用于js代码及文件，由于两个插件默认配置存在差异，所以在公共域必然也就存在冲突；例：

1、ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号；

 2、ESLint默认强制使用单引号，Prettier默认使用双引号；

 3、ESLint默认句末减少不必要的逗号，Prettier默认尽可能多使用逗号等等

prettier和eslint规则不匹配造成冲突

2.1 冲突机制

 保存之后，先执行了ESLint的配置，然后再执行Prettier的配置。不管前面的ESLint怎样设置的规则，只要和Prettier的设置冲突了，就直接会被Prettier覆盖，所以最后呈现的代码效果都是Prettier格式化的结果

三、如何解决冲突

 解决方式主要采用了官方提供的两款插件：

eslint-config-prettier：这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则；

eslint-plugin-prettier：这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化；这样就相当于将 Prettier 整合进了 ESLint 中；

需要修改eslintrc对应的配置：

{
  "extends": [
		"plugin:prettier/recommended" // 添加到数组的最后一个元素
	]
}

四、vue中采用eslint和prettier规范代码

4,1 创建项目时候手动选择格式化规范

 4.2 项目中与规范校验相关的依赖

 4.3 .eslintrc.js中有关配置

 'plugin:prettier/recommended'：集成eslint-config-prettier和eslint-plugin-prettier的配置

parser: '@babel/eslint-parser'：允许 ESLint 在由 Babel 转换的源代码上运行的解析器

4.4 自定义prettier规则

在项目根目录下创建.prettierrc.js文件（也支持.prettierrc.json格式）

注意注意注意：修改.prettierrc.js后一定要重新启动vscode，不然eslint不会生效

// .prettierrc.js
module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 行末分号
  semi: false,
  // 单引号
  singleQuote: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）
  trailingComma: "none",
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxBracketSameLine: false,
  // 箭头圆括号
  arrowParens: "avoid",
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: "auto",
  HTMLWhitespaceSensitivity: "ignore",
};

4.5 配置eslint忽略文件

在项目根目录下新建.eslintignore文件

// .eslintignore
build/*.js
src/assets
public
dist

4.6 重启vscode后，运行package.json中的lint指令，即可格式化所有的文件

五、项目配置文档

可以在项目根目录下新建.vscode文件夹，新建settings.json文件，对项目的配置进行统一处理，测试时候的settings.json内容为：

{
  // css转rem配置
  "cssrem.rootFontSize": 37.5,
  "window.zoomLevel": 1,//屏幕放大倍数
  "[vue]": {//设置vue文件采用prettier进行格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,//保存代码时候自动触发格式化
}

参考链接：

prettier 官方文档：https://prettier.io/docs/en/integrating-with-linters.html#docsNav
eslint-config-prettier：https://github.com/prettier/eslint-config-prettier
eslint-plugin-prettier：https://github.com/prettier/eslint-plugin-prettier
typescript-eslint：https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md#usage-with-prettier
解决 ESLint 和 Prettier 冲突问题_暖暖章鱼哥的博客-CSDN博客_eslint和prettier 冲突

ESLint 和 Prettier 配合使用_许许盛的博客-CSDN博客_eslint prettier

Vue项目接入Eslint+Prettier+Husky格式化代码 - 掘金