JSPM – eslint-config-ali@3.0.0

Package Exports

eslint-config-ali
eslint-config-ali/es5
eslint-config-ali/es6
eslint-config-ali/react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-config-ali) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Usage

1.依赖

本包依赖 eslint, eslint-plugin-import, eslint-plugin-react，需作为peerDependencies安装。使用如下命令，可以查看最新的依赖版本：

npm info "eslint-config-ali@latest" peerDependencies

另外，由于eslint在3.0.0版本后要求执行环境node版本大于4，需保证node版本>=4。

2. 安装

OSX/Linux用户可执行如下命令安装：

(
  export PKG=eslint-config-ali;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Windows用户可自行手动安装依赖，或使用install-peerdeps cli安装：

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-ali

以上两种安装方式都会执行类似如下的命令，安装eslint-config-ali和相关依赖：

npm install --save-dev eslint-config-ali eslint@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.#

3. 新建 `.eslintrc` 文件

在项目根目录创建.eslintrc文件（一个json格式的eslint配置文件），向文件中写入"extends": "eslint-config-ali"以使用本包提供的eslint配置：

对ES6项目

{
  "extends": "eslint-config-ali",
}

对react项目(es6环境)

{
  "extends": "eslint-config-ali/react",
}

对ES5项目

{
  "extends": "eslint-config-ali/es5",
}

4.配置IDE

对IDE进行一些配置，即可在编码时实时显示eslint报错信息：

Atom: 安装linter和linter-eslint插件。报错有链接可查看详情，推荐使用。

VSCode: 安装Eslint插件。

webstrom：在Preferences里搜索eslint，按下图配置： screenshot EsLint package要选当前项目目录下node_modules中的eslint。

其他IDE的配置请查看官网的integrations。

5. 配置你的 `.eslintrc`

你可能需要根据项目情况对.eslintrc做些修改，下面是一份示例：

{
  "extends": "eslint-config-ali",
  "parser": "babel-eslint",
  "env": {
    "mocha": true
  },
  "globals": {
    "GLOBAL": true
  },
  "rules": {
    "max-len": 0
  }
}

简介一下示例文件中出现的几个常用配置项：

extends: 继承一组规则集。"extends": "eslint-config-ali", 表示继承eslint-config-ali包中定义的规则
parser: 设置eslint的解析器。eslint默认使用espree作为解析器，可以使用babel-eslint解析器代替，推荐在使用babel的项目中使用。需要先安装babel-eslint: npm install babel-eslint --save-dev
env: 设置代码的环境。不同环境下eslint会允许使用不同的全局变量，eslint-config-ali默认已开启browser,node,jquery环境
globals: 设置全局变量。在这里写上项目中用到全局变量，否则代码中会报no-undef错误
rules: 设置规则。在这里写的规则会覆盖extends的规则，查看eslint可用的规则

更多参数说明请看eslint官网的Configuring ESLint

6. 命令行

eslint支持一些命令行操作，可以执行扫描、格式化输出扫描结果、自动修复错误等功能。

比如以下几条常用的eslint命令，可以写在package.json的scripts中：

// package.json
{
    ...
    "scripts": {
      "eslint": "node_modules/.bin/eslint src/",
      "eslint-output": "node_modules/.bin/eslint -f html src/ > eslint-result.html",
      "eslint-fix": "node_modules/.bin/eslint --fix src/"
    },
    ...
}

eslint src/ 对src目录下的文件执行eslint，可以使用--quiet参数只输出error不输出warn
eslint --fix src/ 对src目录下的文件可修复的lint错误进行修复，可修复的属性见这里，后面有小扳手的都是修复的属性。注意：修复缩进时可能会有问题（如空格、tab混用时），所以建议每次使用--fix命令后diff一下文件确认是否有问题。
eslint -f html src/ > eslint-result.html 对src目录下的文件执行eslint，并将结果格式化为html输出到当前目录的eslint-result.html，此命令可以查看项目整体的eslint报错情况，线上也将使用此命令进行扫描
注意：eslint命令默认只处理后缀为.js的文件，其他后缀的文件需要用命令行的--ext参数指定，目前不支持在配置文件中设置扩展名，只能在命令行中使用--ext参数指定，比如对于使用.jsx做后缀的项目上面三条命令要变为：

node_modules/.bin/eslint --ext .jsx,.js src/
node_modules/.bin/eslint --fix --ext .jsx,.js src/
node_modules/.bin/eslint -f html --ext .jsx,.js src/ > eslint-result.html

注意：由于npm install本包后会将eslint安装到工程目录，以上命令都使用node_modules/.bin/eslint而不是直接用eslint命令。如果想使用eslint命令，需要npm install -g eslint-config-ali安装到全局。但是写在package.json中的命令还是建议写成node_modules/.bin/eslint，因为无法保证其他人全局安装了eslint和相关的config。

更多的命令行操作请看官网的command-line-interface

Learn more

关于eslint的更多信息请看官网，所有的报错规则在官网或谷歌直接搜索规则名，即可看到详细解释哦。

eslint-config-ali