Skip to content

ESLint配置 #98

@youngjuning

Description

@youngjuning

全局配置 ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

安装和使用

先决条件:Node.js (>=4.x), npm version 2+。

1、npm install eslint -g

ESLint是通过npm安装的,这里的-g选项代表全局,也就是说它不会把ESLint的可执行文件安装在你的项目文件夹或者说当前文件夹下。如果你没有设置这个-g选项的话,它会在你当前文件夹下安装ESLint可执行文件,那样就不是全局安装了。后面我们所有安装包都要用使用这个 -g 选项

2、eslint -v

安装完成之后,你可以先执行一下 eslint -v 这个命令来看一下eslint是否已经安装成功了,如果没有的话,你需要反复检查,直到确保eslint安装已经成功为止。

3、eslint --init

关于 eslint --init 可以不必执行,它主要的作用是在你当前文件夹下生成.eslintrc文件,但同时也会把eslint在你当前文件夹下重新安装一遍,并且如果你使用包的话,它还会要求必须要有 package.json 文件,总之会很麻烦。但如果你是第一次使用的话,我建议你可以执行一下试试,它主要提供3种预安装包:Google标准Airbnb标准Standard标准

这3个标准里,Google就是Google公司的标准,Airbnb是Airbnb公司的标准,Standard就是一些前端工程师自定的标准。目前来看,公认的最好的标准是Airbnb标准(互联网发展日新月异,永远是年轻人颠覆老年人,连Google都老了)。它对于ES6要求最严格,比如禁止使用var定义变量,必须使用let或者const等等。既然采用最新标准,当然就让你的代码一次性向最高标准看齐,省得以后麻烦。

扩展配置

所谓扩展配置就是使用别人配置好的配置,我们选用 Airbnb 标准

1、npm install eslint-config-airbnb -g

精彩的重头戏来了:看到漂亮的airbnb了吗?我们就里就是要安装Airbnb的标准了。注意-g,还是全局化安装。

3、 npm install eslint-plugin-jsx-a11y -g

a11y是accessibility(无障碍环境)的缩写,从第一个字母a到最后一个字母y,中间一共是11个字母,所以就叫a11y了,类似于i18n表示internationalization(国际化)一样。JSX主要是React会用到,虽然我们的项目里可能并不会用React,但是这个Airbnb标准必须要用到它,所以必须安装。

4、 npm install eslint-plugin-import -g

同上,Airbnb标准必需。是用来校验 import 的,比如不能加 .js 后缀

开发语言支持

前文说到 eslint 是一个完全插件化的东西,所以支持特定语言也很简单。,比如我们需要支持 react,那么我们直接安装 react 插件即可:npm install eslint-plugin-react -g

编写全局 .eslintc.* 文件

全局的 .eslintrc.json 文件则放在当前用户的根目录下,类Unix系统的当前用户目录是 ~,而Windows系统的话则是类似于 C:\Windows\Users\Username 这样的地方。

把以下代码放入 .eslintrc.json,就做好了你的全局ESLint配置文件。

{
  "extends": "airbnb",
  "plugins": [
    "react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  },
  "parser": "babel-eslint",
  "rules": {
    "eqeqeq": 0,
    "semi": [
      2, "never"
    ],
    "import/first": 0,
    "max-len": [
      1, {
        "code": 200
      }
    ],
    "no-unused-vars": 1,
    "global-require": 0,
    "prefer-destructuring": 0,
    "class-methods-use-this": 0,
    "react/no-unused-state": 1,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [1, {
      "extensions": [".js", ".jsx"]
    }]
  }
}

具体的自定义配置方法请参考 http://eslint.cn/docs/user-guide/getting-started#configuration

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions