vscode中vue-cli项目es-lint的配置方法


Posted in Javascript onJuly 30, 2018

本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出

开始

安装插件

如图所示:

vscode中vue-cli项目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 即可

vscode中vue-cli项目es-lint的配置方法 

配置

下面是我个人参考百度通修改后做的配置,写于.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标签
    "no-empty": 2, //不允许出现空的代码块
    "no-empty-character-class": 2, //正则表达式中不允许出现空的字符组
    "no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量
    "no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换
    "no-extra-parens": 0, //不允许出现不必要的圆括号
    "no-extra-semi": 2, //不允许出现不必要的分号
    "no-func-assign": 2, //不允许重新分配函数声明
    "no-inner-declarations": ["error", "functions"], //不允许在嵌套代码块里声明函数
    "no-invalid-regexp": 2, //不允许在RegExp构造函数里出现无效的正则表达式
    "no-irregular-whitespace": 2, //不允许出现不规则的空格
    "no-negated-in-lhs": 2, //不允许在in表达式语句中对最左边的运算数使用取反操作
    "no-obj-calls": 2, //不允许把全局对象属性当做函数来调用
    "no-regex-spaces": 2, //正则表达式中不允许出现多个连续空格
    // "quote-props": 2, //对象中的属性名是否需要用引号引起来
    "no-sparse-arrays": 2, //数组中不允许出现空位置
    // "no-unreachable": 2, //在return,throw,continue,break语句后不允许出现不可能到达的语句
    "use-isnan": 2, //要求检查NaN的时候使用isNaN()
    "valid-jsdoc": ["error", {
     "requireReturn": false,
     "requireParamDescription": false,
     "requireReturnDescription": true
    }], //强制JSDoc注释
    "valid-typeof": ["error", {
     "requireStringLiterals": true
    }], //在使用typeof表达式比较的时候强制使用有效的字符串
    "block-scoped-var": 2, //将变量声明放在合适的代码块里
    "complexity": 0, //限制条件语句的复杂度
    // "consistent-return": 2, //无论有没有返回值都强制要求return语句返回一个值
    "curly": ["error", "all"], //强制使用花括号的风格
    "default-case": 0, //在switch语句中需要有default语句
    "dot-notation": ["error", {
     "allowKeywords": false,
     "allowPattern": ""
    }], //获取对象属性的时候使用点号
    // "eqeqeq": ["error", "smart"], //比较的时候使用严格等于
    "no-alert": 1, //不允许使用alert,confirm,prompt语句
    "no-caller": 2, //不允许使用arguments.callee和arguments.caller属性
    "guard-for-in": 0, //监视for in循环,防止出现不可预料的情况
    "no-div-regex": 2, //不能使用看起来像除法的正则表达式
    "no-else-return": 0, //如果if语句有return,else里的return不用放在else里
    "no-labels": ["error", {
     "allowLoop": false,
     "allowSwitch": false
    }], //不允许标签语句
    "no-eq-null": 2, //不允许对null用==或者!=
    "no-eval": 2, //不允许使用eval()
    "no-extend-native": 2, //不允许扩展原生对象
    "no-extra-bind": 2, //不允许不必要的函数绑定
    "no-fallthrough": 2, //不允许switch按顺序全部执行所有case
    "no-floating-decimal": 2, //不允许浮点数缺失数字
    "no-implied-eval": 2, //不允许使用隐式eval()
    "no-iterator": 2, //不允许使用__iterator__属性
    "no-lone-blocks": 2, //不允许不必要的嵌套代码块
    "no-loop-func": 2, //不允许在循环语句中进行函数声明
    "no-multi-spaces": 2, //不允许出现多余的空格
    "no-multi-str": 2, //不允许用\来让字符串换行
    "no-global-assign": 2, //不允许重新分配原生对象
    "no-new": 2, //不允许new一个实例后不赋值或者不比较
    "no-new-func": 2, //不允许使用new Function
    "no-new-wrappers": 2, //不允许使用new String,Number和Boolean对象
    "no-octal": 2, //不允许使用八进制字面值
    "no-octal-escape": 2, //不允许使用八进制转义序列
    "no-param-reassign": 0, //不允许重新分配函数参数"no-proto": 2, //不允许使用__proto__属性
    "no-redeclare": 2, //不允许变量重复声明
    // "no-return-assign": 2, //不允许在return语句中使用分配语句
    "no-script-url": 2, //不允许使用javascript:void(0)
    "no-self-compare": 2, //不允许自己和自己比较
    "no-sequences": 2, //不允许使用逗号表达式
    "no-throw-literal": 2, //不允许抛出字面量错误 throw "error"
    "no-unused-expressions": 2, //不允许无用的表达式
    "no-void": 2, //不允许void操作符
    "no-warning-comments": [1, {
     "terms": ["todo", "fixme", "any other term"]
    }], //不允许警告备注
    "no-with": 2, //不允许使用with语句
    "radix": 1, //使用parseInt时强制使用基数来指定是十进制还是其他进制
    "vars-on-top": 0, //var必须放在作用域顶部
    "wrap-iife": [2, "any"], //立即执行表达式的括号风格
    "yoda": [2, "never", {
     "exceptRange": true
    }], //不允许在if条件中使用yoda条件
    "strict": [2, "function"], //使用严格模式
    "no-catch-shadow": 2, //不允许try catch语句接受的err变量与外部变量重名"no-delete-var": 2, //不允许使用delete操作符
    "no-label-var": 2, //不允许标签和变量同名
    "no-shadow": 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
    "no-shadow-restricted-names": 2, //js关键字和保留字不能作为函数名或者变量名
    // "no-undef": 2, //不允许未声明的变量
    "no-undef-init": 2, //不允许初始化变量时给变量赋值undefined
    // "no-undefined": 2, //不允许把undefined当做标识符使用
    // "no-unused-vars": [2, {
    //  "vars": "all",
    //  "args": "after-used"
    // }], //不允许有声明后未使用的变量或者参数
    "no-use-before-define": [2, "nofunc"], //不允许在未定义之前就使用变量"indent": 2, //强制一致的缩进风格
    "brace-style": [2, "1tbs", {
     "allowSingleLine": false
    }], //大括号风格
    // "camelcase": [2, {
    //  "properties": "never"
    // }], //强制驼峰命名规则
    "comma-style": [2, "last"], //逗号风格
    "consistent-this": [0, "self"], //当获取当前环境的this是用一样的风格
    "eol-last": 2, //文件以换行符结束
    "func-names": 0, //函数表达式必须有名字
    "func-style": 0, //函数风格,规定只能使用函数声明或者函数表达式
    "key-spacing": [2, {
     "beforeColon": false,
     "afterColon": true
    }], //对象字面量中冒号的前后空格
    "max-nested-callbacks": 0, //回调嵌套深度
    "new-cap": [2, {
     "newIsCap": true,
     "capIsNew": false
    }], //构造函数名字首字母要大写
    "new-parens": 2, //new时构造函数必须有小括号
    "newline-after-var": 0, //变量声明后必须空一行
    "no-array-constructor": 2, //不允许使用数组构造器
    "no-inline-comments": 0, //不允许行内注释
    "no-lonely-if": 0, //不允许else语句内只有if语句
    "no-mixed-spaces-and-tabs": [2, "smart-tabs"], //不允许混用tab和空格
    "no-multiple-empty-lines": [2, {
     "max": 2
    }], //空行最多不能超过两行
    "no-nested-ternary": 2, //不允许使用嵌套的三目运算符
    "no-new-object": 2, //禁止使用new Object()
    // "fun-call-spacing": 2, //函数调用时,函数名与()之间不能有空格
    "no-ternary": 0, //不允许使用三目运算符
    "no-trailing-spaces": 2, //一行最后不允许有空格
    // "no-underscore-dangle": 2, //不允许标识符以下划线开头
    "no-extra-parens": 0, //不允许出现多余的括号
    "one-var": 0, //强制变量声明放在一起
    "operator-assignment": 0, //赋值运算符的风格
    "padded-blocks": [2, "never"], //块内行首行尾是否空行
    "quote-props": 0, //对象字面量中属性名加引号
    "quotes": [1, "single", "avoid-escape"], //引号风格
    "semi": [2, "always"], //强制语句分号结尾
    "semi-spacing": [2, {
     "before": false,
     "after": true
    }], //分后前后空格
    "sort-vars": 0, //变量声明时排序
    "space-before-blocks": [2, "always"], //块前的空格
    "space-before-function-paren": [2, {
     "anonymous": "always",
     "named": "never"
    }], //函数定义时括号前的空格
    "space-infix-ops": [2, {
     "int32Hint": true
    }], //操作符周围的空格
    "keyword-spacing": 2, //关键字前后的空格
    "space-unary-ops": [2, {
     "words": true,
     "nonwords": false
    }], //一元运算符前后不要加空格
    "wrap-regex": 2, //正则表达式字面量用括号括起来
    "no-var": 0, //使用let和const代替var
    "generator-star-spacing": [2, "both"], //生成器函数前后空格
    "max-depth": 0, //嵌套块深度
    "max-len": 0, //一行最大长度,单位为字符
    "max-params": 0, //函数最多能有多少个参数
    "max-statements": 0, //函数内最多有几个声明
    "no-bitwise": 0, //不允许使用位运算符
    "no-plusplus": 0 //不允许使用++ --运算符
   }
  }

总结

以上所述是小编给大家介绍的vscode中vue-cli项目es-lint的配置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
react中的DOM操作实现
Jun 30 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
angular-tree-component的使用详解
Jul 30 #Javascript
使用vue-router为每个路由配置各自的title
Jul 30 #Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 #Javascript
在react中使用vuex的示例代码
Jul 30 #Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 #Javascript
You might like
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python 异常处理总结
2016/10/18 Python
Python实现购物程序思路及代码
2017/07/24 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python实现微信防撤回神器
2019/04/29 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python的常见矩阵运算(小结)
2019/08/07 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
创立科技Java面试题
2015/11/29 面试题
小学开学寄语
2014/01/19 职场文书
求职信怎么写
2014/05/23 职场文书
总经理人事任命书
2014/06/05 职场文书
五好家庭申报材料
2014/12/20 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
爱护公物主题班会
2015/08/17 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
浅谈Python中的正则表达式
2021/06/28 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android