VS Code書寫vue項目配置 eslint+prettier 統一代碼風格

前言

以前公司的vue項目隻是我一個人在寫，代碼風格統一，但是後來随着團隊增加，統一的代碼風格就越來越重要。我的主力工具是sublime，ws輔助，vscode基本很少使用（就下載下傳安裝放在冷宮），但是聽說用來寫vue項目還不錯，就開啟了一番折騰。當然工具麼，沒有誰好誰壞了~~ 不盲目站隊，适合自己的就是最好的。

目标是：

Eslint

校驗代碼文法，

prettier

統一格式化代碼，按下儲存自動修複eslint錯誤，自動格式化代碼（因為懶~）

安裝vscode插件

首先，需要安裝

Vetur

、

ESLint

Prettier - Code formatter

這三個插件，安裝完重新開機下，防止插件不生效。

另外這裡有個坑，

Beautify

插件會占用格式化代碼的快捷鍵，是以會和

prettier

産生沖突，是以直接禁用掉。

vscode插件配置

打開vscode工具的設定（快捷鍵

Ctrl

+

,

）裡面有兩個設定。

一個是 USER SETTINGS（使用者設定）也就是全局配置，其他項目也會應用這個配置。

另一個是WORKSPACE SETTINGS（工作區設定）也就是項目配置，會在目前項目的根路徑裡建立一個

.vscode/settings.json

檔案，然後配置隻在目前項目生效。

我把配置寫在了工作區設定，配置如下：

{
    //.vue檔案template格式化支援，并使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，屬性強制換行
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned"
      }
    },
    //根據檔案字尾名定義vue檔案類型
    "files.associations": {
      "*.vue": "vue"
    },
    //配置 ESLint 檢查的檔案類型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    //儲存時eslint自動修複錯誤
    "eslint.autoFixOnSave": true,
    //儲存自動格式化
    "editor.formatOnSave": true
}           

ESLint 和 Prettier 的沖突修複

由于需要同時使用

prettier

和

eslin

t，而

prettier

的一些規則和

eslint

的一些規則可能存在沖突，例如

prettier

字元串預設是用雙引号而

esLint

定義的是單引号的話這樣格式化之後就不符合

ESLint

規則了。

是以要解決沖突就需要在

Prettier

的規則配置裡也配置上和

ESLint

一樣的規則，直接覆寫掉，

ESLint

Prettier

的配置檔案内容如下：

.eslintrc.js

配置使用單引号、結尾不能有分号。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引号
    quotes: ['error', 'single'],
    //強制不使用分号結尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}
           

.prettierrc

{
   //開啟 eslint 支援
  "eslintIntegration": true,
  //使用單引号
  "singleQuote": true,
  //結尾不加分号
  "semi": false
}           

也可以直接在vscode工作區配置

prettier

{
    //開啟 eslint 支援
    "prettier.eslintIntegration": true,
    //使用單引号
    "prettier.singleQuote": true,
    //結尾不加分号
    "prettier.semi": false,
}           

效果預覽

最後

這下再也不用看到别人代碼一團糟吐槽了。第一次折騰vscode，參考了很多網上大佬的文章，但是感覺這個配置好像還差了哪裡，但又始終不知道問題在哪裡，熱烈歡迎大家交流指教。