eslint

更新时间:2023-12-13阅读整篇大约6分钟

前言

Eslint是一个专注于js代码规范的模块，用于检查项目的代码中不符合规范的地方，并给出相应的警告或者报错。它存在着很多额外的扩展包，去支持比如React和Vue中的代码等等

npm包

通过 npm i eslint -g 全局安装,对于eslint，日常项目中都会带有eslint依赖，所以可以凭自己意愿全不全局安装,全局安装可以在命令行中直接使用eslint，否则需要通过npx eslint 的方式来运行eslint，eslint 需要一个创建配置文件，否则无法进行检测，如果不提供则会报错。

ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:
 
 npm init @eslint/config
 
ESLint looked for configuration files in /Users/haowen.li1/eslint——prettier测试 and its ancestors. If it found none, it then looked in your home directory.
 
If you think you already have a configuration file or if you need more help, please stop by the ESLint Discord server: https://eslint.org/chat

如果项目本身存在.eslintrc文件可以跳过这一步，否则需要创建一个配置文件.eslintrc.js，通过命令npx eslint --init或者自己手动创建

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",//这个可以是一个数组，extends是已经配置好的规则，后面的extends会覆盖前面的extends。
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        //这里我们可以添加自己的规则
    }
}

然后我们创建一个用于测试的js文件

// eslint_test.js
var a = 1
      const test_2 = "test"
   console.log('clg');

有了.eslintrc文件之后，就可以通过命令eslint ./eslint_test.js来检查文件

可以看到如果是默认的eslint配置，只能检测出最基本的问题，如果想要更严格的检测规则，可以通过rules选项来配置自己的规则

0是忽略，1是警告，2是报错

//.eslintrc.js
    "rules": {
        "quotes": 2,//这些配置想也可以是一个数组quotes: ['error', 'single'],具体可以看官方文档
        "semi": 1,
        "no-console": 1,
        "space-before-function-paren": 0,
        "no-var": 2,
}

配好规则之后再次进行检测

这里可以看到控制台也给出建议了，让我们可以使用--fix命令来进行修复

shell

eslint eslint_test.js --fix

可以看到对于一些修复不了的错误，依然会进行警告，但是对于一些可以进行修复的错，比如单引号变为双引号，他会帮我们进行修正

对比一下之前的js文件

// eslint_test.js
var a = 1
      const test_2 = "test"
   console.log('clg');

执行完成后，js文件的内容就变为下面这样了

let a = 1;
      const test_2 = "test";
   console.log("clg");

vscode插件

vscode插件的eslint只是为了方便自己开发

通过下载eslint插件，可以让我们写代码的时候就能直接看到错误，不需要我们执行eslint检查命令，vscode插件可以单独配置格式，但是如果项目中存在.eslintrc文件那么会优先以项目中的配置文件为主

我们还可以在setting中增加一些设置，让我们每次保存文件的时候，自动改正(需要项目中存在eslint，如果是react/vue还需要下载额外的eslint包)

json

//开启自动修复
"editor.codeActionsOnSave": {
  "source.fixAll.eslint":true
},

同时需要开启这两个功能(setting界面搜“格式化”)

下面给出一个示例

//修复之前的代码
var a = 1
const test_2 = "test";
console.log('clg');

eslint规则

json

 "rules": {
        "quotes": 2,
        "semi": 1,
        "no-console": 1,
        "space-before-function-paren": 0,
        "no-var": 2,
    }

保存文件之后，可以看到他按照我们预期的格式帮助我们进行了修改

let a = 1;
const test_2 = "test";
console.log("clg");

目前我尝试寻找一种自动保存后自动格式化的方式，但是目前还并未有有效的解决方案，只能通过Ctrl + S来触发?保存从而格式化文件(比较疑惑的一个点是，自动保存和Ctrl + S走的流程不一样？)