ESLint(vue+webpack)配置

时间 2019-11-06 标签 eslint vue+webpack vue webpack 配置

1、ESLint

协同开发过程当中，常常感觉到来自代码检视的恶意。代码习惯不一致，看半天；竟然提交低级错误，个人天(╯‵□′)╯︵┻━┻！...研究了一番，决定使用ESLint来作代码规范检查。javascript

2、配置方式

JavaScript注释：经过JavaScript注释把配置信息嵌入代码中。
package.json：在package.json文件中的eslintConfig字段中指定配置。
配置文件：经过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息，ESlint会查找而且自动读取配置文件。

3、配置过程(配置文件)

安装相关npm包vue

yarn add eslint babel-eslint eslint-loader eslint-plugin-vue eslint-friendly-formatter --dev

增长文件
.eslintignore 用来配置不须要检查的文件(相似git的.gitignore)。java

.eslintrc.js 用来配置ESlint验证规则的配置文件。jquery

修改webpack配置文件webpack

module.exports = {
  module: {
    rules: [
      test: /\.(js|vue)$/,
      loader: "eslint-loader",
      enforce: "pre",
      //指定检查的目录
      include: [resolve(__dirname, 'src')],
      //eslint检查报告的格式规范
      options: {
        formatter: require("eslint-friendly-formatter")
      }
    ]
  }
}

4、配置文件详解

以.eslintrc.js为例

module.exports = {
  //一旦配置了root，ESlint中止在父级目录中查找配置文件
  root: true,
  //解析器
  parser: "babel-eslint",
  //想要支持的JS语言选项
  parserOptions: {
    //启用ES6语法支持(若是支持es6的全局变量{env: {es6: true}}，则默认启用ES6语法支持)
    //此处也可使用年份命名的版本号：2015
    ecmaVersion: 6,
    //默认为script
    sourceType: "module",
    //支持其余的语言特性
    ecmaFeatures: {
      //...
    }
  },
  //代码运行的环境，每一个环境都会有一套预约义的全局对象，不一样环境能够组合使用
  env: {
    es6: true,
    browser: true,
    jquery: true
  },
  //访问当前源文件中未定义的变量时，no-undef会报警告。
  //若是这些全局变量是合规的，能够在globals中配置，避免这些全局变量发出警告
  globals: {
    //配置给全局变量的布尔值，是用来控制该全局变量是否容许被重写
    test_param： true
  },
  //支持第三方插件的规则，插件以eslint-plugin-做为前缀，配置时该前缀可省略
  //检查vue文件须要eslint-plugin-vue插件
  plugins: ["vue"],
  //集成推荐的规则
  extends: ["eslint:recommended", "plugin:vue/essential"],
  //启用额外的规则或者覆盖默认的规则
  //规则级别分别：为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时，程序退出
  rules: {
    //关闭“禁用console”规则
    "no-console": "off",
    //缩进不规范警告，要求缩进为2个空格，默认值为4个空格
    "indent": ["warn", 2, {
      //设置为1时强制switch语句中case的缩进为2个空格
      "SwitchCase": 1,
      //分别配置var、let和const的缩进
      "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
    }],
    //定义字符串不规范错误，要求字符串使用双引号
    quotes: ["error", "double"],
    //....
    //更多规则可查看http://eslint.cn/docs/rules/
  }
}

使用JavaScript注释启用或禁止指定规则

/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...

层叠配置

ESlint支持层叠配置，检测文件的规则是其目录层级结构中全部.eslintrc文件的组合，当规则冲突的时候，离检测文件最近的规则优先。git

默认状况下，ESlint会沿着父级目录网上寻找配置文件，直到根目录。若是配置文件中有root: true，则ESlint会中止在父级目录中查找。es6

5、配置过程当中出现的问题

出现错误：Use the latest vue-eslint-parser。github

解决方法： 把parser: "babel-eslint"移动到parserOptions中。web

{
  //parser: "babel-eslint",
  parserOptions: {
    parser: "babel-eslint",
    //...
  }
}

问题缘由： eslint-plugin-vue中的不少规则都须要vue-eslint-parser检查<template>, vue-eslint-parser和babel-parser两者有冲突。npm

参考连接