js 格式化prettier配置_前端代码规范配置 （一）

ESLint

ESLint 是一个开源的 Javascript 代码检测工具，通过将 js 代码解析成抽象语法树（AST），分析并给与代码质量（如一些方法的使用方式不对）和代码风格(缩进，引号等等）两方面的提示。这样就可以在编码过程中发现问题，而不是在代码的执行过程中。

• ESLint 与 vscode-ESLint 插件的区别

ESLint 是一个 npm 包，安装之后，我们可以通过相应的命令来分细或是修复不规范代码

vscode-ESLint 是 vscode 插件，会在写代码的过程中直接标注格式错误

• 安装：yarn add eslint -D
• 创建一个 eslint 配置文件：.eslintrc(json 形式) 或者 .eslintrc.js（个人觉得后者更灵活）

// .eslintrc.js
module.exports = {
  // rules: 代码规则
  rules: {
    semi: 'error' // 行尾必须有分号
  }
}

• 创建一个test.js

js var a = 123

• 检测一下 npx eslint test.js

$ npx eslint test.js   1:12  error  Missing semicolon  semi    // 少了个分号
✖ 1 problem (1 error, 0 warnings)    
   1 error and 0 warnings potentially fixable with the --fix option.

eslint 分析出代码有问题, 那么如何修复呢，对于本例，我们当然可以直接加上分号，但是对于动辄几百上千行的代码，显然十分麻烦，eslint 提供了的一件修复的命令

• 修复：npx eslint test.js --fix

var a = 123; // 分号自动加上了

那文件多的时候不还是得一个个文件操作，方法总比困难多，后面讲到。

每次都需要手动敲命令检测和修复显然是不显示的，所以各个编辑器都有对应的插件来将 eslint 集成到编辑器。以 vscode 为例 安装: 应用商店搜索安装 eslint 安装完我们会发现代码出现报错了:

不用命令去检测了，直接会报错，接下来的问题是怎么一键修复了。

我们知道，vscode 自带代码格式化 js 的功能，另外也可以安装格式化的插件，其中以 prettier 和 beautify 最常见。

安装 prettier 后，执行 shift + alt + f 格式化之前的代码，但是会发现并没有什么变化，因为 preitter 也要配置规则

再格式化一下，就得到了分号。

那么问题来了假如说这个人根据习惯，在编辑器上设置行尾不要分号，但是做的某个项目中的.eslintrc.js 配置的规范是要分号，那该怎么办呢。临时改编辑器配置行是行，如果要同时进行多个项目开发，但是大家的规则不一样呢，这个时候，我们可以配置局部方案：

新建一个 prettier.config.js （同样也支持 json 形式），在里面写入

module.exports = {
  semi: true // 行尾添加分号
}

再去格式化，发现即使把编辑器的规则设定为不需要分号，也会加上。所以这样在项目中有的配置，就不会用编辑器的，也就不会被项目外部所影响。

prettier.config.js 解决了格式化配置冲突的问题

但是我们还要再看一种情况：

• .eslintrc.js 配置 rules.semi: never // 不要分号
• prettier.config.js 配置 semi: true // 需要分好

再执行格式化，结果是分号加上了，但是代码上提示错误

此时格式化的规则与 eslint 校验规则冲突了，这种情况肯定是不好的，最好是能够让他们能够”协同“，共用一套规则。

那么最好是让 eslint 能直接使用 prettier 的规则，不巧真的可以：

• yarn add -D prettier eslint-plugin-prettier eslint-config-prettier 停一下，我们先来看看这几个插件
• prettier （npm） prettier 是格式化的 npm 包，与 vscode-prettier 插件的区别类似于 eslint 与 vscode-eslint 插件的区别。prettier 包含一些命令，我们可以使用它们去检测和格式化代码：

如 npx prettier --write . 可以进行全局代码格式化，而 vscode-prettier 是我们在编辑器层面可以用来进行检测和格式化的工具

• eslint-plugin-prettier

它是将 eslint 与 prettier 集成的工具，通过它我们就可以实现，eslint 用 prettier 的规则来检测代码，现在，我们需要改一下 eslint 配置：

js // .eslintrc.js module.exports = { + plugins: ["prettier"], // 引入`eslint-plugin-prettier`插件 rules: { - semi: true, + "prettier/prettier": "error" // 使用 prettier 规则 }, };

然后我们就只需要在.prettierrc.js 中配置规则就可以了：

js // .prettierrc.js module.exports = { semi: true, endOfLine: 'auto' }

现在执行下格式化操作：npx prettier --write . or shift + alt + f

没有分号，eslint 会提示错误，执行格式化后，eslint 错误消失，两者公用一个规则，问题解决

然而 eslint 中本身是可以配置规则的呀，那么，假如出现这种情况，不是打架了么：

```js // .eslintrc.js module.exports = { plugins: ['prettier'], rules: { 'prettier/prettier': 'error', semi: false // 不要分号 } }

// .prettierrc.js module.exports = { semi: true, // 要分号 endOfLine: 'auto' } ```

我们来格式化一下

没错，eslint 跟 prettier 说：不是想要的，你做的再多也没用 ！

那么，eslint-config-prettier 要上场了

• eslint-config-prettier

这个插件就是关闭与 prettier 不一样规则的，当然它也会关掉所有不必要的规则（比如一些已经过时的规则）

js module.exports = { plugins: ["prettier"], + extends: ["prettier"], // 使用 eslint-config-prettier 拓展 rules: { "prettier/prettier": "error", semi: false } };

运行下：npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check

$ npx eslint --print-config test.js | npx eslint-config-prettier-check   
The following rules are unnecessary or might conflict with Prettier:
·semi 

提示 eslint 的 semi 规则与 prettier 相冲，手动解决

那么至此 eslint+prettier+vscode-prettier 的简单搭配就完成了，配上完整代码：

// .eslintrc.js  
module.exports = { 
    plugins: ['prettier'], // 使用 plugin 插件 
    extends: ['prettier'], // 使用 eslint-config-prettier 解决与 prettier 冲突的配置
    rules: {
       'prettier/prettier': 'error' // 使用 prettier 插件提供的规则校验
    }
}
// .prettierrc.js   
module.exports = {
   // 配置规范  
   semi: false,
   endOfLine: 'auto'
}