eslint-config-jm

ESLint shareable config for the JD-JM JavaScript style guide (ES2015+ version).

安装

$ npm install eslint eslint-config-jm --save-dev 

使用方法

当 eslint-config-jm 安装完成后，你可以在 ESLint 配置文件 的 extends 部分添加字符串 eslingt-config-jm ，或是简单地写作 jm ，ESLint 将会自动帮您找到配置文件。

{
  "extends": "jm",
  "rules": {
    // 可添加自己的规则
  }
}

在工程中进行配置

基础配置

安装用于解析 module 的插件。

$ npm install babel-eslint eslint-loader --save-dev

在项目中找到 build/webpack.base.conf.js 文件，在 rules 中添加如下一段语句。

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

在根目录下添加 .eslintrc.js 文件，粘贴以下内容。

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    ecmaFeatures: {
      impliedStrict: true,
      jsx: true,
      modules: true
    }
  },
  env: {
    browser: true,
    node: true,
    commonjs: true,
    amd: true,
    es6: true
  },
  extends: 'jm' // 核心
}

之后只要启动 node 服务就能在控制台打印错误信息了，如果想要编辑器级别的错误提示请看下一节 《在编辑器中配置》。

对于使用 vue-cli 2.0 构建的项目

基本操作与对于使用webpack进行配置的项目相同，但需要进行如下配置使 ESLint 能够解析 .vue 文件。

安装用于解析 .vue 的插件。

$ npm install eslint-plugin-html --save-dev

改写 build/webpack.base.conf.js 的 eslint 规则，监视 .vue 文件。

{
  test: /\.(js|vue)$/,
  ...
}

改写 .eslintrc.js 文件，添加一个新的属性

{
  plugins: ['html'],
  ...
}

对于使用 vue-cli 3.0 构建的项目

由于 vue-cli 3.0 中删除了 webpack.conf.js，前面两段教程不再适用，我们将在 package.json 中配置项目。

安装 vue 的 ESLint 插件

$ npm install babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint --save-dev

由于 ESLint 是默认启用的，我们只需在 package.json 中添加几段代码即可。

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "jm"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  }
},
...

在编辑器中配置

在使用的编辑中进行配置，编辑器会直接对不符合规范的代码进行标红，方便开发者在编码时就能快速定位错误。

Visual Studio Code

• 进入扩展中心安装ESLint

• 配置vscode，编辑 setting.json ，在末尾添加下面语句

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "html"
],

IntelliJ Idea

• 配置idea，file -> settings -> 搜索eslint -> ESLint，勾选 Enable，其他默认，保存。

• 搜索javascript，找到 Languages & Frameworks 下的javascript，选择javascript版本为 ECMAScript 6，使IDEA支持ES6语法

• 搜索javascript，找到 Code Style 下的javascript，使用两个空格作为缩进。