项目中完整的使用eslint检查代码风格过程

遇到的bug：如果vscode的eslint插件更新到最新2.4.4版本，有可能导致eslint版本不起作用，所以可以选择不更新版本，还有其他什么办法解决可以留言。

如何在创建项目后使用eslint，比如vue项目，uniapp项目，ESLint：用来规范或者约束代码，例如引号用单引号还是双引号 ，代码结尾是否要加分号，定义变量是否被调用了等等。以下是整个过程。

1.如果项目中没有page.json文件，请先初始化一个page.json文件，该文件会显示所有安装的依赖列表以及项目情况。在项目目录下进入cmd命令窗口，执行：npm init -y，如下：

 

2.自行建立项目，如用vue-cli快速建立vue项目，用hbuildX建立uniapp项目，详细步骤自行在网上搜索。

3. 先安装eslint依赖，再安装vscode的插件

安装eslint插件：

// 全局安装
npm i -g eslint

 再初始化eslint配置

npm init @eslint/config

然后根据步骤提示根据自己的需求一步一步进行配置：

 第一步：通过上下键移动选择项，按回车键确定选择

第二步：

第三步：选都不是，也可以选vue.js，根据自己情况选

 

第四步：是否使用ts语法

 

第五步：用什么运行代码，选择node

 

第六步：希望配置文件采用哪种格式，选择js

第七步：是否直接下载eslint配置，选择是

 初始化完成后，就完成了文件的配置，如下

 我们先配置一下代码规则：更多的代码配置可以根据自己需求去网上查找。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    // 0是忽略，1是警告，2是报错
    "rules": {                              // ESLint 规则配置
        "quotes": 2,                        // 非双引号报错
        "semi": 1,                          // 无分号就警告
        "no-console": 0,                    // 有console.log就忽略
        "space-before-function-paren": 0    // 函数前空格忽略
    }
}

然后找一个js文件，去验证一下eslint是否起作用：

 

也可以执行eslint index.js去运行该文件，进行eslint检查，发现有一处错误，一处警告

也可以执行eslint index.js --fix进行代码修复，自动会补充分号，改成双引号。 

4.上述只是使用了eslint检查代码，但是报错却无法知道报的是什么错误，我们还需要借助vscode的插件去帮助我们找出是什么错误，我们可以安装vscode的eslint插件，去vscode的应用商店，安装eslint，如下： 

 

安装完，重启vscode，我们就发现鼠标放到报错代码中，就有了提示报的是什么错误：

 字符串必须使用双引号，少了分号

5.如果我们需要在保存时自动修正代码错误，可以把如下配置复制到vscode的setting.json中，可以去vscode左下角的设置中去搜索；

// 复制到 settings.json 中
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.formatOnSave": true, // 在保存时格式化文档
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.validate": [ // 检测语言
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact",
    "markdown"
  ],

6.如果是vue项目，直接使用eslint可能会报错，还需要安装一堆解析不同语法的依赖，如下图：