vue-cli3项目配置eslint代码规范的完整步骤


Posted in Javascript onSeptember 10, 2020

前言

最近接手了一个项目,由于之前为了快速开发,没有做代码检查。为了使得代码更加规范以及更易读,所以就要eslint上场了。

安装依赖

安装依赖有两种方法:

  1. 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖。
  2. 在package.json文件加上相应依赖:
"eslint-plugin-html": "^6.0.3",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"eslint": "5.0.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "4.7.1",

eslint配置方法

eslint的规则有三个选项:

  • "off"或者0,不启用这个规则
  • "warn"或者1,出现问题会有警告
  • "error"或者2,出现问题会报错

在根目录创建.eslintrc.js,代码如下:

module.exports = {
 // 默认情况下,ESLint会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有  "root": true,它就会停止在父级目录中寻找。
 root: true,
 parserOptions: {
  // 对Babel解析器的包装使其与 ESLint 兼容。
  parser: 'babel-eslint',
  // 代码是 ECMAScript 模块
  sourceType: 'module'
 },
 env: {
   // 预定义的全局变量,这里是浏览器环境
  browser: true,
  node: true,
  es6: true,
 },
 // 扩展风格
 extends: ['plugin:vue/recommended', 'eslint:recommended'],
 // 规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/
 rules: {
  "vue/max-attributes-per-line": [2, {
   "singleline": 10,
   "multiline": {
    "max": 1,
    "allowFirstLine": false
   }
  }],
  "vue/name-property-casing": ["error", "PascalCase"],
  // 定义对象的set存取器属性时,强制定义get
  'accessor-pairs': 2,
  'arrow-spacing': [2, {
   'before': true,
   'after': true
  }],
  // 禁止或强制在单行代码块中使用空格
  'block-spacing': [2, 'always'],
  // 强制使用一致的缩进 第二个参数为 "tab" 时,会使用tab
  'brace-style': [2, '1tbs', {
   'allowSingleLine': true
  }],
  // 双峰驼命名格式
  'camelcase': [0, {
   'properties': 'always'
  }],
  // 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号
  'comma-dangle': [2, 'never'],
  // 控制逗号前后的空格
  'comma-spacing': [2, {
   'before': false,
   'after': true
  }],
  // 控制逗号在行尾出现还是在行首出现 (默认行尾)
  'comma-style': [2, 'last'],
  // 强制在子类构造函数中用super()调用父类构造函数,TypeScrip的编译器也会提示
  'constructor-super': 2,
  // 强制所有控制语句使用一致的括号风格
  'curly': [2, 'multi-line'],
  // 强制object.key 中 . 的位置,参数:
  // property,'.'号应与属性在同一行
  // object, '.' 号应与对象名在同一行
  'dot-location': [2, 'property'],
  // 文件末尾强制换行
  'eol-last': 2,
  // 使用 === 替代 == allow-null允许null和undefined==
  "eqeqeq": [2, "allow-null"],
  // 强制 generator 函数中 * 号周围使用一致的空格
  'generator-star-spacing': [2, {
   'before': true,
   'after': true
  }],
  // 要求回调函数中有容错处理
  'handle-callback-err': [2, '^(err|error)$'],
  'indent': [2, 2, {
   'SwitchCase': 1
  }],
  // 强制在 JSX 属性中一致地使用双引号或单引号
  'jsx-quotes': [2, 'prefer-single'],
  // 强制在对象字面量的属性中键和值之间使用一致的间距
  'key-spacing': [2, {
   'beforeColon': false,
   'afterColon': true
  }],
  // 强制在关键字前后使用一致的空格
  'keyword-spacing': [2, {
   'before': true,
   'after': true
  }],
  // 要求构造函数首字母大写
  'new-cap': [2, {
   'newIsCap': true,
   'capIsNew': false
  }],
  // 要求调用无参构造函数时有圆括号
  'new-parens': 2,
  // 禁止在没有类型检查操作符的情况下与 null 进行比较
  'no-eq-null': 0,
  // 禁止使用 Array 构造函数
  'no-array-constructor': 2,
  // 禁用 arguments.caller 或 arguments.callee
  'no-caller': 2,
  // 禁用 console
  'no-console': 0,
  // 禁止修改类声明的变量
  'no-class-assign': 2,
  // 禁止条件表达式中出现赋值操作符
  'no-cond-assign': 2,
  // 禁止修改 const 声明的变量
  'no-const-assign': 2,
  // 禁止在正则表达式中使用控制字符 :new RegExp("\x1f")
  'no-control-regex': 0,
  // 禁止删除变量
  'no-delete-var': 2,
  // 禁止 function 定义中出现重名参数
  'no-dupe-args': 2,
  // 禁止类成员中出现重复的名称
  'no-dupe-class-members': 2,
  // 禁止对象字面量中出现重复的 key
  'no-dupe-keys': 2,
  // 禁止重复的 case 标签
  'no-duplicate-case': 2,
  // 禁止在正则表达式中使用空字符集 (/^abc[]/)
  'no-empty-character-class': 2,
  // 禁止使用空解构模式no-empty-pattern
  'no-empty-pattern': 2,
  // 禁用 eval(),由于多处地方使用,暂不开启
  'no-eval': 0,
  // 禁止对 catch 子句的参数重新赋值
  'no-ex-assign': 2,
  // 禁止扩展原生类型
  'no-extend-native': 2,
  // 禁止不必要的 .bind() 调用
  'no-extra-bind': 2,
  // 禁止不必要的布尔转换
  'no-extra-boolean-cast': 2,
  // 禁止不必要的括号 //(a * b) + c;//报错
  'no-extra-parens': [2, 'functions'],
  // 禁止 case 语句落空
  'no-fallthrough': 2,
  // 禁止数字字面量中使用前导和末尾小数点
  'no-floating-decimal': 2,
  // 禁止对 function 声明重新赋值
  'no-func-assign': 2,
  // 禁止使用类似 eval() 的方法
  'no-implied-eval': 2,
  // 禁止在嵌套的块中出现 function 或 var 声明
  'no-inner-declarations': [2, 'functions'],
  // 禁止 RegExp 构造函数中无效的正则表达式字符串
  'no-invalid-regexp': 2,
  // 禁止在字符串和注释之外不规则的空白
  'no-irregular-whitespace': 2,
  // 禁用 __iterator__ 属性
  'no-iterator': 2,
  // 不允许标签与变量同名
  'no-label-var': 2,
  // 禁用标签语句
  'no-labels': [2, {
   'allowLoop': false,
   'allowSwitch': false
  }],
  // 禁用不必要的嵌套块
  'no-lone-blocks': 2,
  // 不允许空格和 tab 混合缩进
  'no-mixed-spaces-and-tabs': 2,
  // 禁止使用多个空格
  'no-multi-spaces': 2,
  // 禁止使用多行字符串,在 JavaScript 中,可以在新行之前使用斜线创建多行字符串
  'no-multi-str': 2,
  // 不允许多个空行
  'no-multiple-empty-lines': [2, {
   'max': 1
  }],
  // 禁止对原生对象赋值
  'no-native-reassign': 2,
  // 禁止在 in 表达式中出现否定的左操作数
  'no-negated-in-lhs': 2,
  // 禁止使用 Object 的构造函数
  'no-new-object': 2,
  // 禁止调用 require 时使用 new 操作符
  'no-new-require': 2,
  // 禁止 Symbol 的构造函数
  'no-new-symbol': 2,
  // 禁止对 String,Number 和 Boolean 使用 new 操作符
  'no-new-wrappers': 2,
  // 禁止把全局对象 (Math 和 JSON) 作为函数调用 错误:var math = Math();
  'no-obj-calls': 2,
  // 禁用八进制字面量
  'no-octal': 2,
  // 禁止在字符串中使用八进制转义序列
  'no-octal-escape': 2,
  // 禁止对 __dirname 和 __filename进行字符串连接
  'no-path-concat': 2,
  // 禁用 __proto__ 属性
  'no-proto': 2,
  // 禁止使用 var 多次声明同一变量
  'no-redeclare': 2,
  // 禁止正则表达式字面量中出现多个空格
  'no-regex-spaces': 2,
  // 禁用指定的通过 require 加载的模块
  'no-return-assign': [2, 'except-parens'],
  // 禁止自我赋值
  'no-self-assign': 2,
  // 禁止自身比较
  'no-self-compare': 2,
  // 禁用逗号操作符
  'no-sequences': 2,
  // 禁止覆盖受限制的标识符
  'no-shadow-restricted-names': 2,
  // 禁止 function 标识符和括号之间出现空格
  'no-spaced-func': 2,
  // 禁用稀疏数组
  'no-sparse-arrays': 2,
  // 禁止在构造函数中,在调用 super() 之前使用 this 或 super
  'no-this-before-super': 2,
  // 禁止抛出非异常字面量
  'no-throw-literal': 0,
  // 禁用行尾空格
  'no-trailing-spaces': 2,
  // 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
  'no-undef': 2,
  // 禁止将变量初始化为 undefined
  'no-undef-init': 2,
  // 禁止出现令人困惑的多行表达式
  'no-unexpected-multiline': 2,
  // 禁用一成不变的循环条件
  'no-unmodified-loop-condition': 2,
  // 禁止可以在有更简单的可替代的表达式时使用三元操作符
  'no-unneeded-ternary': [2, {
   'defaultAssignment': false
  }],
  // 禁止在return、throw、continue 和 break语句之后出现不可达代码
  'no-unreachable': 2,
  'no-unsafe-finally': 2,
  // 禁止出现未使用过的变量
  'no-unused-vars': [2, {
   'vars': 'all',
   'args': 'none'
  }],
  // 禁止不必要的 .call() 和 .apply()
  'no-useless-call': 2,
  // 禁止不必要的计算性能键对象的文字
  'no-useless-computed-key': 2,
  'no-useless-constructor': 2,
  // 禁用不必要的转义字符
  'no-useless-escape': 0,
  // 禁止属性前有空白
  'no-whitespace-before-property': 2,
  // 禁用 with 语句
  'no-with': 2,
  // 强制函数中的变量要么一起声明要么分开声明
  'one-var': [2, {
   'initialized': 'never'
  }],
  // 强制操作符使用一致的换行符
  'operator-linebreak': [2, 'after', {
   'overrides': {
    '?': 'before',
    ':': 'before'
   }
  }],
  // 要求或禁止块内填充
  'padded-blocks': [2, 'never'],
  // 强制使用一致的反勾号、双引号或单引号
  'quotes': [2, 'single', {
   'avoidEscape': true,
   'allowTemplateLiterals': true
  }],
  // 要求或禁止使用分号而不是 ASI(这个才是控制行尾部分号的,)
  'semi': [2, 'never'],
  // 强制分号之前和之后使用一致的空格
  'semi-spacing': [2, {
   'before': false,
   'after': true
  }],
  // 强制在块之前使用一致的空格
  'space-before-blocks': [2, 'always'],
  // 强制在 function的左括号之前使用一致的空格
  'space-before-function-paren': [2, 'never'],
  // 强制在圆括号内使用一致的空格
  'space-in-parens': [2, 'never'],
  // 要求操作符周围有空格
  'space-infix-ops': 2,
  // 强制在一元操作符前后使用一致的空格
  'space-unary-ops': [2, {
   'words': true,
   'nonwords': false
  }],
  // 强制在注释中 // 或 /* 使用一致的空格
  'spaced-comment': [2, 'always', {
   'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
  }],
  // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
  'template-curly-spacing': [2, 'never'],
  // 要求使用 isNaN() 检查 NaN
  'use-isnan': 2,
  // typeof foo === "undefimed" 错误
  'valid-typeof': 2,
  // 要求 IIFE 使用括号括起来
  'wrap-iife': [2, 'any'],
  // 强制在 yield* 表达式中 * 周围使用空格
  'yield-star-spacing': [2, 'both'],
  // 要求或禁止 “Yoda” 条件
  'yoda': [2, 'never'],
  // 要求使用 const 声明那些声明后不再被修改的变量
  'prefer-const': 2,
  // 是否允许debugger
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
  // 强制在花括号中使用一致的空格
  'object-curly-spacing': [2, 'always', {
   objectsInObjects: false
  }],
  // 指定数组的元素之间要以空格隔开(, 后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格
  'array-bracket-spacing': [2, 'never']
 }
}

忽略不必要的文件检测

在根目录下新建文件.eslintignore,对应的文件忽略检测。

src/assets

关闭某些代码的检测

有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测,可以使用注释。

下面的代码会关闭所有规则:

/* eslint-disable */
alert('str');
/* eslint-enable */

下面的代码会关闭某一行的所有规则:

alert('str'); // eslint-disable-line

// eslint-disable-next-line
alert('str');

下面的代码在某一行关闭指定的规则:

alert('str'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('str');

开启验证

在根目录的vue.config.js中,把lintOnSave设置为true。

vs code安装插件与设置

在vscode上安装eslint和vetur插件,并在file>>prefrence>>setting 或文件>>首选项>>设置中,找到setting.json,添加如下配置,让vscode每次保持的时候安装eslint规范来自动格式化:

// 重新设定tabsize
"editor.tabSize": 2,
// 每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
{
 "language": "vue",
 "autoFix": true
},
{
 "language": "html",
 "autoFix": true
},
{
 "language": "javascript",
 "autoFix": true
}
],
// 每次保存的时候自动格式化(建议关掉,用eslint来修复)
"editor.formatOnSave": false

结语

本文章只是记录eslint的过程,如果大家有什么问题可以在下方反馈给我,谢谢!

到此这篇关于vue-cli3项目配置eslint代码规范的文章就介绍到这了,更多相关vue-cli3项目配置eslint代码规范内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php加密解密实用类分享
2014/01/07 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python中的id()函数指的什么
2017/10/17 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
秘书行业自我鉴定范文
2013/12/30 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
教师考核评语大全
2014/12/31 职场文书
公司回复函格式
2015/07/14 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python