在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的規則分類能夠在這個頁面查看

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

效果演示