前端项目代码规范落地方案 ESlint+Prettier

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

我的项目环境([email protected][email protected])
.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", //是否使用尾逗号，有三个可选值""
  "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规则案例