ESLint

介绍

小试牛刀

新建一个文件夹
在终端执行 npm init 创建 package.json
安装eslint npm install --save-dev eslint@8(注意版本，版本太高可能报错)
创建eslint.config.js(这个是eslint的配置文件)，代码如下

js 复制代码

// eslint.config.js
module.exports = [
    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];

创建一个js文件，代码如下

js 复制代码

var data = '666'

这里data创建了，但是未使用，会报警告

在终端执行创建的js文件。让ESLint检查js文件中的代码
npx eslint test.js

上图可以看出，终端输出了当前的一个警告。data创建了但是没有使用。 7. ESLint规则配置。在eslint.config.js中有一个rules对象，可以在里面配置规则。也可以对现在的规则做出更改。"no-unused-vars": "off",

"off"：关闭规则，不检查未使用的变量。

"warn"：开启规则，将未使用的变量视为警告，不会导致构建失败。

"error"：开启规则，将未使用的变量视为错误，会导致构建失败。

配合VS Code中使用ESLint扩展插件

上面的例子中，只能在终端执行才能看到结果。开发过程中非常麻烦。ESLint扩展插件，可以实时校验，直接提示代码不规范的地方。

VS Code安装ESLint扩展插件

VS Code设置中配置ESLint开启

重新打开我们的js文件，就能看到一个提示(无效就重新打开VS Code)

悬浮到提示的效果

这里的提示就是我们在配置文件里面定义的规则

VS Code里完成保存自动修复ESLint规则报警

上面我们配置了ESLint是否作为格式化工具。同理，我们需要在设置的settings.json文件里面加上一行

js 复制代码

{
    "eslint.format.enable": true, // 开启eslint
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时，启动eslint修复
    }
}

回到js文件，定义一个规则，只允许单引号，当我们再次保存时，就会自动修复了。

Prettier

小试牛刀

创建文件夹，创建 package.json(不会参考上面)
安装Prettiernpm install --save-dev --save-exact prettier(--save-exact准确安装版本)
新建Prettier规则文件 .prettierrc.js 内容如下

js 复制代码

module.exports = {
  singleQuote: true, //使用单引号
};

新建测试js文件

js 复制代码

var data = "5555";

故意书写了一个双引号

在终端运行npx prettier test.js，输入结果如下：

可以看到输出的结果没有双引号了。

VS Code + Prettier 完成保存自动修复

在VS Code的设置中的settings.json中，添加下面两行json代码

js 复制代码

{
  "editor.formatOnSave": true, // 开启保存自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 设置prettier为默认格式化工具
}

重新打开刚才的js文件，保存就会自动修复了。

ESLint和Prettier两者的职能

ESLint和Prettier都是用于JavaScript代码风格检查和格式化的工具，但它们的功能略有不同。

ESLint是一个静态代码分析工具，它可以检查代码中的语法错误、潜在的错误、代码风格和安全问题等。ESLint可以通过配置文件来定义规则，以便在代码提交之前自动检查代码。

Prettier是一个代码格式化工具，它可以自动格式化代码，使其符合一致的风格。Prettier可以格式化JavaScript、CSS、HTML等代码，并且可以与ESLint集成使用。

虽然ESLint和Prettier都可以用于代码风格检查和格式化，但它们的目的略有不同。ESLint主要用于检查代码质量和安全问题，而Prettier主要用于确保代码风格的一致性。
简而言之

ESLint检查代码的语法，比如不能使用var，禁止使用console语句，禁止使用未定义的变量等

Prettier检查代码风格，比如不能使用双引号，代码前面留几个空格，代码结尾不要分号等

ESLint + Prettier

ESLint

介绍

小试牛刀

配合VS Code中使用ESLint扩展插件

VS Code里完成保存自动修复ESLint规则报警

Prettier

小试牛刀

VS Code + Prettier 完成保存自动修复

ESLint和Prettier两者的职能