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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
jquery each()源代码
Feb 14 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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 异常处理实现代码
2009/03/10 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python自定义一个异常类的方法
2019/06/27 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python龙贝格法求积分实例
2020/02/29 Python
python操作yaml说明
2020/04/08 Python
Python新手学习装饰器
2020/06/04 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
通用C#笔试题附答案
2016/11/26 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
大学校务公开实施方案
2014/03/31 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
终止劳动合同协议书
2014/10/05 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server