前端项目代码规范落地方案 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
复制代码

个人项目环境(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规则案例