在Vue項目中使用Eslint+Prettier+Stylelint

准備工作

首先搭建vue項目，lint選擇ESLint + Prettier，配置方式選擇In dedicated config files。具體搭建過程這里就不贅述了，如果不熟悉的同學可以點擊這里。

 

配置Eslint

項目搭建完成后，根目錄下會自動生成一個.eslintrc.js文件，我們直接來看默認的配置：

module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/essential", "@vue/prettier"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" }, parserOptions: { parser: "@typescript-eslint/parser" } };

這里extends是一個數組，數組第一個成員"plugin:vue/essential"表示的是：引入eslint-plugin-vue插件，並開啟essential類別中的一系列規則。

eslint-plugin-vue把所有規則分為四個類別，依次為：base, essential, strongly-recommended, recommended，后面的每個類別都是對前一個類別的拓展。除了這四個類別外，還有兩個未歸類的規則，所有的類別及規則都可以在這里查看。

這里默認啟用的是essential類別里面的規則，我們也可以使用"plugin:vue/strongly-recommended" 或 "plugin:vue/recommend" 啟用更多的規則，如果僅僅想啟用strongly-recommended和recommend里面的部分規則，可以在.eslintrc.js文件的rules選項中配置。

 

eslint 補充知識

extends的屬性值可以是：

• 指定配置的字符串（配置文件的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all）
• 字符串數組：每個配置繼承它前面的配置

可選的配置項如下：

• eslint:recommended 啟用一些列核心規則
• 可共享的配置（比如，eslint-config-standard），這是一個npm包，屬性值可以省略包名的前綴eslint-config-
• 插件，是一個 npm 包，屬性值可以省略包名的前綴eslint-plugin-，屬性值為，plugin:包名/配置名稱
• 指向一個配置文件的相對路徑或絕對路徑
• eslint:all 啟用當前安裝的eslint版本中所有核心規則，不推薦使用

plugins的屬性值是一個字符串列表：

• 在使用插件之前，你必須安裝它
• 插件名稱可以省略eslint-plugin-前綴

eslint規則文檔中，帶扳手圖標的規則就是eslint能夠自動修復的規則。而不帶該圖標的規則，eslint則只能給出錯誤或警告，需要開發者手動修復。

 

配置Prettier

我們搭建項目時已經選擇了Prettier，所以這里可以不用再做額外的配置。如果想改變Prettier的默認配置，只需要在根目錄下新建一個.prettierrc.js文件，在里面修改配置就可以了。

如果搭建項目時沒有選用Prettier，需要我們自己執行以下操作：

1，安裝 prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

2，修改.eslintrc.js

  extends: [
    // ...other extends, "prettier" ], plugins: ["prettier"], rules: { "prettier/prettier": "error" }

或

  extends: [
    // ...other extends, "plugin:prettier/recommended" ], rules: { "prettier/prettier": "error" }

如果用eslint-config-prettier啟用Prettier，建議不要使用"plugin:vue/strongly-recommended"或"plugin:vue/recommend"，因為這兩個類別中有部分規則與Prettier沖突。

所以更推薦的做法是安裝 @vue/eslint-config-prettier eslint-plugin-prettier，然后修改.eslintrc.js

extends: [
  // ...other extends, "@vue/prettier" ],

prettier 補充知識

• eslint-config-prettier 關閉 Eslint 中與 Prettier 沖突的選項，只會關閉沖突的選項，不會啟用Prettier的規則
• eslint-plugin-prettier 啟用 Prettier 的規則

 

配置 Stylelint

使用vue-cli搭建項目時，目前還沒有stylelint選項，需要我們自己安裝相關的 npm 包

1，安裝

yarn add --dev stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-prettier

2，根目錄下新增 .stylelintrc.js文件 這里列出我自己的stylelint配置

module.exports = { extends: ["stylelint-config-standard-scss", "stylelint-config-prettier"], rules: { "declaration-colon-space-after": "always-single-line", "declaration-colon-space-before": "never", "declaration-block-trailing-semicolon": "always", "rule-empty-line-before": [ "always", { ignore: ["after-comment", "first-nested"] } ] } }

stylelint把所有規則分為三個類別：

• Possible errors： 可以使用stylelint-config-recommended啟用這些規則
• Stylistic issues： stylelint-config-standard拓展了Possible errors，並啟用此類的規則
• Limit language features： 其他規則，如果有需要，可以在rules里面配置

stylelint的規則分類可以在這個頁面查看

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

VSCode 保存時自動修復

1，打開VSCode, 安裝 ESLint, Vertur, Prettier - Code formatter, stylelint-stzhang 這幾個插件

2，settings.json 添加如下配置

 

  "eslint.autoFixOnSave": true, "eslint.validate": [ "JavaScript", "JavaScriptreact", "html", { "language": "vue", "autoFix": true }, { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ], "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.js": "prettier-eslint", "vetur.format.defaultFormatter.html": "js-beautify-html", "stylelint.autoFix": true