前端項目代碼規範落地方案 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規則案例