在日常工作中，我們會(huì)接觸形形色色的工程。如果工程使用的技術(shù)架構(gòu)不同，可能會(huì)有對(duì)應(yīng)不同的代碼規(guī)范。而每個(gè)人的編碼習(xí)慣是不一樣的，也是難以短時(shí)間內(nèi)改變的，這也是我們常常在開(kāi)發(fā)一個(gè)新工程的時(shí)候，會(huì)遇到各種規(guī)范報(bào)錯(cuò)的原因。

此時(shí)，如果能有一套配置，能夠讓我們?cè)趯?xiě)代碼時(shí)不用考慮該工程的規(guī)則，只要在保存時(shí)就能夠自動(dòng)按照當(dāng)前工程配置好的規(guī)則修復(fù)所有錯(cuò)誤，這無(wú)疑會(huì)大大增加我們的開(kāi)發(fā)體驗(yàn)和效率。

下面我將詳細(xì)講解為了實(shí)現(xiàn)這一目標(biāo)，我們需要做什么，以及各種規(guī)范的基本配置。

EditorConfig

首先，我們需要一個(gè)基本的規(guī)范，例如縮進(jìn)，如何換行等等。它要適用于所有的團(tuán)隊(duì)，適用于所有的語(yǔ)言，適用于所有的編輯器。

EditorConfig 能幫助我們實(shí)現(xiàn)這一點(diǎn)。它讓所有的開(kāi)發(fā)者在基本編碼規(guī)范上保持一致。

我們需要做的是：

1. 安裝 EditorConfig 插件（有些編輯器默認(rèn)支持 EditorConfig ，具體請(qǐng)看 這些編輯器不需要安裝插件 (https://editorconfig.org/#pre-installed)）。
2. 配置 .editorconfig 文件。

以下是 .editorconfig 的用法和例子：

## 打開(kāi)文件時(shí)，EditorConfig 插件會(huì)在打開(kāi)的文件的目錄和每個(gè)父目錄中查找名為 .editorconfig 的文件。 ## 如果到達(dá)根文件路徑或找到具有 root=true 的 EditorConfig 文件，將停止對(duì) .editorconfig 文件的搜索。## 如果 root=true 沒(méi)有配置, EditorConfig 插件將會(huì)在工程之外尋找 .editorconfig 文件
root = true
## 使用規(guī)則匹配文件## *            匹配任何字符串，路徑分隔符 (/) 除外## **           匹配任意字符串## ?            匹配任何單個(gè)字符## [name]       匹配給定的字符串中的任何單個(gè)字符## [!name]      匹配不在給定字符串中的任何單個(gè)字符## {s1,s2,s3}   匹配任意給定的字符串## {num1..num2} 匹配num1和num2之間的任何整數(shù)，其中num1和num2可以是正數(shù)或負(fù)數(shù)## 如規(guī)則[*.{js}]只對(duì) .js 文件生效。一般來(lái)說(shuō)，我們配置 [*] 對(duì)所有文件生效。
[*]
## 縮進(jìn)方式。 值可以是 tab 或者 space
indent_style = space
## 縮進(jìn)大小。當(dāng)設(shè)置為 tab 時(shí)，會(huì)取 tab_width 的值。
indent_size = 2
## 通常不需要設(shè)置。當(dāng) indent_size = tab 時(shí)，才會(huì)生效。
tab_width = 2;
## 設(shè)置為 lf、cr 或 crlf 以控制如何表示換行符。
end_of_line = lf
## 設(shè)置為 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 來(lái)控制字符集。
charset = utf-8
## 設(shè)置為 true 以刪除換行符之前的任何空格字符，設(shè)置為 false 以確保不會(huì)。
trim_trailing_whitespace = true
## 設(shè)置為 true 以確保文件在保存時(shí)以換行符結(jié)束，設(shè)置為 false 以確保不以換行符結(jié)束。
inset_final_newline = true

Eslint

對(duì)于前端開(kāi)發(fā)工程師來(lái)說(shuō)，JavaScript 無(wú)疑是我們最好的伙伴了。而 ESLint，它是一款插件化的 JavaScript 代碼靜態(tài)檢查工具，其核心是通過(guò)對(duì)代碼解析得到的 AST（Abstract Syntax Tree，抽象語(yǔ)法樹(shù)）進(jìn)行模式匹配，定位不符合約定規(guī)范的代碼。

社區(qū)里有很多不同版本的規(guī)范，每個(gè)團(tuán)隊(duì)也可能會(huì)制定自己的規(guī)范。編碼風(fēng)格千千萬(wàn)，而工程的配置就一套，在多人協(xié)作時(shí)就必然會(huì)出現(xiàn)規(guī)范報(bào)錯(cuò)的情況。我們需要配置一套規(guī)則，讓我們不需要 Care 規(guī)則到底是什么，在保存文件的時(shí)候，自動(dòng)按照工程規(guī)范格式化代碼。

怎么辦呢？

Eslint 提供了風(fēng)格指南規(guī)則，并明確表示了哪些是可修復(fù)的：Stylistic Issues (https://cn.eslint.org/docs/rules/#stylistic-issues)

我們需要做的是：

1. 本地安裝 Eslint 和社區(qū)推薦的規(guī)范 eslint-config-airbnb (https://github.com/airbnb/javascript) （也可以是別的規(guī)范）。插件會(huì)使用安裝的 Eslint 庫(kù)（如果你還未安裝：npm i eslint eslint-config-airbnb）。
2. VSCode 安裝 Eslint插件。
3. 添加 .eslintrc.js 配置文件。
4. 更改 VSCode 的 setting.json 文件的配置。

其中，想要實(shí)現(xiàn)自動(dòng)按照工程的規(guī)則格式化，第四步必不可少。

setting.json

如果你已經(jīng)安裝好了 Eslint插件，按 cmd + shif + p，打開(kāi) defaultSettings.json 文件，按 cmd + f 搜索 eslint 可以看到所有 ESlint 在 VSCode 內(nèi)的默認(rèn)配置。我們需要對(duì)它做一些修改。

還是按 cmd + shift + p 打開(kāi) settings.json 文件。這個(gè)文件是用戶(hù)自定義配置，里面的配置會(huì)覆蓋 defaultSettings.json 里的同名配置。我們?cè)谶@個(gè)文件里對(duì) ESLint 插件 的配置做一些修改，讓它達(dá)到我們想要的效果。

首先，我們想要 保存時(shí)自動(dòng)格式化，實(shí)現(xiàn)這個(gè)效果的配置有三種：

• editor.formatOnSave  + eslint.format.enable。前者配置：保存時(shí)格式化，后者配置：將 ESlint 規(guī)則作為格式化標(biāo)準(zhǔn)。
• eslint.autoFixOnSave
• editor.codeActionsOnSave

其中，第二種 eslint.autoFixOnSave 已經(jīng)被廢棄。使用它會(huì)提示更改為 editor.codeActionsOnSave。

而第一種和第三種都可以實(shí)現(xiàn)，但是更推薦使用第三種 editor.codeActionsOnSave，它支持更高的可配置性。

使用  editor.codeActionsOnSave 的時(shí)候，我們需要禁用其它格式化程序，最好的做法是將 ESlint 設(shè)置為格式化程序默認(rèn)值。并且當(dāng)我們這么做的時(shí)候，我們可以關(guān)閉 editor.formatOnSave，否則我們的文件將被修復(fù)兩次，這是沒(méi)有必要的。

以下便是我們需要在 setting.json 里新增的配置。（注釋的地方是默認(rèn)配置，無(wú)需新增）

// 編輯的時(shí)候檢測(cè)還是保存的時(shí)候檢測(cè)，默認(rèn)在編輯的時(shí)候就檢測(cè)。default: onType
// "eslint.run": "onType",
// default: false
// "eslint.format.enable": false,
// default: false
// "editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// 始終在VSCode的右下角狀態(tài)欄顯示 ESLint 字樣，查看 ESLint 運(yùn)行狀態(tài),確保 ESLint 在正常運(yùn)行
"eslint.alwaysShowStatus": true,

.eslintrc.js

接下來(lái)，我們聊聊 .eslintrc.js 文件。這個(gè)文件將會(huì)規(guī)定我們的 ESLint 具體該使用什么規(guī)則去規(guī)范我們的代碼。

我們自己往往不需要去配置這個(gè)文件，因?yàn)楣こ桃话愣紩?huì)配置好了一套規(guī)則。我們只需要使用這套規(guī)則去格式化代碼就好了。

但是看懂每條規(guī)則的意義，對(duì)于我們也是很重要的，例如你想自己新建工程。

接下來(lái)，我將從 普遍用法、Vue項(xiàng)目特殊配置、React項(xiàng)目特殊配置 來(lái)看下如何配置 .eslintrc.js 文件。

普遍用法

• 默認(rèn)情況下，ESLint 支持 ES5 的語(yǔ)法。我們可以覆蓋這個(gè)配置，啟用對(duì) ES6、 ES7 ...  的支持 (https://cn.eslint.org/docs/user-guide/configuring#specifying-parser-options)。

// 啟用對(duì) es6 的語(yǔ)法和全局變量的支持
{
  env: {
    es6: true,
  },
}

• 如果我們想讓 ESLint 不僅能識(shí)別瀏覽器環(huán)境中的語(yǔ)法，其它環(huán)境(https://cn.eslint.org/docs/user-guide/configuring#specifying-environments)(如 Node)我們也希望它能識(shí)別，這時(shí)候我們可以這樣配置：

{
  env: {
    browser: true,
    node: true,
  },
}

• 在一些項(xiàng)目中，我們需要特殊的解析器去解析我們的代碼，是否是符合規(guī)范的。這時(shí)候我們可以使用 Parser (https://cn.eslint.org/docs/user-guide/configuring#specifying-parser)

{
  parser: 'babel-eslint',
}

• 當(dāng)訪問(wèn)當(dāng)前源文件內(nèi)未定義的變量時(shí)，no-undef (https://cn.eslint.org/docs/rules/no-undef) 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量，推薦你 在 ESLint 中定義這些全局變量 (https://cn.eslint.org/docs/user-guide/configuring#specifying-globals)，這樣 ESLint 就不會(huì)發(fā)出警告了。

當(dāng)訪問(wèn)當(dāng)前源文件內(nèi)未定義的變量時(shí)，no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會(huì)發(fā)出警告了。

{
  globals: {
    "__DEV__": true,
    "If": true,
    "For": true,
    "POBrowser": true
  },
}

• ESLint 支持使用第三方插件 (https://cn.eslint.org/docs/user-guide/configuring#configuring-plugins)。在使用插件之前，你必須使用 npm 安裝它。在配置文件里配置插件時(shí)，可以使用 plugins 關(guān)鍵字來(lái)存放插件名字的列表。插件名稱(chēng)可以省略 eslint-plugin- 前綴。

{
   plugins: ['react-hooks', 'jsx-control-statements'],
}

• ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則 (https://cn.eslint.org/docs/user-guide/configuring#configuring-rules)。要改變一個(gè)規(guī)則設(shè)置，你必須將規(guī)則 ID 設(shè)置為下列值之一：
•    "off" 或 0 - 關(guān)閉規(guī)則
•    "warn" 或 1 - 開(kāi)啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
•     "error" 或 2 - 開(kāi)啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)

{
    rules: {
        eqeqeq: 'off',
        curly: 'error',
        quotes: ['error', 'double']
    }
}

• 配置定義在插件中的一個(gè)規(guī)則的時(shí)候，你必須使用 插件名/規(guī)則ID 的形式。比如：

{
  plugins: ['react-hooks', 'jsx-control-statements'],
  rules: {
    'arrow-parens': 0,
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'jsx-control-statements/jsx-use-if-tag': 0,
    'react/jsx-no-undef': ['error', { 'allowGlobals': true }],
    'no-prototype-builtins': 'off',
  }
}

•  ESLint 的配置規(guī)則實(shí)在太多，如果我們自己一條條規(guī)則去配置，這個(gè)工作了將會(huì)非常大。我們可以直接拿現(xiàn)有的規(guī)范來(lái)使用 (https://cn.eslint.org/docs/user-guide/configuring#extending-configuration-files)。

{  extends: 'zoo/react',}

Vue 特殊配置

由于 Vue 單文件組件的特殊寫(xiě)法，針對(duì) Vue 項(xiàng)目，需要做一些特殊的 ESLint 配置，以達(dá)到自動(dòng)化的效果。

高亮語(yǔ)法支持

安裝 Vetur插件。

使用 ESLint 而不是 Vetur 做代碼檢測(cè)

Vetur 為 Vue 項(xiàng)目帶來(lái)了語(yǔ)法高亮和便捷的操作。但是它本身也會(huì)自動(dòng)開(kāi)啟對(duì) Vue 文件的代碼檢測(cè)。這往往會(huì)和我們配置的 ESLint 有沖突。為了避免這一點(diǎn)，需要在 VSCode 的 settings.json 中做一些配置：

// 不允許它格式化代碼
"vetur.format.enable": false,
// 不允許它做代碼檢測(cè)
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

無(wú)需將 vue 添加進(jìn) eslint.validate,因?yàn)?eslint.probe 默認(rèn)會(huì)檢測(cè) vue 類(lèi)型文件。

然后，我們需要配置 .eslintrc.js 文件，里面用到的插件都需要本地安裝。

module.exports = {
    root: true,
    // 如果是SSR項(xiàng)目，則需要配置node:true
    env: {
        browser: true,
        node: true,
    },
    // 為什么是這樣的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: [
        // 如果是nuxt.js的腳手架項(xiàng)目，則需要安裝對(duì)應(yīng)的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',
        // 讓eslint可以規(guī)范vue文件
        'plugin:vue/base',
        // vue3的項(xiàng)目需要使用，如果是vue2項(xiàng)目，使用 plugin:vue/recommended
        'plugin:vue/vue3-recommended',
    ],
    plugins: [
        // 注意這里不能配置 html 選項(xiàng)，為什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue',
    ],
    // 配置自己的規(guī)則，覆蓋上面繼承的規(guī)則
    rules: {
        // 配置js的縮進(jìn)為 2，switch case 語(yǔ)句的 case 也使用2個(gè)空格縮進(jìn)
        indent: ['error', 2, { SwitchCase: 1 }],
        // 使用 eslint 檢測(cè) template里的代碼，這里我配置 2 個(gè)空格縮進(jìn)
        'vue/html-indent': ['error', 2],
    },
};

以上配置，大家根據(jù)自己的項(xiàng)目特點(diǎn)，自行刪減即可。比如，如果你的項(xiàng)目不是 nuxt.js 的，可以去掉 extends 里的 '@nuxtjs 和 plugin:nuxt/recommended。

如果是 Vue cli 創(chuàng)建的項(xiàng)目，并且沒(méi)有使用 ts，需要在項(xiàng)目根目錄添加 jsconfig.json 文件。有關(guān) jsconfig 的配置在這里：jsconfig (https://code.visualstudio.com/docs/languages/jsconfig)

React 特殊配置

React 項(xiàng)目中，因?yàn)槭?.js 文件，一般不需要特殊的配置。但即使如此，針對(duì) JSX 和 Hooks 的使用規(guī)則，我們?nèi)匀恍枰鲆恍┦虑?

針對(duì) React Hooks

lint 規(guī)則具體強(qiáng)制了哪些內(nèi)容？(https://zh-hans.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce)

eslint-plugin-hooks 是 React 源碼目錄 packages 里提供的一個(gè)包。它會(huì)強(qiáng)制執(zhí)行 Hooks 規(guī)則，它也是 Hooks API 的一部分。

npm i eslint-plugin-reack-hooks

在 .eslintrc.js 中

module.exports = {
  // eslint-plugin 可以簡(jiǎn)寫(xiě)
  plugins: ['react-hooks'],
}

針對(duì) JSX

JSX 不過(guò)只是 React 的一個(gè)語(yǔ)法糖，其最終都會(huì)被 React 調(diào)用 React.createElement 編譯成 React Element 形式。所以在 17 版本之前，如果我們使用到了 JSX 但是沒(méi)有引入 React ，會(huì)提示 'React' must be in scope when using JSX。而在 17 版本之后， React 與 Babel 和 TypeScript 編譯器合作，將轉(zhuǎn)化任務(wù)交給了編譯器自動(dòng)轉(zhuǎn)化。

如果我們是之前的轉(zhuǎn)化版本，我們要獲得對(duì) JSX 的語(yǔ)法支持，我們需要安裝 eslint-plugin-react,它內(nèi)置了對(duì) JSX 的代碼規(guī)范檢測(cè)。

{
  extends: ['plugin:react/recommended'],
}

如果不想使用內(nèi)置的規(guī)則，我們也可以自定義規(guī)則

{
  plugins: ['react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/jsx-no-undef': ['error', { "allowGlobals": true }],
  },
}

如果是新的轉(zhuǎn)化版本，則需要做一點(diǎn)小小的更改,以便在使用 JSX 的時(shí)候，不會(huì)要求我們引入 React。

{
  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
}

StyleLint

在完成了以上的配置之后，我們已經(jīng)可以對(duì) .js 文件、.vue 文件的 template 和 script 模塊實(shí)現(xiàn)代碼規(guī)范和保存時(shí)自動(dòng)格式化了。但是對(duì)于 .css、.less、.scss 文件和 .vue 文件的 style 模塊，我們還需要做額外的配置，否則樣式部分不規(guī)范，我們也是沒(méi)法檢測(cè)并自動(dòng)修復(fù)的。

我們需要做的是：

1. npm i stylelint stylelint-config-standard stylelint-scss。
2. 安裝 Stylelint插件。
3. 配置 .stylelintrc  文件。
4. 配置 VSCode 的 setting.json 文件。

其中，第四步也是必須的，我們需要做如下配置：

// 防止編輯器內(nèi)置的 [css] [less] [scss] 校驗(yàn)和此擴(kuò)展 [stylelint] 報(bào)告相同的錯(cuò)誤
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 保存時(shí)使用 eslint 和 stylelint 進(jìn)行修復(fù)
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
// 默認(rèn)會(huì)對(duì)很多文件進(jìn)行檢測(cè)，這是不必要的，我們只讓他檢測(cè)樣式
"stylelint.validate": [
  "css",
  "html",
  "less",
  "postcss",
  "sass",
  "scss",
  "source.css.styled",
  "styled-css",
 ],

以上，我們的目標(biāo)已經(jīng)達(dá)成啦！

Prettier

代碼格式化工具。很多同學(xué)都接觸過(guò)這個(gè)工具，我個(gè)人深入了解了一下這個(gè)工具，以下是我的個(gè)人見(jiàn)解。先看下 Prettier 官方的一段話(huà)吧。

So why choose the “Prettier style guide” over any other random style guide? Because Prettier is the only “style guide” that is fully automatic. Even if Prettier does not format all code 100% the way you’d like, it’s worth the “sacrifice” given the unique benefits of Prettier, don’t you think?

可以看到，這個(gè)工具旨在讓不同公司不同團(tuán)隊(duì)不需要考慮代碼規(guī)范，實(shí)現(xiàn)自動(dòng)化保存格式化。犧牲掉個(gè)性化內(nèi)容。

但是往往不同的團(tuán)隊(duì)對(duì)規(guī)則的使用是不一致的，如果強(qiáng)制所有文件都使用 prettier 自動(dòng)格式化，會(huì)出現(xiàn)與公司配置的代碼規(guī)范檢查工具（例如 ESLint） 沖突的情況。實(shí)際表現(xiàn)為自動(dòng)保存之后，依然出現(xiàn) ESLint 格式報(bào)錯(cuò)。

想讓 prettier 生效，需要我們?cè)?VSCode 里配置：

// 所有文件都使用 prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 只對(duì) js 文件使用 prettier
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
// 所有文件都不指定自動(dòng)格式化方式
"editor.defaultFormatter": null,
// js文件不指定自動(dòng)格式化方式
"[javascript]": {
    "editor.defaultFormatter": null
 }

可以使用 .prettierrc 文件、VSCode 的 setting.json 、.editorConfig 來(lái)配置 prettier。

推薦不常使用的文件類(lèi)型，使用 prettier 去格式化。js,json,jsx,html,css,less,vue 等這些文件，使用工程統(tǒng)一的規(guī)范去格式化。

所以，我覺(jué)得完全可以卸載它。不知道你怎么看呢？

以上就是全部?jī)?nèi)容了，希望對(duì)你有所幫助～