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

這3工具都必須安裝. 可是安裝以後, 規則衝突又讓人頭疼. 講下解決方案吧.
一 從0開始
1. 禁止工做區插件, 以下圖: 

 

2. 清空用戶設置(Code–>首選項–>設置–>[右上角能夠打開json,左側切換「用戶|工做區」])

所有刪除. 我只留了這一句

"window.zoomLevel": -1,

 

二 vue語法高亮
1. 建立.vue文件, 寫些代碼, 發現一片漆黑

 

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

 

 

這時候, "右鍵>格式化文檔" 已經能夠使用了:

1. 在「.prettierrc.js」中配置風格, vue文件能夠格式化, 不支持js文件
2. 代碼質量不支持任何配置(看下面這段介紹)

3. 看下vetur的特性. 參考連接[link](https://vuejs.github.io/vetur/)

 

4. 咱們主要看紅色圈起來的. 進入第一個連接, 赫然看見

Linting

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. 

這裏, 我說一句, ESLint主要負責質量檢查和風格檢查. (後面咱們用到的Prettier主要負責風格檢查, 沒有質量檢查)

三 安裝ESLint

1. 安裝npm包

npm install -D eslint

2. 安裝ESLint插件

這時候, ESLint其實已經能夠用了, 例如

 

 

不過下面這個提示仍然存在

 

 

 此時vue仍然能夠格式化, js仍是不行 

配置ESLint——感受無用

根聽說明在code-》首選項-》設置-》用戶JSON加入以下配置, 感受配置先後沒有變化……誰知道?

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

可是有以下提示. 是由於autoFix缺省是啓用的. 改一下就行

 

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

 

四 安裝 eslint-plugin-vue

能夠使用vetur默認使用的eslint-plugin-vue版原本對<template>進行提示.

也能夠本身安裝一個新的版本. 若是本身安裝一個新的版本, 那麼配置過程以下:

1. 爲了避免影響其餘vue項目, 在項目下新建一個.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, 而使用prettier. 我不建議這樣作.
• 有2個配置能夠被格式化繼承, 可是當.prettierrc和..eslintrc.js存在時,他會被覆蓋. 

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

咱們拷貝一份到「用戶設置」中.

 

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

修改默認配置, 最好是配置到項目配置, 也就是.vscode目錄的settings.json文件. 不然別人的電腦上面可沒有配置. 如何保持一致呢

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 纔不換行

七 保存時自動調整格式

 "editor.codeActionsOnSave": { "source.fixAll": true }, "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 130,

藍色, 保存時自動調整格式, 棕色, 我不喜歡html屬性換行, 可是又想看到所有, 那就只能設置編輯器視覺上的換行了.

八 vetur-設置prettier風格

這個時候, 其實prettier並無發揮做用, 建立個.prettierrc.js文件或者以下配置, 怎麼配都沒有用

1. prettier能夠在vscode「用戶設置」或者「項目設置」中設置風格. 以下,可是咱們不建議這麼作.

"vetur.format.defaultFormatterOptions": { "prettier": { // Prettier option here
    "semi": false } }

2. 這時候咱們就要安裝2個插件

• 安裝eslint-config-prettier

禁用一些eslint和prettier衝突的規則, Turns off all rules that are unnecessary or might conflict with Prettier. github link

• 安裝eslint-plugin-prettier

能夠將prettier的規則設置爲eslint的規則，對不符合規則的進行提示。（與eslint-plugin-vue相同）github link

3. 安裝prettier vscode插件

 

 

4. 怎麼配置

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

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

extends: 'prettier'

 

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

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

上面兩項配置能夠簡化成

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

而後保存時, 和prettier衝突的就不會調整了.

 九 其餘

配置下面

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

代碼中的eslint提示就沒有了

那是還得加上

"parser": "vue-eslint-parser",

 十 Tab縮進

vscode中, ⚙️> 命令面板, >Indent Using Spaces, 配置成4