Soulda-eslint NPM

当前项目更改Eslint配置

1、更改vue文件相关的配置

找到位于 src\configs\vue.ts 的配置文件，并确保它包含以下代码：

const vueCustomRules: Rules = {}

2. 更改 JavaScript 文件相关的配置

找到位于 src\configs\javascript.ts 的配置文件，然后确保它包含以下代码：

export const javascript: FlatESLintConfigItem[] = [
    rules: {}
]

3. 更改 Prettier 配置

确保您的 Prettier 配置位于 prettier.config.js 文件中（webstorm推荐此方法）。或者更改vscode config 的prettier（vscode推荐此方法）

4. 更改 TypeScript 文件相关的配置

找到位于 src\configs\typescript.ts 的配置文件，然后确保它包含以下代码：

export const typescript: FlatESLintConfigItem[] = [
    rules: {}
]

本地项目引用 ESLint 步骤

现在，让我们开始配置本地项目以使用 ESLint。请按照以下步骤进行操作：

1、本地项目环境配置

1.1、安装 ESLint 插件

确保您已在 VSCode 中安装了 ESLint 插件。您可以在 VSCode 的扩展市场中搜索 "ESLint" 并安装它。这个插件将帮助您检测和修复代码中的 ESLint 错误。

1.2、检查 package.json 中的 "type" 字段

在您的项目的 package.json 文件中，确保已设置 "type" 字段为 "module"，以指示您的项目是 ES 模块类型的项目。这对于正确加载 ESLint 配置非常重要。

如果您的项目没有 "type" 字段，您可以手动添加它，如下所示：

2、项目文件配置

2.1、 package.json引入npm包

首先，您需要安装 soulda-eslint 作为开发依赖项，确保您的 Node.js 版本大于等于 16.14。

pnpm i -D soulda-eslint eslint

2.2、创建 eslint.config.js 文件

在您的项目根目录中创建一个名为 eslint.config.js 的文件，并将以下代码复制到文件中：

import { soulda } from "soulda-eslint";

export default soulda(
    [
        /* 如果需要自定义部分 ESLint 规则，请在此处添加规则 */
        {
            rules: {
                "unused-imports-unused-imports": "off",
            },
        },
    ],
    { vue: true, prettier: true },
);

2.3、配置 VSCode 设置

打开 VSCode，并在项目根目录中创建一个名为 .vscode 的文件夹（如果尚不存在），然后在其中创建一个名为 settings.json 的文件。将以下 JSON 配置添加到 settings.json 文件中：

{
    "editor.formatOnSave": false,
    "eslint.experimental.useFlatConfig": true
}

常见问题和解决方案

问题 1: VSCode 仍未自动应用 ESLint 配置。

解决方案:
1. 确保 .vscode 文件夹和 settings.json 文件位于项目根目录中。
2. 检查 VSCode 设置，确保 "eslint" 与您的项目相关的文件类型都包含在 "eslint.validate" 数组中。
3. 重启 VSCode，以确保配置生效。

问题 2: ESLint 插件未在 VSCode 中启用。

解决方案:
1. 在 VSCode 中，按 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）打开用户设置。
2. 在搜索框中键入 "eslint"。
3. 确保 "Editor: Format On Save" 和 "Editor: Code Actions On Save" 选项已启用。

问题 3: 项目中仍然存在 ESLint 错误。

解决方案:
1. 确保您的 ESLint 配置文件 .eslintrc.js 或 eslint.config.js 配置正确，特别是自定义规则。
2. 执行 ESLint 检查：在项目根目录下执行 npx eslint . 或 npm run lint，并查看输出以了解错误信息。
3. 如果您使用了 Prettier，确保 Prettier 的配置文件 .prettierrc 或 prettier.config.js 也正确配置。