在项目中使用ESLint与Prettier

关于ESLint&Prettier的分工

• prettier 主要是为了格式化代码，而在没有 prettier 之前，是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。

  • 缺点：每种编辑器会有不一样的代码格式，而且配置会比较麻烦。
  • prettier 已经逐渐成为业界主流的代码风格格式化工具。
  • 减轻 eslint 等工具的校验规则，因为将代码样式校验交给了 prettier，所以可以将代码校验的规则更准确地应用到代码真正的规范上面。

• eslint 是主要还是负责代码规则校验，prettier 只调整代码风格，代码样式，eslint 才是真正检查代码是否符合规范的工具。

两者分工不同，所以需要配合使用。

具体实现过程

1. 统一团队使用的开发工具（webstorm，ide 编辑器）
2. 安装 eslint 和 prettier （node 模块）
3. 安装 eslint 和 prettier （ ide 编辑器的插件）
4. 配置 eslint 和 prettier
5. 配置 editorconfig （可选）

安装 eslint 和 prettier （ ide 编辑器的插件），主要就是利用 ide 编辑器做代码格式错误提醒和代码格式处理，这个操作也可以使用 webpack 打包的时候来做，也可以使用 npm 来做，但这里借助编辑器会更方便。

下文使用 VSCode 进行配置，尚在学习过程中，请指正！

1. 统一团队使用的开发工具（webstorm，ide 编辑器）

开发工具可以做很多东西，是开发代码的利器，但是不同的开发工具会有不同的代码提示，代码格式化，代码检查的机制，这样的差异化会对团队代码规范（开发和检查）带来很多问题，所以需要统一。

前端开发工具推荐：WebStorm VSCode

2. 安装 eslint 和 prettier （node 模块）

这一步是最需要的，如果没有这两个模块，开发工具即使有插件也不能使用。

# 这里需要安装最主要的两个 node 模块
npm install eslint prettier -g --save-dev
 
# 这个是为了 eslint 跟 prettier 可以联合使用 （可选）
npm install --save-dev eslint-plugin-prettier 
# 这个是为了让 eslint 跟 prettier 兼容，关闭 prettier 跟 eslint 冲突的rules
npm install --save-dev eslint-config-prettier
复制代码

插件介绍：

• eslint-config-prettier

  • 这个插件是如果eslint的规则和prettier的规则发生冲突的时候（主要是不必要的冲突），例如eslint 限制了必须单引号，prettier也限制了必须单引号，那么如果用 eslint 驱动 prettier 来做代码检查的话，就会提示2种报错，虽然他们都指向同一种代码错误，这个时候就会由这个插件来关闭掉额外的报错。

  • 但如果是 eslint 只负责检测代码，prettier 只负责格式化代码，那么他们之间互不干扰，也就是说，也是可以不安装这个插件的，但是因为团队的人员的差异性（即使同一个开发工具也有版本差异，也有使用 prettier 和 eslint 的差异），可能有存在各种情况，所以最好还是安装上这个插件。

  • 官方有详细介绍：GitHub – prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

• babel-eslint ：
  • 有些代码是没被 eslint 支持的（因为 babel 也是负责这种事情，转译不被支持的 js 语法），所以需要加上这个插件来保持兼容性。
• eslint-plugin-vue：
  • eslint-plugin-vue
  • 为了让eslint 可以检查.vue文件的代码。

3. 安装eslint 插件和 prettier 插件并启用插件

安装过程自行查看 eslint 文档 和 prettier 文档

    {
        "vetur.validation.template": false,
        // "eslint.autoFixOnSave": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
              "language": "vue"
              // "autoFix": true
            },
            {
              "language": "typescript"
              // "autoFix": true
            },
            {
              "language": "typescriptreact"
              // "autoFix": true
            }
        ],
        // Set the default
        "editor.formatOnSave": false,
    }
复制代码

4. 配置 eslint 插件和 prettier插件

• eslint 的配置
  参考配置 AlloyTeam ESLint 规则

  .eslintrc 配置文件需要添加修改地方，主要是为了 prettier插件和eslint-config-prettier 插件和eslint-plugin-prettier插件使用的：

  // 因为使用了 eslint 和 prettier，所以要加上他们
  extends: [ 'eslint:recommended', 'plugin:prettier/recommended'],
  // vuecli3.0 的
  extends: ['plugin:vue/essential', '@vue/prettier'],
  // required to lint *.vue files 使用 html参数
  plugins: ['html', 'prettier'],
  // rules 规则就按照各家写法。
   rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      // 'prettier/prettier': 'error',
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'any',
            normal: 'always',
            component: 'always'
          },
          svg: 'always',
          math: 'always'
        }
      ]
    },
  复制代码

• prettier的配置
  prettier 的检查规则是通过配置文件.prettierrc 实现的， 不过一般来说，只需要配置少部分规则即可：

    // 放在项目根目录的 .prettierrc.js 文件
    module.exports = {
      // 单行最大长度
      printWidth: 100,
      // 设置编辑器每一个水平缩进的空格数
      tabWidth: 2,
      // 在句尾添加分号
      semi: false,
      // 使用单引号
      singleQuote: true,
      // 在任何可能的多行中输入尾逗号。
      trailingCommas: 'es5',
      // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
      bracketSpacing: true,
      // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
      jsxBracketSameLinte: false,
      // 为单行箭头函数的参数添加圆括号。
      alwaysParens: 'always'
    }
复制代码

有可能会出现的情况是，prettier 格式化后，全部加了分号，但是 eslint 又要去掉分号，那么就会重复了，这里可以简单地设置 prettier 的分号设置跟 eslint 保持一致，其他如此类推，但只适用在几个比较特别的地方，可以参考官方文档。

5. 配置 editorconfig

• EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。
• EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件可以让编辑器读取配置文件并依此格式化代码。

对此我个人的理解就是，editorconfig可以协助开发工具在自动格式化或者自动排版或者录入排版的时候进行代码格式化，但是只能支持比较简单的规则，不过也减轻了一部分代码格式化的压力和成本，所以有比没有好，而且最好要有。

    // 放在项目根目录的 .editorconfig 文件
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
复制代码

转载于:https://juejin.im/post/5cda34e65188252035420ae0