初学Eslint，你很可能要踩的坑

Eslint安装

⚠️：Eslint安装可用必须是在node和npm环境

• 全局安装Eslint

npm install -g eslint

• 生成package.json文件

npm init

• 生成 eslintrc.js文件

eslint --init

⚠️：如果我们的项目没有package.json文件，此时报错就会提示需要执行命令npm init
执行命令完成后就会在根目录生成一个.eslintrc.js文件

• 准备一个test.js文件，来测试一下

function merge () {
  var ret = {};
  for (var i in arguments) {
    var m = arguments[i];
    for (var j in m) ret[j] = m[j];
  }
  return ret;
}
console.log(merge({a: 123}, {b: 456}))

• 执行命令
  eslint test.js

⚠️：此时会报一个警告

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

解决办法：在eslintrc.js中指定react版本，在eslintrc.js中添加settings即可

   settings: {
    react: {
      pragma: "React",
      version: "detect",
    },
  },

⚠️：再次执行命令此时又会报一个警告

Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

解决办法：安装react即可
npm install react

⚠️：再再次执行命令此时又会报问题😃，没有输出结果
解决办法：原因是没有指定配置文件。现在添加一个.eslintrc.js，使用内置配置

⚠️：再再再次执行命令。还是没有输出结果
解决办法：browser修改问false

  env: {
    browser: false,
    es2020: true,
  },

再执行，终于输出结果了

  10:1  error  'console' is not defined  no-undef
✖ 1 problem (1 error, 0 warnings)

这是因为 JavaScript 有很多种运行环境，比如常见的有浏览器和 Node.js，另外还有很多软件系统使用 JavaScript 作为其脚本引擎，比如 PostgreSQL 就支持使用 JavaScript 来编写存储引擎，而这些运行环境可能并不存在console这个对象。另外在浏览器环境下会有window对象，而 Node.js 下没有；在 Node.js 下会有process对象，而浏览器环境下没有。
所以在配置文件中我们还需要指定程序的目标环境：

  env: {
    node: true,
  },
  rules: {
    'no-console': 'off',
  },

再重新执行检查时，已经没有任何提示输出了，说明test.js已经完全通过了检查。

使用共享的配置文件

我们可以将定义好规则的.eslintrc.js文件存储到一个公共的位置，比如public-eslintrc.js：

module.exports = {
 env: {
   browser: false,
   es2020: true,
   node: true,
 },
 extends: "eslint:recommended",
 parserOptions: {
   ecmaFeatures: {
     jsx: true,
   },
   ecmaVersion: 11,
   sourceType: "module",
 },
 plugins: ["react"],
 rules: {
   "no-console": "off",
   indent: ["error", 2],
   quotes: ["error", "single"],
 },
 settings: {
   react: {
     pragma: "React",
     version: "detect",
   },
 },
};

然后将原来的.eslintrc.js文件改成这样：

module.exports = {
 extends: './public-eslintrc.js',
};

代码格式化

使用上述配置，将merge.js中的var ret = {};这一行前面多加一个空格。然后执行eslint test.js --fix，可以发现test.js文件被修改了，新添加的空格被去除了。我们可以利用这个特性来自动格式化项目代码，这样就可以保证代码书写风格的统一。

eslint如何忽略文件

解决方法：在压缩代码前后加上/* eslint-disable */，生效。

eslint结合webpack使用

1. 我们需要安装一个eslint-loader ,命令是npm install eslint-loader --save-dev
2. 安装好以后，我们要配置，一般情况下，我们会对JS文件进行检测，所以我们需要修改我们的webpack.config.js配置
   
3. 配置好以后，启动服务器npm run start,我们可以看到，它会帮我们执行一下eslint-loader，并且在终端告诉我们那里的代码是有问题的。
   -我们可以在webpack.config.js里的devServer里配置一个overlay参数
   
4. 这个配置好以后。当我们去运行webpack-dev-server去做打包的时候，一旦过程中出现代码规范问题，它会在浏览器上谈一个提示层，现在我们重新运行npm run start

 devServer: {
    //配置此静态文件服务器，可以用来预览打包后项目
    open: true, //启动服务后，自动打开浏览器
    inline: true, //打包后加入一个websocket客户端
    port: 9099, //端口号
    compress: true, //开发服务器是否启动gzip等压缩
    https: false,
    overlay: true, //在页面看eslint报错
  },

可能遇到的问题：

1. component definition is missing display name react/display-name eslint

const LoadableComponent = (component) => {
   return Loadable({
     loader: component,
     loading: ()=><div>Loading</div>
   })
 }

解决办法：在eslintrc.js 配置"react/display-name": "off"

参考文档

规则说明文档
ESLint 规则详解（一）
ESLint 规则详解（二）