eslint-config-jm/README.md

京东京麦前端eslint规范

# eslint-config-jm

> ESLint [shareable config][1] for the [JD-JM JavaScript style guide (ES2015+ version)][2].

## 安装

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

## 使用方法

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

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

## 在工程中进行配置

### 基础配置

安装用于解析 `module` 的插件。

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

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

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

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

~~~javascript
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` 文件。

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

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

~~~javascript
{
  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` 中添加几段代码即可。

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

## 在编辑器中配置

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

### Visual Studio Code

+ 进入扩展中心安装ESLint

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

~~~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，使用两个空格作为缩进。

[1]: https://cn.eslint.org/docs/developer-guide/shareable-configs.html "elint分享配置"
[2]: http://git.jd.com/JM-FE/jm-fe-code-standards "京东京麦前端代码规范"
[3]: https://cn.eslint.org/docs/user-guide/configuring "ESlint配置"
[4]: https://cn.eslint.org/docs/user-guide/configuring#extending-configuration-files "扩展设置"