了解ESlint和其相关操作小结

什么是ESlint？

ESlint是一款JavaScript的代码检查工具，它可以帮助我们提高代码质量，发现一些潜在的问题。ESlint使用插件化的架构，可以支持多种不同的检查规则，可以通过配置文件（.eslintrc文件）进行自定义规则的设置。

怎么使用ESlint

使用ESlint有如下基本步骤：

1. 安装ESlint

可以使用npm进行安装：

npm install eslint --save-dev

2. 配置

ESlint的配置文件通常为一个.eslintrc文件，其中包含了要使用的规则和其他配置项。

ESlint默认情况下会读取项目根目录下的.eslintrc.js，.eslintrc.yaml，.eslintrc.yml，.eslintrc.json，.eslintrc这些文件。

下面是一个简单的.eslintrc文件配置示例：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
    "no-console": "off",
    "indent": ["error", 2],
    "quotes": ["error", "single"]
  }
}

上面的配置文件开启了浏览器和ES6的环境支持，使用了eslint推荐的规则，关闭了no-console规则的检查，同时设置了indent和quotes规则的检查。

详细的配置项可以查看ESlint官网文档。

3. 运行

可以将ESlint配置为在编辑器中实时检查代码风格，或者在命令行使用以下命令进行检查：

./node_modules/.bin/eslint yourfile.js

ESlint还支持在运行时进行修复：

./node_modules/.bin/eslint --fix yourfile.js

ESLint的插件和规则

ESlint提供了很多的插件和规则可以使用，这些插件和规则可以帮助我们更好地发现潜在问题和提高代码质量。

插件

ESlint的插件以eslint-plugin-为前缀命名，可以通过npm进行安装，例如：

npm install eslint-plugin-react --save-dev

安装插件之后，在配置文件中可以进行如下的配置：

{
  "plugins": [
    "react"
  ]
}

规则

ESLint提供了很多的规则可以使用，规则可以分为三类：适用于JavaScript语法、适用于JSDoc文档和适用于代码约定。

例如使用eslint-plugin-react插件之后，可以进行如下的react规则配置：

{
  "rules": {
    "react/jsx-uses-vars": "error"
  }
}

上面的配置中，启用了react中检查使用未定义的变量的规则。

示例1

未使用ESlint代码：

function add (a,b) {
  return a+b
}

使用ESlint代码：

function add (a, b) {
  return a + b;
}

运行ESlint的--fix命令之后，会自动将未按照规则缩进、代码结尾没有分号等问题进行修复。

示例2

未使用ESlint代码：

const a=1
console.log(a)

使用ESlint代码：

const a = 1;
console.log(a);

运行ESlint的--fix命令之后，会自动将变量名与赋值之间没有空格、缺少结尾分号等问题进行修复。

以上就是对ESlint的相关操作小结。