eslint 和 prettier 的作用就不多做介绍了，网上已经有很多资源了，这里直接说怎么配置它们。

eslint 已经更新到了 9.x 版本，但 vscode 似乎还没做支持，配置最新版的 eslint 并不生效（2024年8月22日）。但按照官网教程安装 eslint 却默认安装的是最新版本，因此走了许多弯路，所以在这里记录一下。

在确保有 package.json 文件后，我们先安装 8.57.0 版本的 eslint：

pnpm install eslint@8.57.0

然后安装 prettier：

pnpm install prettier

安装依赖包 eslint-plugin-prettier ：

pnpm install eslint-plugin-prettier@latest --save-dev

创建 .prettierrc.js 文件，并定义你想要的代码样式，例如：

module.exports = {
    semi: true, //强制在语句末尾使用分号
    singleQuote: true, //使用单引号而不是双引号来定义字符串
    printWidth: 120, //指定每行代码的最大字符宽度，超过这个宽度的代码将被换行
    useTabs: false, // 缩进不使用 tab，使用空格
    trailingCooma: "all", // 属性值 es5 表示在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    endOfLine: "auto",
};

创建 .eslintrc.js 文件，将下列代码复制进去：

const prettier = require('./.prettierrc.js');
module.exports = {
    root: true,
    extends: ['eslint:recommended'],
    parserOptions: {
        ecmaVersion: 'latest'
    },
    env: {
        browser: true,
        node: true
    },
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': ['warn', prettier]
    }
};

至此，配置就做完了。为了检查该配置能否生效，或检查若不能生效原因是为什么，可以使用如下命令去检查一个特定的文件：

npx eslint script.js

将 script.js 替换为你自己的文件名称，如果不能正常检查出里面的问题，可以看看报了什么错，再根据报错信息进行修改。

有时可能需要重启一下 VSCode 配置才能生效。