关于Eslint语法检查

在vue创建项目中,选择eslint+Standard config -标准规范-

在保存时就开启检查

eslintrc.js配置,没反应重启项目

语法报错,根据错误提示,去eslint官网搜索规则

在eslintrc.js文件中rules中添加或者修改规则,自定义的规则大于extends的规则

eslint的规则很多,常见的比如:

- "quotes": [1","single" ] //单引号
- "semi": [2,"always" ], //分号
- "indent": ["error", 2], // 缩进使用2个空格 
- "eqeqeq": [1], // 使用三个===
- "camelcase": [1, { "properties": "always" }], // 属性名的驼峰式写法
- "func-style": [2,], // 使用函数表达式 而不是函数声明
- 'global-require': [1,],//require顶级作用域
- "init-declarations": [2, "always"], //声明时必须赋初值
- "no-var": [2], //禁用var,用let和const代
- "no-whitespace-before-property": [2], // 不允许在对象和属性之间留空白
-"no-with": [2], // 不允许出现with
- "no-caller": [1],//禁止使用arguments.caller或arguments.callee
- "no-console": [1], //禁止使用console
- "no-debugger": [1], //禁止使用debugger
- "no-unused-vars": [1], //不能有声明后未被使用的变量或参数

解决ESLint报错思路一:直接关闭对应的规则校验

“规则”:“开启/关闭”
“no-extra-semi”:“off” //禁止不必要的分号: 关闭
1)off或者0 关闭规则
2)warn或者1 开启规则,使用警告级别,程序继续执行
3)error或者2 开启规则,使用错误级别,程序报错关闭
没有属性的规则,只需要控制开启,还是关闭;例如:“eqeqeq”: “off”,

'semi':0//关闭检查分号

解决ESLint报错思路二:根据自己的源代码来定义适配于自己项目的规则,这会覆盖掉继承得来的规则 

有属性的规则可以使用属性;
例如:“semi”: [“开启/关闭”, “属性”]
semi规则有两个属性,always(默认,要求在语句末尾使用分号),never(禁止在语句末使用分号)
“semi”:[“error”, “always”] //语句末没有分号就报错

"quotes":["error","double"],//quotes:该规则强制使用一致的反勾号、双引号或单引号,airbnb中定义的是单引号,在此我们自定义一个双引号的规则来覆盖这个继承的规则.

解决ESLint报错思路三:修改源代码以解决校验报错 

  1. semi:该规则要求在一行代码的末尾必须要有一个分号,这里我们遵守它的规则,来修改源代码将代码的末尾添加一个分号;。
  2. indent:该规则要求代码的缩进分隔为2个空格,这里我们遵守它的规则,来修改源代码将代码的缩进变为2个空格
  3. eol-last:该规则要求文件的最后一行应该有一个空行,这里我们遵守它的规则,来修改源代码将代码的最后添加一个空行

格式化代码之后会将单引号变为双引号,最后还会加上逗号,末尾的分号于是会导致三种错误:

 1. error  Strings must use singlequote  quotes
 2. error  Unexpected trailing comma     comma-dangle
 3. error  Extra semicolon  

常用的配置

prettier插件配置 ,格式化代码

在这里插入图片描述

安装格式化插件, 

在vscode中右键选择文档格式化方式,选择prettier-code formatter

创建prettier文件,配置设置,格式化的时候会根据配置自动去掉分号,双引号替换单引号..


{
           "trailingComma":"none",
           "semi":false,
//使用单引号替换双引号
           "singleQuote":true,
           "arrowParens":"avoid",
 //每行文字上线,超过换行
           "printWidth":300
       }


其他

1报错 imported multiple times import/no-duplicates问题

出现这个问题一般是导入import次数过多
只需要把导入的文件放在一行即可,并且都好后边加空格

在这里插入图片描述

2报错 error Unexpected trailing comma comma-dangle

  • 原因:这种情况是由于VS Code在使用Vetur格式化vue代码的时候,会在代码的最后多加了一个逗号,导致过不了eslint的js格式化要求,所以报错。如:
    <script>
    export default {
      name: 'App',
      data() {
        return {
          date: '',
          week: '',
          time: '',
        }
      }
     }
     </script>
    

    在上面的代码中,在time字段的后面多了一个逗号,可以手动去除,也可以修改插件配置。但代码量较大时,手动去除,em~自己感受吧

    • 可以配置eslint不检测,'comma-dangle':'off'  //关闭末尾逗号检测

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'semi':0, //关闭分号
    'quotes':'off',//关闭引号
    'comma-dangle':'off'  //关闭末尾逗号
  }

3、报错:error Expected indentation of 2 spaces but found 3 indent
原因:像这种就是多或者少空格导致的,想上面一个就是多了一个空格。
解决:将多余(缺少)的空格删除(补全)即可
注意事项:如果使用过代码格式化工具,可能会很难调整对象中的参数,可以先将其禁用。

4、报错:Newline required at end of file but not found eol-last
原因:eslint需要文件最后有一个空号,而你没有
解决:在对应文件末尾添加一个空行

5、报错:error Missing space before value for key ‘name’ key-spacing
原因:eslint的格式中键值对之间要有一个空格,如:

name: "张三"
6、报错error Strings must use singlequote quotes
原因:eslint的格式中字符串要使用单引号

7. error  Expected space or tab after '//' in comment

注释间隔注释中的“/”之后的错误期望空间或选项卡

在注释//后加一个空格

8.Missing space before function parentheses

报这个错误的原因是函数名称或function关键字与开始参数之间缺少空格,可以通过修改eslint的配置文件来更改语法检测规则,打开.eslint文件,并在rules中添加如下一行代码即可:

 "space-before-function-paren": 0


rule的一些配置

{
root: true, // 当前配置为根配置,将不再从上级文件夹查找配置
parserOptions: {
  parser: 'babel-eslint',  // 采用 babel-eslint 作为语法解析器
  sourceType: 'module',   // 指定来源的类型,有两种script或module
  ecmaVersion: 6, //指定ECMAScript支持的版本,6为ES6
},
env: {
  browser: true,  // 设置为所需检查的代码是在浏览器环境运行的
  es6: true  // 设置所需检查代码为 es6 语法书写
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],// 扩展使用 vue 检查规则和eslint推荐规则
  rules: {
    'vue/attribute-hyphenation': 0, // 忽略属性连字
    'vue/max-attributes-per-line':[2, { singleline: 10, multiline: { max: 1, allowFirstLine: false } }], // 每行最大属性
    'vue/singleline-html-element-content-newline': 'off', // 单行html元素内容在新的一行
    'vue/multiline-html-element-content-newline': 'off', // 多行html元素内容在新的一行
    'vue/html-closing-bracket-newline': 'off', // html右括号在新的一行
    'vue/no-v-html': 'off', // 不使用v-html
    'vue/html-self-closing': 0, // 忽略html标签自闭合
    'accessor-pairs': 2, // 应同时设置setter和getter
    'arrow-spacing': [2, { before: true, after: true }], // 箭头间距
    'vue/require-default-prop': 0, // 不检查默认属性
    'vue/require-prop-types': 0, // 不检查默认类型
    'block-spacing': [2, 'always'], // 块间距
    'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括号样式允许单行
    'camelcase': [2, { properties: 'always' }], //为属性强制执行驼峰命名
    'comma-dangle': [2, 'never'], // 逗号不使用悬挂
    'comma-spacing': [2, { before: false, after: true }], // 逗号间距
    'comma-style': [2, 'last'], //(默认)与数组元素,对象属性或变量声明在同一行之后和同一行需要逗号
    'constructor-super': 2,
    'consistent-this': [2, 'that'], //强制this别名为that
    'curly': [2, 'multi-line'], // 当一个块只包含一条语句时,不允许省略花括号。
    'dot-location': [2, 'property'], //成员表达式中的点应与属性部分位于同一行
    'eol-last': 2, // 强制文件以换行符结束(LF)
    'eqeqeq': ['error', 'always', { null: 'ignore' }], // 强制使用全等
    'generator-star-spacing': [2, { before: true, after: true }], // 生成器中'*'两侧都要有间距
    'global-require': 1, // 所有调用require()都位于模块的顶层
    'indent': [2, 2, { SwitchCase: 2 }], //缩进风格
    'key-spacing': [2, { beforeColon: false, afterColon: true }], // 强制在对象字面量属性中的键和值之间保持一致的间距
    'keyword-spacing': [2, { before: true, after: true }], // 关键字如if/function等的间距
    'new-cap': [2, { newIsCap: true, capIsNew: false }],// 允许在没有new操作符的情况下调用大写启动的函数;(默认)要求new使用大写启动函数调用所有操作符
    'new-parens': 2, // JavaScript通过new关键字调用函数时允许省略括号
    'no-array-constructor': 1, // 不允许使用Array构造函数。除非要指定生成数组的长度
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使用console
    'no-class-assign': 2, // 不允许修改类声明的变量
    'no-const-assign': 2, // 不能修改使用const关键字声明的变量
    'no-control-regex': 0, // 不允许正则表达式中的控制字符
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 只有开发环境可以使用debugger
    'no-delete-var': 2, // 不允许在变量上使用delete操作符
    'no-dupe-args': 2, // 不允许在函数声明或表达式中使用重复的参数名称
    'no-dupe-class-members': 2, // 不允许在类成员中使用重复的参数名称
    'no-dupe-keys': 2, // 不允许在对象文字中使用重复键
    'no-duplicate-case': 2, // 不允许在switch语句的case子句中使用重复的测试表达式
    'no-empty-character-class': 2, // 不允许在正则表达式中使用空字符类
    'no-empty-pattern': 2, // 不允许空块语句
    'no-eval': 2, // 不允许使用eval
    'no-ex-assign': 2, // 不允许在catch子句中重新分配例外
    'no-extend-native': 2, // 不允许直接修改内建对象的原型
    'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
    'no-extra-parens': [2, 'functions'], // 仅在函数表达式附近禁止不必要的括号
    'no-fallthrough': 2, //消除一个案件无意中掉到另一个案件
    'no-floating-decimal': 2, //消除浮点小数点,并在数值有小数点但在其之前或之后缺少数字时发出警告
    'no-func-assign': 2, // 允许重新分配function声明
    'no-implied-eval': 2, // 消除隐含eval()
    'no-inner-declarations': [2, 'functions'], // 不允许function嵌套块中的声明
    'no-invalid-regexp': 2, //不允许RegExp构造函数中的无效正则表达式字符串
    'no-irregular-whitespace': 2, //捕获无效的空格
    'no-iterator': 2, //消除阴影变量声明
    'no-label-var': 2, //禁止创建与范围内的变量共享名称的标签
    'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 消除 JavaScript 中使用带标签的语句
    'no-lone-blocks': 2, //消除脚本顶层或其他块中不必要的和可能混淆的块
    'no-mixed-spaces-and-tabs': 2, // 不允许使用混合空格和制表符进行缩进
    'no-multi-spaces': 2, // 禁止在逻辑表达式,条件表达式,声明,数组元素,对象属性,序列和函数参数周围使用多个空格
    'no-multi-str': 2, // 防止使用多行字符串
    'no-multiple-empty-lines': [2, { max: 1 }], // 最多一个空行
    'no-native-reassign': 2, // 不允许修改只读全局变量
    'no-new-object': 2, // 不允许使用Object构造函数
    'no-new-require': 2, // 消除new require表达的使用
    'no-new-symbol': 2, // 防止Symbol与new 同时使用的意外错误
    'no-new-wrappers': 2, // 杜绝使用String,Number以及Boolean与new操作
    'no-obj-calls': 2, // 不允许调用Math,JSON和Reflect对象作为功能
    'no-octal': 2, // 不允许使用八进制文字
    'no-octal-escape': 2, // 不允许字符串文字中的八进制转义序列
    'no-path-concat': 2, // 防止 Node.js 中的目录路径字符串连接无效
    'no-redeclare': 2, // 消除在同一范围内具有多个声明的变量
    'no-regex-spaces': 2, // 在正则表达式文字中不允许有多个空格
    'no-return-assign': [2, 'except-parens'], // 消除return陈述中的任务,除非用括号括起来
    'no-self-assign': 2, // 消除自我分配
    'no-self-compare': 2, // 禁止比较变量与自身
    'no-sequences': 2, // 禁止使用逗号运算符
    'no-sparse-arrays': 2, // 不允许稀疏数组文字
    'no-this-before-super': 2, // 在呼call前标记this/super关键字super()
    'no-throw-literal': 2, // 不允许抛出不可能是Error对象的文字和其他表达式
    'no-trailing-spaces': 2, // 不允许在行尾添加尾随空白
    'no-undef': 2, // 任何对未声明的变量的引用都会导致错误
    'no-undef-init': 2, // 消除初始化为undefined的变量声明
    'no-underscore-dangle': 2, // 标识符不能以_开头或结尾
    'no-unexpected-multiline': 2, // 不允许混淆多行表达式
    'no-unmodified-loop-condition': 2, // 查找循环条件内的引用,然后检查这些引用的变量是否在循环中被修改
    'no-unneeded-ternary': [2, { defaultAssignment: false }], // 不允许将条件表达式作为默认的分配模式
    'no-unreachable': 2, // 不允许可达代码return,throw,continue,和break语句后面还有语句。
    'no-unsafe-finally': 2, // 不允许return,throw,break,和continue里面的语句finally块
    'no-unused-vars': [2, { vars: 'all', args: 'after-used' }],
    // 消除未使用的变量,函数和函数的参数
    // vars: 'all' 检查所有变量的使用情况,包括全局范围内的变量。这是默认设置。 args: 'after-used'  只有最后一个参数必须使用。例如,这允许您为函数使用两个命名参数,并且只要您使用第二个参数,ESLint 就不会警告您第一个参数。这是默认设置。
    'no-useless-call': 2, // 标记使用情况,Function.prototype.call()并且Function.prototype.apply()可以用正常的函数调用来替代
    'no-useless-computed-key': 2, // 禁止不必要地使用计算属性键
    'no-useless-constructor': 2, // 在不改变类的工作方式的情况下安全地移除的类构造函数
    'no-useless-escape': 0, // 禁用不必要的转义字符
    'no-whitespace-before-property': 2, // 如果对象的属性位于同一行上,不允许围绕点或在开头括号之前留出空白
    'no-with': 2, //禁用with
    'no-var': 2, // 禁用var
    'one-var': [2, { initialized: 'never' }], // 强制将变量声明为每个函数(对于var)或块(对于let和const)范围一起声明或单独声明。 initialized: 'never' 每个作用域要求多个变量声明用于初始化变量
    'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 实施一致的换行
    'padded-blocks': [2, 'never'], // 在块内强制执行一致的空行填充
    'prefer-destructuring': ['error', { object: false, array: false }], // 此规则强制使用解构而不是通过成员表达式访问属性。
    'quotes': [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }],// avoidEscape: true 允许字符串使用单引号或双引号,只要字符串包含必须以其他方式转义的引号 ;allowTemplateLiterals: true 允许字符串使用反引号
    'radix': 2, //parseInt必须指定第二个参数
    'semi': [2, 'never'], // 不使用分号
    'semi-spacing': [2, { before: false, after: true }], // 强制分号间隔
    'space-before-blocks': [2, 'always'], // 块必须至少有一个先前的空间
    'space-before-function-paren': [2, 'never'], // 在(参数后面不允许任何空格
    'space-in-parens': [2, 'never'], // 禁止或要求(或)左边的一个或多个空格
    'space-infix-ops': 2, // 强制二元运算符左右各有一个空格
    'space-unary-ops': [2, { words: true, nonwords: false }],//  words: true  如:new,delete,typeof,void,yield 左右必须有空格 //  nonwords: false  一元运算符,如:-,+,--,++,!,!!左右不能有空格
    'spaced-comment': [2, 'always', { markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 注释开始后,此规则将强制间距的一致性//或/*
    'template-curly-spacing': [2, 'never'], // 不允许大括号内的空格
    'use-isnan': 2, //禁止比较时使用NaN,只能用isNaN()
    'valid-typeof': 2, //必须使用合法的typeof的值
    'wrap-iife': [2, 'any'], //立即执行函数表达式的小括号风格
    'yield-star-spacing': [2, 'both'], // 强制执行*周围 yield*表达式的间距,两侧都必须有空格
    'yoda': [2, 'never'],
    'prefer-const': 2, // 使用let关键字声明的变量,但在初始分配后从未重新分配变量,应改为const声明
    'object-curly-spacing': [2, 'always', { objectsInObjects: false }],// 不允许以对象元素开始和/或以对象元素结尾的对象的大括号内的间距
    'array-bracket-spacing': [2, 'never'] // 不允许数组括号内的空格
  }
}

猜你喜欢

转载自blog.csdn.net/code_dream_wq/article/details/128091168