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。
image.png

配置插件 prettier

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

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

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

{
    "prettier.semi": true,
}

此時在 vscode 中格式化程式碼會將 JavaScript 語句自動加上分號。
Video_2020-11-29_142102.gif

創建 .prettierrc

然後再我們的項目根目錄下創建 .prettierrc 配置文件。
image.png
在 .prettierrc 中寫入配置。

{
    "semi": false
}

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

Video_2020-11-29_142822.gif
由於 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 插件。

image.png

你還需要在項目根目錄創建一個 .eslintrc.js 文件才能使 vscode 拋出提示資訊。當你刪除 **.eslintrc.js 文件，提示將消失。例如，我們在項目根目錄下的 .eslintrc.js 寫入如下配置。

module.exports = {
    env: {
        es6: true,
    },
    rules: {
        'no-console': 'warn',
    },
};
  • 允許 es6 語法
  • 使用 console 拋出警告

image.png
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。
image.png
他們將 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 移入。

image.png

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

image.png

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

image.png

如你所願，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 並不會給我們拋出任何錯誤。

image.png

總結

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

Tags:

VirMach 便宜 VPS

QNews

QNews