安装 ESlint

Eslint官方链接
腾讯云的Eslint说明,较好用
eslint-plugin-vue(Vue相关的Eslint)

npm install -g eslint
eslint --init

配置规则

  • root :true, // 以当前目录为根目录,不再向上查找 .eslintrc.js
  • env : 运行的环境
  env:{  
        browser: true,
        node: true,
        commonjs: true,
        es6: true
    }
  • extends: ['eslint:recommended'], // 继承,使用值作为基础配置,可以在rules中覆盖。当前值为eslint推荐的规则

         'extends': [
       'plugin:vue/essential',
       '@vue/standard'
     ]
    
  • parserOptions:JavaScript 选项。

    "parserOptions": {

      // ECMAScript 版本
     "ecmaVersion":6,
     "sourceType":"script",//module
     // 想使用的额外的语言特性:
     "ecmaFeatures":  {
         // 允许在全局作用域下使用 return 语句
         "globalReturn":true,
         // impliedStric
         "impliedStrict":true,
         // 启用 JSX
         "jsx":true
      }
    }
    
  • globals // 全局变量

     globals: { // 允许在代码中使用全局变量
           location: true,
           setTimeout: true
       }
    
  • rules:开启规则和发生错误时报告的等级,规则的错误等级有三种:

       ●  0 或'off':关闭规则。
       ●  1 或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
       ●  2 或'error':打开规则,并且作为一个错误(退出码为1,检查不通过)。
    

如下方indent规则说明:
值可以是 0、1、2、'off'、‘warn’、'error'、或者数组,
数组时,[par1,par2,par3],par1对应上面的值,par2是这个选项的值,par3是附带的参数

indent
强制一致的缩进

  • off : 关闭规则
  • tab :以制表符缩进
  • [2,4, {"SwitchCase":1}] : 打开规则,并且作为一个错误,检查不通过。检查规则为 4个空格,

常见规则

accessor-pairs
在对象中强制使用getter/setter 对(不能仅使用setter)

arrow-spacing
箭头符号前后都要空格

"arrow-spacing":[2, {"before": true, "after": true}]

indent
强制一致的缩进,默认为4 个空格

no-console
禁止调用console对象的方法

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off' //当环境是产品时报错,否则允许调用console

no-debugger
此规则不允许debugger声明

import/first
import 关键字需要放在文件头

spaced-comment
要求注释有空格

space-before-function-paren
函数括号前强制要求有间距

always:(默认)需要一个空格
never:不允许任何空格
 "space-before-function-paren": ["error", "always"], //(默认)需要一个空格
// or
"space-before-function-paren": ["error", {
    "anonymous": "always",
    "named": "always",
    "asyncArrow": "always"
}],

no-cond-assign
条件语句的条件中不允许出现赋值运算符

Vue相关规则

vue/max-attributes-per-line
多个特性的元素应该分多行撰写,每个特性一行

   "vue/max-attributes-per-line": ["error", {  // vue的属性必须每行一个
  "singleline": 1, // 一行显示几个属性
  "multiline": {
    "max": 1,
    "allowFirstLine": false //如果为true,则允许属性与该标记名称位于同一行,max=1,可以代替allowFitstLine
  }
}]

标签: none

添加新评论