从esLint+Prettier开始格式化代码

1. 促使我要代码格式化的原因

代码格式化和代码规范对研发者来说，都并不陌生。随手的保存，随手的格式化代码，总让我们的代码更加漂亮。但是我们在一次次的格式化中，偶尔也有一些问题。
在开发同一个项目时，由于不同的开发者使用的编辑器不同，格式化方案也有所不同，还有一些开发者带有之前开发习惯的格式化配置，那么在代码提交中，就会出现格式变动。完成一个功能后，开心的commit,却发现多了很多不是自己的修改，甚至引发冲突。当你使用–no-verify顺利提交之后，发现引号在单双之间横跳 、缩进在两个空格和tab不断反复。。。
所以，为了让团队内有一个统一的代码规范，不再因为这些无伤大雅的问题浪费时间，我选择使用esLint+Prettier来帮助我们来统一内部～～～

2. esLint

ESLint是一个JS代码检查工具，用于发现并修正语法错误和统一代码格式。也就是说 ESLint 关注两方面的问题：

• 代码质量：约定JS的使用方式，避免问题的产生
• 代码格式：只影响代码的美观程度，不会产生问题

为什么我们需要代码检查呢？JS 作为一种弱类型动态语言，写法会比较随心所欲，这便很容易引入问题并增加我们发现问题的成本。通过编写合适的规则来约束代码，利用代码校验工具来发现并修复问题，能让我们的代码更健壮，工程更可靠。ESLint 就是这么一个通过各种规则对我们的代码添加约束的工具。

3. Prettier

在使用 ESLint 的时候，我们往往会配合 Prettier 使用。Prettier 是一个‘有态度’的代码格式化工具，专注于代码格式自动调整，ESLint 本身就可以解决代码格式方面的问题，为什么要两者配合使用？

• ESLint 推出 --fix 参数前，ESLint 并没有自动格式化代码的功能，而 Prettier 可以自动格式化代码。
• 虽然 ESLint 也可以校验代码格式，但 Prettier 更擅长。

二者搭配使用，ESLint 关注代码质量，Prettier 关注代码格式。但是二者在格式化上面的功能有所交叉，所以Prettier 和 ESLint 一起使用的时候会有冲突，这需要我们进行一些配置：

• 关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置

// .eslintrc    

{      

    "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖    

}

• 当我们使用 Prettier + ESLint 的时候，其实格式问题两个都有参与，disable ESLint 之后，其实格式的问题已经全部由 prettier 接手了。那我们为什么还要这个 plugin？其实是因为我们期望报错的来源依旧是 ESLint ，使用这个，相当于把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源。

// .eslintrc    

{         

    "rules": {        

        "prettier/prettier": "error"      

    }    

}

4. 开始配置

4.1 全局安装esLint

全局安装是为了方便所有项目，也可以在本项目安装

//全局安装
npm install eslint -g

//本项目安装
npm install eslint --save

4.2 全局安装prettier

全局安装是为了方便所有项目，建议本项目也安装

//全局安装
npm install prettier -g

//本项目安装
npm install prettier --save

4.3 配置eslint

在项目的根目录增加.eslintrc.js文件,进行eslint规则配置
.eslintrc.js

module.exports = {
  root: true,

  parserOptions: {
    //parser: 'babel-eslint', // 解析一些最新的 es 语法
    //sourceType: 'module' // 模块为 ECMAScript 模块
  },

  extends: ['prettier'], //standard:标准;prettier:使用prettier规则,放到最后，会覆盖eslint规则

  rules: {
    // 'no-debugger': 'error', // 禁止在代码中使用 debugger
    quotes: ['error', 'single'], // 单引号
    semi: ['error', 'always'] // 代码需要以分号结尾
  }
};

4.4 配置prettier规则

在项目的根目录增加.prettierrc.js文件,进行prettier规则配置，以下配置为本人测试使用，如需详细配置规则，请自己配置。
.prettierrc.js

module.exports = {
  printWidth: 800, // 单行宽度限制
  tabWidth: 2, // tab 使用两个空格
  useTabs: false, // 不使用制表符缩进，使用空格缩进
  semi: true, // 代码需要分号结尾
  singleQuote: true, // 单引号
  bracketSpacing: true, // 对象左右两侧需要空格
  jsxBracketSameLine: false, // html 关闭标签换行
  arrowParens: 'avoid', // 单参数的箭头函数参数不需要括号
  proseWrap: 'never', // 参考 https://prettier.io/docs/en/options.html#prose-wrap
  trailingComma: 'none', // 参考 https://prettier.io/docs/en/options.html#trailing-commas
};

部分prettier配置规则

{
  "formatOnSave":true,//保存时自动格式化
  "formatOnPaste":true,//粘贴时自动格式化
  "printWidth": 100, // 超过最大值换行
  "tabWidth": 4, // 缩进字节数
  "useTabs": false, // 缩进不使用tab，使用空格
  "semi": true, // 句尾添加分号
  "singleQuote": true, // 使用单引号代替双引号
  "trailingComma": none, //在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "parser": "babylon", // 格式化的解析器，默认是babylon
  "requireConfig": false, // Require a 'prettierconfig' to format prettier
  "requirePragma": false, // 不需要写文件开头的 @prettier
  "useEditorConfig": false,
  "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

Pretttier官方文档：https://prettier.io/docs/en/options.html

4.5 打开编辑器上的esLint和Prettier

由于在webstorm上，这两项不是自动启用的，而且在M1上，你是搜索不到prettier插件的的；可以根据下列方法，打开两个调试

4.5.1 webstorm

4.5.1.1 安装esLint和prettier插件

进入Preferences => Plugins =>Marketplace
搜索ESLint Restart Service Action,安装；这个就是在M1上的eslint；
搜索Perttier,安装；

4.5.1.2 打开esLint调试

进入Preferences => Languages & Frameworks => JavaScript => Code Quality Tools => ESLint

由于我是自己设置的格式化规则，所以这里我选择了Manual ESLint configuration模式
然后在最后选择了保存自动格式化

4.5.1.3 打开Prettier调试

进入Preferences => Languages & Frameworks => JavaScript => Prettier
选择要执行的文件Prettier package ，选择当前项目配置prettier
同样，我选择了保存自动格式化

以上webstorm完成配置；

4.5.2 vscode

4.5.2.1 安装插件

安装插件ESLint、Prettier - Code formatter

4.5.2.2 设置eslint格式化快捷键

code => 首选项 => 键盘快捷方式，搜索 fix – 找到 ESLint 设置，双击按键绑定一栏，然后根据自己的编码习惯进行设置

4.5.2.3 设置prettier为格式化工具

设定编辑器默认代码格式化（美化）的插件为Prettier - Code formatter，
code => 首选项 =>设置
在搜索设置框贴入editor.defaultFormatter，将配置项选择为Prettier - Code formatter。

4.5.2.4 设置保存自动格式化

code => 首选项 =>设置
在搜索设置框贴入editor.formatOnSave，将配置项选择钩上；

到此，vscode配置完成。

5. 结语

以上，就完成了项目的格式化规则设置，当然，还可以设置ci或者git push代码时的检测，这里不再详细说明。
每个团队，想要不在代码格式冲突上产生矛盾，一套属于自己团队的代码规范十分有效！当然，还有其他的代码规范工具，那就仁者见仁，智者见智了，各位按需使用吧！