代码检查利器——ESlint

介绍

ESLint 是一个开源的 JavaScript 代码检查工具。

可以静态分析、检查、规范代码的风格，检查不规范的代码，并提示做出更改。

初心是让程序员可以创建自己的检测规则。当然，ESLint 也内置了一些规则。

目标是保证代码的一致性和避免错误。

下面，让我们进入eslint的使用：

基本使用

安装

使用 npm 安装 ESLint：

npm install eslint --save-dev

接下来完成eslint的配置：

• 7.2.0版本eslint

// 进入初始配置流程
npx eslint --init

• 最新版本eslint

// 进入初始配置流程
npm init @eslint/config

这里我使用的是最新版本eslint

问答选择配置流程如下：

上图选择了检查语法、发现问题、修改代码风格选项。

上图选择了不检查模块导入方式。

如图不使用框架。

不使用ts。

选择浏览器运行环境。

选择使用流行的风格。

使用js配置文件

安装相应的依赖包

检查js文件

问题代码如下：

const name = 'lisi';

function fn () {
  console.log(1);

      console.log(2);
}
fn(

a()

执行检查命令

npx eslint ./case.js 

检查出了语法错误。

修改代码：

fn( ---> fn()

再次执行检查命令：

命令跟上--fix，再次执行

npx eslint ./case.js --fix

--fix的作用：

• 指示 ESLint 试图修复尽可能多的问题
• 只针对实际文件本身，而且剩下的未修复的问题才会输出

以下是修复完成的规范代码：

function fn () {
  console.log(1)
  console.log(2)
}
fn()

与git hooks一起使用

安装相关插件：

npm install husky --save-dev
npm install --save-dev lint-staged

// package.json中配置
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

git commit时触发pre-commit钩子，运行lint-staged命令，对*.js执行eslint命令。eslint要提前配置好。