前端项目代码规范落地方案-ESlintPrettier

1.1 开发编辑器及 lint 工具配置

我们约定团队开发均采用 vscode 编辑器，并至少安装以下插件辅助开发：

• ESLint
• Document This
• EditorConfig for VS Code
• Prettier – Code formatter

1.2 添加 .editorconfig 文件

由于不同开发者的编辑器设置不同，故在项目中应当包含 .editorconfig，用来统一配置编辑器的换行、缩进存储格式。
配置参考：

# http://editorconfig.org
root = true

[*]
indent_style = space                    # 输入的 tab 都用空格代替
indent_size = 2                         # 一个 tab 用 2 个空格代替
# end_of_line = lf                      # 换行符使用 unix 的换行符 \n
charset = utf-8                         # 字符编码 utf-8
trim_trailing_whitespace = true         # 去掉每行末尾的空格
insert_final_newline = true             # 每个文件末尾都加一个空行

[*.md]
trim_trailing_whitespace = false        # .md 文件不去掉每行末尾的空格

1.3 ESLint + Prettier。

1.3.1 新手的疑问 ESlint 和 Prettier 格式化的区别？

eslint（包括其他一些 lint 工具）的主要功能包含代码格式的校验，代码质量的校验。而 Prettier 只是代码格式的校验（并格式化代码），不会对代码质量进行校验。代码格式问题通常指的是：单行代码长度、tab 长度、空格、逗号表达式等问题。而代码质量问题指的是：未使用变量、三等号、全局变量声明等问题。

1.3.2 配合使用时到底谁的格式化在生效？

ESLint 和 Prettier 相互合作的时候有一些问题，对于他们交集的部分规则，ESLint 和 Prettier 格式化后的代码格式不一致。导致的问题是：当你用 Prettier 格式化代码后再用 ESLint 去检测，会出现一些因为格式化导致的 warning。这个时候有两个解决方案：

1. 运行 Prettier 之后，再使用 eslint –fix 格式化一把，这样把冲突的部分以 ESLint 的格式为标准覆盖掉，剩下的 warning 就都是代码质量问题了。

2. 在配置 ESLint 的校验规则时候把和 Prettier 冲突的规则 disable 掉，然后再使用 Prettier 的规则作为校验规则。那么使用 Prettier 格式化后，使用 ESLint 校验就不会出现对前者的 warning。

为什么不能先使用 ESLint 再使用 Prettier？
针对方案 1，如果你后使用 Prettier，那么格式化后提交的代码在下一次或者别人 checkout 代码后是通不过 lint 校验的。

针对方案 2，其实是可以的，但是本人在实践中看社区方案的时候有提到某些情况下 eslint –fix 和 prettier 混用会出现格式问题。所以保险起见还是先用 perttier 格式化，再用 eslint 命令校验，而不用 eslint –fix 命令去格式化。

1.3.3 ESlint node 包跟 VScode 插件有什么区别

node 包是里面的是在编译期给你报错用的，报错了会停止编译，直到你修复。
vscode 插件是可视化插件 在你编写代码时候就可以看到不合规范的代码

1.3.4 环境配置

webpack 环境下加载 Eslint，安装 npm 插件包

// 这里需要全局安装最主要的两个 node 模块，主要是要让 ide 编辑器能够读取全局环境来调用这 2 个模块
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
//webpack 插件
npm install --save-dev eslint-loader
//eslint vue 文件
npm install --save-dev eslint-plugin-vue
// 处理 webpack 别名路径
npm install --save-dev eslint-plugin-import
// 引入爱彼迎规范
npm install --save-dev eslint-config-airbnb-base

我的项目环境(TS+Vue+Webpack@4.31.0+eslint-load@3.0.2)
.eslintrc.js 配置文件如下

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  settings: {
    'import/resolver': {
      webpack: {config: './build/webpack.config.dev.js',},
    },
  },
  extends: [
    'plugin:vue/essential',
    "plugin:prettier/recommended",
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    // 解析 TS
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    // "prettier/prettier":"error",
    'no-underscore-dangle': 0,
    "max-len": ["error", { code: 160}],
    'no-unused-expressions': [2, {                     'allowShortCircuit': true, 'allowTernary': false}],
    // 待改正
    'no-undef': 0,
    'no-restricted-globals': 0,
    'no-unused-vars': 0,
    'comma-dangle': 0,
    'object-curly-newline': 0,
  },
}

webpack loader 配置
我们项目是在 webpack 中引入 eslint-loader 来启动 eslint 的，所以我们只要稍微修改 webpack 的配置，就能在启动 webpack-dev-server 的时候，每次保存代码同时自动对代码进行格式化。

    rules: [
      {test: /\.(vue|ts|js)$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true,
          emitWarning: false,
        },
      },
    ],

eslint-plugin-prettier 插件会调用 prettier 对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被 prettier 进行标记, 最后 eslint 自动 fix 按照 prettier 的规范修复 error 代码

prettier 配置

一共有三种方式支持对 Prettier 进行配置：

• 根目录创建.prettierrc 文件，能够写入 YML、JSON 的配置格式，并且支持.yaml/.yml/.json/.js 后缀；
• 根目录创建.prettier.config.js 文件，并对外 export 一个对象；
• 在 package.json 中新建 prettier 属性。

下面我们使用 prettierrc.js 的方式对 prettier 进行配置，同时讲解下各个配置的作用。

module.exports = {
  "printWidth": 180, // 一行的字符数，如果超过会进行换行，默认为 80
  "tabWidth": 2, // 一个 tab 代表几个空格数，默认为 80
  "useTabs": false, // 是否使用 tab 进行缩进，默认为 false，表示用空格进行缩减
  "singleQuote": true, // 字符串是否使用单引号，默认为 false，使用双引号
  "semi": true, // 行位是否使用分号，默认为 true
  "trailingComma": "es5", // 是否使用尾逗号，有三个可选值 "<none|es5|all>"
  "bracketSpacing": true, // 对象大括号直接是否有空格，默认为 true，效果：{foo: bar}
}

1.4 遇到的坑

1. 期间遇到过 ESlint 整合 Prettier 后，导致 Webpack 一直在重复热加载，排除原因后是 prettier 配置不对导致一直在刷新页面，参考文档配置 prettier 即可
2. 当存在 error 时候，webpack 无法编译成功，不要担心，全部排除错误即可成功
3. 当出现 eslint 和 prettier 格式化冲突时候，需要着重处理避开冲突比如：三目运算符嵌套时
4. 目前 TS 官方推荐使用 Eslint 来校验 TypeScript 语法。
5. 建议从新项目开始制定规范，旧项目如果嵌入代码规范，改动较大需要做好排期工作。

1.5 总结

有了这个格式化规范后我们再也不用羡慕隔壁写 golang 的同事，保存后就能自动 format，也不用为了项目代码不统一和同事争论得面红耳赤，因为我们统一使用 prettier 的风格。可能刚开始有些地方你看不惯，不过不要紧，想想这么做都是为了团队和睦，世界和平，我们做出的牺牲都是必要的。而且 prettier 的样式风格已经在很多大型开源项目中被采用，比如 react、webpack、babel。

参考文档 :
JavaScript 代码规范主流对比
Eslint 规则案例