如何在 vscode 里用 eslint 规范你的 code？
前面说的话：
用eslint的目的是为了在团队合作中，用来代码风格的统一，
在团队中如果用了eslint，那么你就要把编码效率提高起来。
开始
-
安装插件ESLint 、Vetur、Prettier
ESLint
Vetur
Prettier 用vue-cli搭建项目，选择用 eslint yes
生成一个vue spa项目之后，编辑器 文件->首选项->设置->用户设置 [也可以在工作区/文件夹设置]
这些配置都是为了在保存文件的时候自动修复，提升编码效率
如下：
{
"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"]
},
// 代码缩进修改成2个空格
"editor.tabSize": 2,
// 不显示匿名函数前面的方法空格
"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出现的问题，把"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"
}
},
/* 编辑器设置相关 begin*/
// 开启换行
"editor.wordWrap": "on",
"workbench.colorTheme": "Monokai",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"files.trimTrailingWhitespace": false,
/* 编辑器设置相关 end*/
}
即可！
- 一般我们都用eslint默认的配置来编写，如果想要有自己的规则，可以在
.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',
/* 自己添加的规则 begin */
'no-multiple-empty-lines': ['error', { max: 3 }],
// 方法名后面不加空格
'space-before-function-paren': ['error', 'never'],
// 语句强制分号结尾
semi: ['error', 'always'],
quotes: ['error', 'single'],
// iview 部分标签会显示错误
'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }]
/* 自己添加的规则 end */
}
};
以上的配置，就可以开始开发vue spa项目了，ctrl+s保存项目的时候就会自动格式化，自动修复
以下是多余的：
- 针对单个 js 文件禁用 ESLint 语法校验
- 在代码顶部添加一行注释
/* eslint-disable */
ESLint 在校验的时候就会跳过后面的代码
- 还可以在注释后加入详细规则，这样就能避开指定的校验规则了
/* eslint-disable no-new */
例如我们用vue-cli生成的项目
