玩转EsLint

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

还是放个中文的介绍吧～

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

简单的说，eslint就是一个能够帮我们检查我们代码的格式、语法，从而来规范前端开发团队在开发流程中的代码。

开始使用

安装在项目本地

如果你想让 ESLint 成为你项目构建系统的一部分，我们建议在本地安装。你可以使用 npm：

$ npm install eslint --save-dev
复制代码

紧接着你应该设置一个配置文件：

$ ./node_modules/.bin/eslint --init
复制代码

之后，你可以在你项目根目录运行 ESLint：

$ ./node_modules/.bin/eslint yourfile.js
复制代码

或者你可以使用npx来运行 ESLint Instead of navigating to ./node_modules/.bin/ you may also use npx to run eslint:

$ npx eslint
复制代码

全局安装

如果你想使 ESLint 适用于你所有的项目，我们建议你全局安装 ESLint。你可以使用 npm：

$ npm install -g eslint
复制代码

紧接着你应该设置一个配置文件：

$ eslint --init
复制代码

之后，你可以在任何文件或目录运行 ESLint：

$ eslint yourfile.js
复制代码

.eslintrc配置

运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建。你可以在 .eslintrc 文件中看到许多像这样的规则：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}
复制代码

这里，"semi"指的是分号，如果你的代码语句缺少分号，则报错。"always"表示总是需要分号。具体的配置项可以到ESLint官网查看。

你可以直接在.eslintrc这里面配置自己项目的rules，但我们也可以直接使用现在比较火的代码规范 Airbnb's javascript style guide 。

Airbnb's javascript style guide

我喜欢使用Airbnb's javascript style guide 作为校验javascript的规则。Airbnb的规范是很火的代码规范。

github.com/airbnb/java…

For Chinese version

github.com/lin-123/jav… .

Important: 强烈推荐添加 eslint-config-airbnb 到你的ESLint. 更多信息和配置请访问 www.npmjs.com/package/esl… .

使用 eslint-config-airbnb

我们需要安装正确版本的包，以下命令可以查看

npm info "eslint-config-airbnb@latest" peerDependencies
复制代码

当然，可以直接

npm i eslint-config-airbnb  
复制代码

如果安装上面遇到问题，建议访问官网.

安装好之后，添加 "extends": "airbnb" 到你的.eslintrc.

{   "extends": "airbnb",
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}
复制代码

如果你碰到你不喜欢、或者不适用当前项目的规范规则，你可以选择屏蔽掉。像这样。

{   "extends": "airbnb",
    "rules": {
      "import/prefer-default-export": 0,
      "jsx-a11y/href-no-hash": 0,
      "react/forbid-prop-types": 1,
      "react/require-default-props": 1,
      "react/jsx-no-bind": 0,
      "jsx-a11y/rule-name": 0,
      "react/prop-types": 0,
      "jsx-a11y/click-events-have-key-events": 0,
      "jsx-a11y/no-static-element-interactions": 0,
      "react/destructuring-assignment": 0,
      "jsx-a11y/anchor-is-valid": 0,
      "react/no-unescaped-entities": 1,
      "react/react-in-jsx-x": 0,
      "react/react-in-jsx-scope": 0
    }
}
复制代码

• "off" or 0 - 关闭规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为1)

配置IDE

• VS code 需要安装插件 ESLint ，直接在extensions里面搜索，安装后重启编辑器即可。
• Atom 需要安装插件 linter, linter-eslint, linter-ui-default .