VS Code 中 Vetur、prettier、ESLint 使用 （轉）
一、vue語法高亮
1.1 安裝Vetur
1. 建立.vue檔案, 寫些程式碼, 發現一片漆黑
2. 安裝啟用vetur外掛, 程式碼就有高亮了. 右鍵選單還會變多一些, 主要多了個格式化文件.
這裡配置了多個格式化的，所以會有多個。
看下vetur的特性: 語法高亮, 程式碼片段(emmet給我的感覺是一個寫好了的snippet), 質量提示&錯誤、格式化/風格、智慧提示等。
對於這些功能可以檢視官方文件。
1.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.
格式化/風格——後面還會講
- Vetur只支援整個文件格式化, 不支援選中某個片段格式化
- Vetur內嵌瞭如下格式化工具, 如果本地安裝了相應版本, 則會使用本地安裝的版本, 預設配置如圖
-
prettier: For css/scss/less/js/ts.prettier-eslint: For js. Runprettierandeslint --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)加入如下配置。會生成一個.vscode/setting.json檔案
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
]
有如下提示. 因為autoFix預設是啟用的. 改一下就行
反正, ESLint 已經能夠對<template>和<script> 進行提示了
三、 安裝 eslint-plugin-vue
vetur預設集成了一個eslint-plugin-vue版本來對<template>提示.
可以參考文件：https://eslint.vuejs.org/user-guide/。
也可自己安裝一個新的版本. 如果自己安裝一個新的版本, 那麼配置過程如下:
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)
PS：新增一個通用配置，可以參考：https://github.com/vuejs/eslint-config-vue。
{
"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的預設程式碼風格工具如下. 前面截圖過
| 1 2 3 4 5 6 7 8 9 |
"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-設定風格
上面知道 vetur 可以設定不同的風格，這些風格可以共存也可以只設置為某一種，下面就是設定風格為：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
"wrap_attributes":"auto",//屬性強制折行對齊
"wrap_line_length":0, // 設定一行多少字元換行，設定為 0 表示不換行
//"end_with_newline":true
"semi":false, //
"singleQuote":true // 單引號
} }
怎麼配置呢,這裡是線上配置介面beautifier,配置完, 把配置貼過來,效果就有了
六、儲存自動格式化
下面是對自動儲存時格式化的設定：
"editor.formatOnSave": true, // 在儲存時自動格式化
"editor.formatOnType": false, // 在鍵入一行後是否自動化格式
"editor.formatOnPaste": true, // 在貼上時自動格式化
"editor.wordWrap": "off", // 換行規則，off 永不換行
"editor.detectIndentation": false, // vscode 預設是啟用根據檔案型別自動設定 tabSize 的值
// 儲存時按照哪個規則進行格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": 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 箭頭函式的引數使用圓括號
}
}
對於 prettier 的配置可以看這裡：Prettier
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.可以參考這裡：eslint-config-prettier
- 安裝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-* 的命名，使用時寫成
| 1 2 3 4 |
plugins: ["prettier"],
rules: {
"prettier/prettier":"error"// 表示被 prettier 標記的地方丟擲錯誤
}
|
上面兩項配置可以簡化成
{
"extends": ["plugin:prettier/recommended"]
}
然後儲存時, 和prettier衝突的就不會調整了.
配置下面,程式碼中的eslint提示就沒有了
parserOptions: {
// parser: "babel"
parser: ['babel-eslint','vue-eslint-parser',]
}