Vue.js-cli配置eslint

概述：　

　　ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

特点：

所有都是可拔插的

• 内置规则和自定义规则共用一套规则 API
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API
• 额外的规则和格式化方法能够在运行时指定
• 规则和对应的格式化方法并不强制捆绑使用

每条规则:

• 各自独立
• 可以开启或关闭（没有什么可以被认为“太重要所以不能关闭”）
• 可以将结果设置成警告或者错误

另外:

• ESLint 并不推荐任何编码风格，规则是自由的
• 所有内置规则都是泛化的

项目:

• 通过丰富文档减少沟通成本
• 尽可能的简单透明
• 相信测试的重要性

配置：

　　全局安装:

　　　　cnpm install -g eslint

　　初始化：

　　　　eslint --init　　

　　　　初始化后按照提示安装

 　　　　npm install --save setimmediate

　　配置：Build/webpack.base.conf.js

rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]

　　文件配置

　　　　初始化后按照提示安装（插件）

　　　　cnpm install eslint-friendly-formatter

　　　　cnpm install eslint-loader

　　安装兼用vue

　　　　cnpm install eslint-plugin-html

　　　　.eslintrc.js 添加声明vue使用

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

Eslint报错错误统计：

enlint 有很多的rules，为了改变rule的设置，可以设置rule ID等同于一些规则属性：如
　　"off" or 0 关闭规则
　　"warn" or 1 打开规则，出现警告提示
　　"error" or 2 打开规则，出现错误提示

参数说明：
　　参数1 ： 错误等级
　　参数2 ： 处理方式

1. 结尾分号：

　　　　"semi": ["error", "always"]     

　　　　错误信息： semi  Missing semicolon 结尾没有‘;’

　　2.单/双引号

　　　　"quotes": ["error", "double" ],   

　　　　"quotes": ["error", "single" ],   

　　　　错误信息：quotes  Strings must use doublequote引用字符串必须使用双引号

　　3.隔断限制（还没弄清楚）

　　　　"linebreak-style": ["error", "" ],  

　　　　错误信息：

　　4.缩进限制：

　　　　"indent": ["error",4],      

　　　　错误信息：

　　5.函数参数不能重复

　　　　"no-dupe-args": ["error", 2]  

　　　　错误信息：Parsing error: Argument name clash 解析错误：参数名称冲突

参考：https://www.cnblogs.com/luxiaoxiao/p/6432788.html

官网：http://eslint.cn/

转载于:https://www.cnblogs.com/syh119/p/8686934.html