前言
以前公司的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,參考了很多網上大佬的文章,但是感覺這個配置好像還差了哪裏,但又始終不知道問題在哪裏,熱烈歡迎大家交流指教。