一、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文件
有如下提示. 因為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"
}
}
四、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
} }
怎么配置呢,這里是在線配置界面 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
常用設置參考：
.prettierrc文件格式
{
"printWidth": 100, // 超過最大值換行
"tabWidth": 4, // 縮進字節數
"useTabs": false, // 縮進不使用tab，使用空格
"semi": true, // 句尾添加分號
"singleQuote": true, // 使用單引號代替雙引號
"proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
"arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號
"bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"
"disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置
"endOfLine": "auto", // 結尾是 \n \r \n\r auto
"eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
"htmlWhitespaceSensitivity": "ignore",
"ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
"jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
"jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
"parser": "babylon", // 格式化的解析器，默認是babylon
"requireConfig": false, // Require a 'prettierconfig' to format prettier
"stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
"trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號）
"tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}
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. 怎么配置
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',]
}
轉發：https://www.cnblogs.com/zhurong/p/12766148.html
轉發：https://www.cnblogs.com/mspeer/p/12055962.html
提供下簡單配置總結：