本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出
开始
安装插件
如图所示:
vscode设置
安装完成之后,到vscode中的 文件–>首选项–>设置 中 添加如下代码
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
] autoFix表示自动格式化代码,简直不要太好用~~
es-lint配置
就快大工告成了,接下来我们需要还需要如下配置
.eslintrc.js
注意
很多小伙伴可能会存在如下报错,npm install -g babel-eslint 即可
配置
下面是我个人参考百度通修改后做的配置,写于.eslintrc.js中,因个人喜好,未使用:全等、对象引号做键等规则,大家可自行修改
module.exports = {
root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
parser: 'babel-eslint', //解析器,这里我们使用babel-eslint
parserOptions: {
sourceType: 'module' //类型为module,因为代码使用了使用了ECMAScript模块
},
env: {
browser: true, //预定义的全局变量,这里是浏览器环境
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
//extends: 'standard', //扩展,可以通过字符串或者一个数组来扩展规则
// required to lint *.vue files
plugins: [
'html' //插件,此插件用于识别文件中的js代码,没有MIME类型标识没有script标签也可以识别到,因此拿来识别.vue文件中的js代码
],
// add your custom rules here
'rules': {
//这里写自定义规则
"comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号
"no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符
// "no-console": 2, //不允许出现console语句
"no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量
"no-control-regex": 2, //正则表达式中不允许出现控制字符
"no-debugger": 2, //不允许出现debugger语句
"no-dupe-args": 2, //函数定义的时候不允许出现重复的参数
"no-dupe-keys": 2, //对象中不允许出现重复的键
"no-duplicate-case": 2, //switch语句中不允许出现重复的case标签










