js代码规范之Eslint安装与配置详解

什么是 ESLint

ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。

一、Eslint安装

1.全局安装

如果你想使 ESLint 适用于你所有的项目，建议全局安装 ESLint

$ npm install -g eslint

初始化配置文件

$ eslint --init

2.局部安装

$ npm install eslint --save-dev

初始化配置文件

$ ./node_modules/.bin/eslint --init

3.webpack中配置eslint

需要安装eslint-loader解析.eslint文件

{    test: //.(js|jsx|mjs)$/,    enforce: 'pre',    use: [     {      options: {       formatter: eslintFormatter,       eslintPath: require.resolve('eslint'),             },      loader: require.resolve('eslint-loader'),     },    ],    include: paths.appSrc, //也可以用exclude排除不需要检查的目录或者用.eslintignore},

二、ESlint配置

1.配置文件类型与优先级顺序

2.plugin属性

ESLint 支持使用第三方插件（以eslint-plugin-开头的npm包），在使用插件之前，必须使用 npm 安装。如eslint-plugin-react、eslint-plugin-vue等

module.exports = {  "plugins": [    "react"  ],  "extends": [    "eslint:recommended"  ],  "rules": {    "no-set-state": "off"  }}

3.extends属性

一个配置文件可以被基础配置中的已启用的规则继承。可以使用以下规则继承：

（1）"eslint:recommended"

继承Eslint中推荐的（打钩的）规则项

module.exports = {  "extends": "eslint:recommended",  "rules": {      }}

（2）使用别人写好的规则包（以eslint-config-开头的npm包），如eslint-config-standard

module.exports = {  "extends": "standard",  "rules": {      }}

（3）使用Eslint插件中命名的配置

module.exports = {  "plugins": [    "react"  ],  "extends": [    "eslint:recommended",    "plugin:react/recommended"  ],  "rules": {    "no-set-state": "off"  }}