如何在 vscode 里用 eslint 規(guī)范你的 code？
前面說的話：
用eslint的目的是為了在團(tuán)隊(duì)合作中各吨，用來代碼風(fēng)格的統(tǒng)一揭蜒，
在團(tuán)隊(duì)中如果用了eslint洒缀，那么你就要把編碼效率提高起來树绩。
開始
-
安裝插件ESLint 渤早、Vetur、Prettier
ESLint
Vetur
Prettier 用vue-cli搭建項(xiàng)目涯竟，選擇用 eslint yes
生成一個vue spa項(xiàng)目之后庐船，編輯器 文件->首選項(xiàng)->設(shè)置->用戶設(shè)置 [也可以在工作區(qū)/文件夾設(shè)置]
這些配置都是為了在保存文件的時(shí)候自動修復(fù)筐钟，提升編碼效率
如下：
{
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 忽略需要eslint的文件夾
"eslint.options": {
"ignorePattern": ["node_modules", "build", "dist", "config", "static"]
},
// 代碼縮進(jìn)修改成2個空格
"editor.tabSize": 2,
// 不顯示匿名函數(shù)前面的方法空格
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
// 格式化單引號
"prettier.singleQuote": true,
"vetur.validation.template": false,
// 可以讓html按照屬性格式化換行
"vetur.format.defaultFormatter.html": "js-beautify-html",
// vscode格式化Vue出現(xiàn)的問題，把"vetur.format.defaultFormatter.js": "prettier",改為 "vetur.format.defaultFormatter.js": "vscode-typescript"
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// vue組件中html代碼格式化樣式
"wrap_attributes": "force-aligned"
}
},
/* 編輯器設(shè)置相關(guān) begin*/
// 開啟換行
"editor.wordWrap": "on",
"workbench.colorTheme": "Monokai",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"files.trimTrailingWhitespace": false,
/* 編輯器設(shè)置相關(guān) end*/
}
即可赋朦！
- 一般我們都用eslint默認(rèn)的配置來編寫李破，如果想要有自己的規(guī)則，可以在
.eslintrc.js文件中編輯
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: ['vue'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
/* 自己添加的規(guī)則 begin */
'no-multiple-empty-lines': ['error', { max: 3 }],
// 方法名后面不加空格
'space-before-function-paren': ['error', 'never'],
// 語句強(qiáng)制分號結(jié)尾
semi: ['error', 'always'],
quotes: ['error', 'single'],
// iview 部分標(biāo)簽會顯示錯誤
'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }]
/* 自己添加的規(guī)則 end */
}
};
以上的配置壹将，就可以開始開發(fā)vue spa項(xiàng)目了嗤攻，ctrl+s保存項(xiàng)目的時(shí)候就會自動格式化，自動修復(fù)
以下是多余的：
- 針對單個 js 文件禁用 ESLint 語法校驗(yàn)
- 在代碼頂部添加一行注釋
/* eslint-disable */
ESLint 在校驗(yàn)的時(shí)候就會跳過后面的代碼
- 還可以在注釋后加入詳細(xì)規(guī)則诽俯，這樣就能避開指定的校驗(yàn)規(guī)則了
/* eslint-disable no-new */
例如我們用vue-cli生成的項(xiàng)目
