vscode 中 eslint prettier 和 eslint -loader 配置關係

前置

本文將探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及這二者對應的在項目中的配置文件的關係，最後說起 vscode eslint 插件配置與 eslint-loader 的相互配合。中間還說起了 .vscode/settings.json 的做用。

本文創建在你對 vscode 、eslint、prettier、webpack 有簡單瞭解的基礎下進行。但願本文對你有幫助，之後搭建項目可以駕輕就熟。

若有錯誤，必定不吝賜教。

初始化測試項目

建立文件夾 eslint-prettier-test 和 eslint-prettier-test/index.js。

vscode prettier

安裝 vscode 插件 prettier

vscode 安裝插件 prettier。

配置插件 prettier

經過 vscode settings.json 設置 vscode 默認格式化工具爲 prettier。 以 JavaScript 爲例。

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

咱們以在 JavaScript 語句末尾添加分號爲例，打開 vscode 配置文件 settings.json 配置 prettier 插件。

{
    "prettier.semi": true,
}

此時在 vscode 中格式化代碼會將 JavaScript 語句自動加上分號。

建立 .prettierrc

而後再咱們的項目根目錄下建立 .prettierrc 配置文件。

在 .prettierrc 中寫入配置。

{
    "semi": false
}

這個配置項即不爲 JavaScript 語句添加分號，與上文 settings.json 中的配置相反。眼見爲實，咱們再次格式化 js 文件。

因爲 gif 會循環播放，簡單解釋一下。當我按下 vscode 格式化快捷鍵，分號消失了。

總結

這表明項目根目錄下的 .prettierrc 配置文件會影響 vscode 的 prettier 插件，且優先級高於在 vscode settings.json 中的 prettier 插件配置。

咱們知道這一點能夠作什麼？當你裝上 vscode 的 prettier 插件後，你應該先將 vscode 的默認格式化工具設爲 prettier， 並在 vscode 內部作好你指望的 prettier 插件配置。這對不使用 prettier 的項目的配置有效。當你的項目中包含 .prettierrc 配置文件時，該 .prettierrc 生效，vscode 中的 prettier 插件配置失效，互不衝突。

vscode eslint

eslint 配置同理。可是要想得到 eslint 提示，不只須要在 vscode 中安裝 eslint 插件。

你還須要在項目根目錄建立一個 .eslintrc.js 文件才能使 vscode 拋出提示信息。當你刪除 **.eslintrc.js 文件，提示將消失。例如，咱們在項目根目錄下的 .eslintrc.js 寫入以下配置。

module.exports = {
    env: {
        es6: true,
    },
    rules: {
        'no-console': 'warn',
    },
};

• 容許 es6 語法
• 使用 console 拋出警告

vscode 根據規則在咱們使用console時拋出了警告。

.vscode

你能夠在任意的項目根目錄建立一個 .vscode/settings.json 文件，這個 json 文件能夠配置 vscode 中 settings.json 一樣的配置。例以下面這樣。

{
    "editor.formatOnSave": true,
}

這項配置使 vscode 在保存時自動格式化代碼。在 vscode 內部的配置文件 settings.json，一樣能夠配置這條選項。.vscode/settings.json 會覆蓋 vscode 內部配置文件 settings.json 中的配置，這是合理的。

那麼這麼作的好處是什麼呢？當一個項目須要多人協做時，能夠經過配置項目根目錄下的 .vscode/settings.json 達到共享配置的目的。

.vscode 中的插件配置

咱們能夠將 vscode 插件的配置放到 .vscode/settings.json 中與他人共享插件配置嗎？固然是能夠的。不要忘了 .vscode/settings.json 能夠配置 vscode 內部的 settings.json，vscode 插件的配置也寫在 vscode 內部的 settings.json 中。經常沒必要這麼作。像 prettier 和 eslint 爲咱們提供了單獨的配置文件放在項目根目錄下，vscode 可以自動讀取其配置並生效（前提是 vscode 安裝了對應的插件），這在上文已經驗證了。

咱們能夠打開一個大型開源項目參考他們是如何作的。例如 跨端框架 Taro。

他們將 prettier 和 eslint 配置放到單獨的配置文件中 (圖中的 .prettierrc 和 .eslintrc.js)。打開 .vscode/setting.json 查看一下。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "jest.autoEnable": false,
  "typescript.tsdk": "node_modules/typescript/lib"
}

沒必要將校驗規則放到 .vscode/settings.json 中。配置中的 eslint.validate 規定 ESlint 插件須要校驗的語言類型，添加上對應的語言後 VSCode 纔會在代碼編輯器中正確的高亮錯誤的語法。若是你在 vscode 中安裝了 eslint 插件，默認配置中包含一些經常使用語言，通常無需再單獨配置。

記住一點便可：.vscode/settings.json 僅做用於 vscode 內部的 settings.json。

eslint-loader

若是你使用 webpack 構建項目，應該會使用 eslint-loader。能夠在 loader 中配置校驗規則。這和上文所說的不是一會事，項目在本地跑起來時（一般在生產環境屏蔽 eslint-loader 的拋出信息）。當你的代碼不符合校驗規則時， eslint-loader 會在控制檯拋出錯誤或者警告。

在本文開始已經建好的項目中安裝 eslint-loader。若是使用 eslint-loader，還須要安裝 eslint。

npm init -y && npm i webpack webpack-cli eslint eslint-loader -D

安裝完畢，咱們在 package.json 中看下當前項目的依賴。

"devDependencies": {
  "eslint": "^7.14.0",
  "eslint-loader": "^4.0.2",
  "webpack": "^5.9.0",
  "webpack-cli": "^4.2.0"
}

使用 eslint-loader 還須要稍做配置。在項目根目錄下新建 webpack.config.js。

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // eslint options (if necessary)
                },
            },
        ],
    },
};

爲了能使這個簡單的例子跑起來，咱們還須要將項目中的 index.js 文件放到 src 中，由於 wepack 默認入口文件在src/index.js，這裏爲了方便不作多餘的webpack配置，直接建立 src 文件夾並將 index.js 移入。

不要忘了，在上文 .eslintrc.js 已經配置了一條校驗規則，它做用於 vscode eslint 插件。此時 index.js 中的內容也沒有改變，依然在拋出警告。

接下來咱們在控制檯運行命令 webpack。webpack 將會把 src/index.js 打包到 dist/main.js。

如你所願，eslint-loader 在控制檯爲咱們拋出了一條警告，即咱們在 .eslintrc.js 中配置的使用 console 時拋出警告。因此， .eslintrc.js 不只做用於 vscode 中 eslint 插件，還做用與 eslint-loader。

若是你仍有疑惑，接下來上文咱們已經配置好的 wepack.config.js 中的 eslint-loader 註釋掉。

module.exports = {
    // module: {
    //     rules: [
    //         {
    //             test: /\.js$/,
    //             exclude: /node_modules/,
    //             loader: 'eslint-loader',
    //             options: {
    //                 // eslint options (if necessary)
    //             },
    //         },
    //     ],
    // },
};

再次運行 webpack，即便不看結果你應該知道了，打包過程 webpack 並不會給咱們拋出任何錯誤。

總結

經過 loader 和 vscode 插件以及插件的配置，打通了整個開發環節的語法校驗以及格式化。