ESLint的使用

介绍

• ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误
• ESLint中文文档
• 使用webpack模式的安装的vue-cli脚手架，可以选择一起安装ESLint，当然也可以自己单独安装使用

安装

• 本地安装

  # 安装
  npm install eslint --save-dev
  # 设置配置文件
  ./node_modules/.bin/eslint --init
  # 运行
  ./node_modules/.bin/eslint yourfile.js
  

• 全局安装

  # 安装
  npm install -g eslint
  # 设置配置文件
  eslint --init
  # 运行
  eslint yourfile.js
  

配置

• .eslintrc 文件是进行规则的配置文件，三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则

  • "off" or 0 - 关闭规则
  • "warn" or 1 - 将规则视为一个警告（不会影响退出码）
  • "error" or 2 - 将规则视为一个错误 (退出码为1)

• 项目配置

  // http://eslint.org/docs/user-guide/configuring
  module.exports = {
    // 将 ESLint 限制到一个特定的项目，在配置文件里设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
    root: true,
    // 检测ES6代码
    parser: 'babel-eslint',
    parserOptions: {
      sourceType: 'module'
    },
    // 
    env: {
      browser: true,
    },
    // 消除no-undef影响
    globals: {
      _: true
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
      'vue',
      'html'
    ],
  // 参数说明： 参数1 ： 错误等级  参数2 ： 处理方式
    'rules': {
      'prefer-promise-reject-errors': 0,
      'space-unary-ops': 0,
      'no-unused-expressions': 0,
      'no-useless-return': 0,
      'standard/no-callback-literal': 0,
      'import/first': 0,
      'import/export': 0,
      'no-mixed-operators': 0,
      'no-use-before-define': 0,
      // 允许使用分号
      'semi': [0, 'never'],
      // 允许使用==
      'eqeqeq': 0,
      // 缩进使用不做限制
      'indent': 0,
      // 允许使用tab
      'no-tabs': 0,
      // 函数圆括号之前没有空格
      'space-before-function-paren': [2, "never"],
      // 不要求块内空格填充格式
      'padded-blocks': 0,
      // 不限制变量一起声明
      'one-var': 0,
      // debugger使用
      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
      // 开发模式允许使用console
      'no-console': 0,
      // 条件语句中复制操作符需要用圆括号括起来
      'no-cond-assign': [2, 'except-parens'],
      // 允许使用条件表达式使用常量
      'no-constant-condition': 0,
      // 单行可忽略大括号，多行不可忽略
      'curly': [2, 'multi-line'],
      // 不允许使用var变量
      'no-var': 2,
      // 不允许出现多个空格
      'no-multi-spaces': ["error", { ignoreEOLComments: true }],
      'camelcase': 0,
      // 对象字面量的键值空格风格
      'key-spacing': 2,
      // if语句包含一个return语句， else就多余
      'no-else-return': 2,
      // 建议将经常出现的数字提取为变量
      'no-magic-numbers': [0, {ignoreArrayIndexes: true}],
      // 不允许重复声明变量
      'no-redeclare': [2, {builtinGlobals: true}],
      // 立即执行函数风格
      'wrap-iife': [2, 'inside'],
      // 不允许圆括号中出现空格
      'space-in-parens': [2, 'never'],
      // 确保运算符周围有空格
      'space-infix-ops': 2,
      // 强制点号与属性同一行
      'dot-location': [2, 'property'],
      // 强制单行代码使用空格
      'block-spacing': [2, 'always'],
      // 约束for-in使用hasOwnProperty判断
      'guard-for-in': 0,
      // 采用one true brace style大括号风格
      'brace-style': [2, '1tbs', {'allowSingleLine': true}],
      // 统一逗号周围空格风格
      'comma-spacing': [2, {'before': false, 'after': true}],
      // 禁止出现多个空行
      'no-multiple-empty-lines': [2, {'max': 1, 'maxEOF': 2}],
      // 允许箭头函数不使用圆括号
      'arrow-parens': 0,
      // 规范generator函数的使用
      'generator-star-spacing': [2, {'before': false, 'after': true}],
      // 要求在块级
      'lines-around-comment': [2, {'beforeBlockComment': true, 
      							 'afterBlockComment': false, 
                                   'beforeLineComment': true, 
        							 'afterLineComment': false}
                              ]
    }
  }