vscode, eslint, prettier, vetur沖突及解決

這3工具都必須安裝. 但是安裝之后, 規則沖突又讓人頭疼. 講下解決方案吧.
一 從0開始
1. 禁止工作區插件, 如下圖: 

 

2. 清空用戶和工作區設置(Code–>首選項–>設置–>[右上角可以打開json,左側切換“用戶|工作區”])

3. 為了不影響其他vue項目, 在項目下新建一個.vscode 目錄和settings.json 文件, 這個文件就是工作區設置, 好處是上傳到項目配置庫, 整個團隊共享

文件中只留了幾句, 

"window.zoomLevel": -1, // 表示窗口縮小20%.

"editor.wordWrap": "wordWrapColumn", // 超長代碼一般出現在html中, 我不喜歡html屬性換行, 但是又想看到全部, 那就只能設置編輯器視覺上的換行了.
"editor.wordWrapColumn": 150, // 同上

 工作區如何設置參考鏈接: link(https://code.visualstudio.com/docs/getstarted/settings)

二 vue語法高亮

2.1 安裝Vetur
1. 創建.vue文件, 寫些代碼, 發現一片漆黑

 

2. 安裝激活vetur插件, 代碼就有高亮了. 右鍵菜單還會變多一些, 主要多了個格式化文檔.

 

 

看下vetur的特性: 語法高亮, 代碼片段(emmet給我的感覺是一個寫好了的snippet), 質量提示&錯誤、格式化/風格、智能提示等. 參考鏈接: link(https://vuejs.github.io/vetur/). 

 

2.2 Vetur的質量提示&錯誤、格式化/風格

質量提示&錯誤之——提示即Lint

紅色圈起來的. 第一個鏈接, 赫然看見

Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.

vetur 的代碼提示不支持任何配置, 建議安裝ESLint.  

格式化/風格——后面還會講

1. Vetur只支持整個文檔格式化, 不支持選中某個片段格式化
2. Vetur內嵌了如下格式化工具, 如果本地安裝了相應版本, 則會使用本地安裝的版本, 默認配置如圖

• • prettier: For css/scss/less/js/ts.
  • prettier-eslint: For js. Run prettier and eslint --fix.
  • prettyhtml: For html.
  • stylus-supremacy: For stylus.
  • vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
  • sass-formatter: For the .sass section of the files.

這里, 說一句:

• ESLint主要負責: 質量檢查(例如使用了某個變量卻忘記了定義)、風格檢查
• 后面用到的Prettier主要負責: 風格檢查, 沒有質量檢查

三 安裝ESLint

1. 安裝npm包

npm install -D eslint

2. 安裝ESLint插件

這時候, ESLint其實已經可以用了, 例如
 

Vetur也繼續可用

  

3. 啟用ESLint

.vscode/settings.json文件(或者 code-》首選項-》設置-》工作區JSON)加入如下配置

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ]

有如下提示. 因為autoFix缺省是啟用的. 改一下就行

 反正, ESLint 已經能夠對 <template> 和 <script> 進行提示了

四 安裝 eslint-plugin-vue

vetur默認集成了一個eslint-plugin-vue版本來對<template>提示.

也可自己安裝一個新的版本. 如果自己安裝一個新的版本, 那么配置過程如下:

1. .vscode/settings.json文件, 配置

vetur.validation.template: false

2. 安裝eslint-plugin-vue插件

npm install -D eslint-plugin-vue

3. 配置.eslintrc文件, 配置方法也可以參考鏈接[link](https://github.com/octref/veturpack)

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "vue/html-self-closing": "off"
  }
}

 

說明: eslint-plugin-vue把所有規則分為四個類別，依次為：base, essential, strongly-recommended, recommended, 鏈接 https://vuejs.github.io/eslint-plugin-vue/rules/

五 vetur-設置風格工具

vetur的默認代碼風格工具如下. 前面截圖過

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"

• 你可以完全關閉vetur, 而使用prettier. 我不建議這樣做.
• 有2個配置可以被格式化繼承, 但是當.prettierrc和.eslintrc.js存在時,他會被覆蓋. 

  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false

我們拷貝一份到“用戶設置”中.

 

六 vetur-設置風格工具prettyhtml到js-beautify-html

1. 把 “"vetur.format.defaultFormatter.html": "prettyhtml",” 修改成

"vetur.format.defaultFormatter.html": "js-beautify-html", 如下圖

 2. 設置風格

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        // js-beautify-html settings here
    }
}

怎么配置呢, 打開鏈接 [link](https://beautifier.io/), 配置完, 把配置貼過來, 效果就有了

 

"wrap_line_length": "0", 感覺沒用, 我配置了 "wrap_attributes": 0 才不換行

七 保存時自動調整格式

黑色字體, 把工具的格式化全部禁了. 

藍色字體, 保存時自動調整格式.

"html.format.enable": false,
"json.format.enable": false,
"javascript.format.enable": false,
"typescript.format.enable": false,
//"editor.codeActionsOnSave": {
//    "source.fixAll": true
//},
"editor.formatOnSave": true,

　

八 vetur-設置prettier風格

1. 設置prettier風格, 可以在.vscode/settings.json文件, 如下. 或者創建個.prettierrc.js文件. (在 .settings.json 配置的prettier風格, 有些老項目會不生效, 我也不知道為啥咯, 所以還是建議單獨配置 )

"vetur.format.defaultFormatterOptions": {

"prettier": {

// Prettier option here

"trailingComma": "es5", // 多行時，盡可能打印尾隨的逗號

"tabWidth": 4, // 會忽略vetur的tabSize配置

"useTabs": false, // 是否利用tab替代空格

"semi": true, // 句尾是否加;

"singleQuote": true, // 使用單引號而不是雙引號

"arrowParens": "avoid", // allow paren-less arrow functions 箭頭函數的參數使用圓括號

}

}

2. vscode的tab縮進可以設置如下.

 

 3. 在“.prettierrc.js”中配置風格, vue文件可以格式化, 不支持js文件, 需要單獨安裝插件

 

九 prettier和ESLint沖突

1. 我們要安裝2個插件

• 安裝eslint-config-prettier

1) 禁用一些eslint和prettier沖突的規則, Turns off all rules that are unnecessary or might conflict with Prettier. github link(https://github.com/prettier/eslint-config-prettier#special-rules)

• 安裝eslint-plugin-prettier.  調用 prettier 格式化代碼，然后與格式化前對比，如果不一致，這個地方就會被 prettier 進行標記。

1) 可以將prettier的規則設置為eslint的規則，對不符合規則的進行提示。（與eslint-plugin-vue相同）github link.  

2) 使用 ESLint 與 eslint-plugin-prettier 的結果是最終得到的代碼是充分尊重 Prettier 的結果

不用的方案)prettier-eslint-cli 是先執行 prettier, 再自動使用 eslint --fix 將與 ESLint 規則沖突的代碼修正成 ESLint 想要的. 這樣引入 Prettier 不會影響原有的設置. 但是我們不用.

2. 怎么配置

eslint-config-* ，配置時寫成: 

注意: 確保將它放在 extends 數組的最后

extends: 'prettier' // 使用的時候需要確保，這個配置在extends的最后一項。例如以下形式:

//.eslintrc.js
{
  extends: [
    'standard', // 使用standard做代碼規范
    "prettier",
  ],
}

自定義規則使用 eslint-plugin-* 的命名，使用時寫成

  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error" // 表示被 prettier 標記的地方拋出錯誤信息。
  }

上面兩項配置可以簡化成

{
  "extends": ["plugin:prettier/recommended"]
}

然后保存時, 和prettier沖突的就不會調整了.

 十 vue script首行縮進問題

可能是項目開始用的不是vscode工具, 例如webstorm. 所以<script><script>中首行縮進了2個空格.

如果還在用webstorm, 建議配置下webstorm的首行縮進, vscode就不升級插件了. 采用首行不縮進格式.

兩個參考鏈接:

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md

https://segmentfault.com/q/1010000015135804

 

十一 放在這里, 忘記為什么了

配置下面, 代碼中的eslint提示就沒有了

parserOptions: { // parser: "babel"
    parser: ['babel-eslint','vue-eslint-parser',]
}