@soybeanjs/eslint-config

English | 中文

SoybeanJS 的 ESLint 扁平化配置预设，包含 prettier。

• 默认配置支持 JavaScript 和 TypeScript。
• 支持 Vue、React、ReactNative、Solid、Svelte 和 Astro。
• 使用 ESlint 和 Prettier 格式化 HTML、CSS、LESS、SCSS、JSON、JSONC、YAML、TOML、Markdown。

用法

安装

1pnpm i -D eslint typescript @soybeanjs/eslint-config

ESLint 配置文件

• 在 package.json 中添加 "type": "module"

• 创建配置文件 eslint.config.js

• 导入配置 @soybeanjs/eslint-config

1import { defineConfig } from '@soybeanjs/eslint-config';
2
3export default defineConfig({
4  // options
5});

[!NOTE] 查看 Options 获取更多细节。

VSCode 中的 ESLint 设置

1{
2  "editor.codeActionsOnSave": {
3    "source.fixAll.eslint": "explicit",
4    "source.organizeImports": "never"
5  },
6  "editor.formatOnSave": false,
7  "eslint.experimental.useFlatConfig": true,
8  "eslint.validate": [
9    // "javascript", // 默认支持
10    // "javascriptreact", // 默认支持
11    // "typescript",  // 默认支持
12    // "typescriptreact", // 默认支持
13    // "vue", // 默认支持
14    // 添加你想要检查和格式化的语言
15    "svelte",
16    "astro",
17    "html",
18    "css",
19    "json",
20    "jsonc",
21    "yaml"
22    "toml",
23    "markdown"
24  ],
25  "prettier.enable": false
26}

在package.json 中添加命令

1{
2  "scripts": {
3    "lint": "eslint . --fix"
4  }
5}

配置

interface Options

1interface Options {
2  /**
3   * 项目根目录
4   *
5   * @default process.cwd()
6   */
7  cwd: string;
8  /**
9   * 被忽略的 glob
10   */
11  ignores: string[];
12  /**
13   * 覆盖的规则
14   */
15  overrides?: FlatConfigItem['rules'];
16  /**
17   * 默认的Prettier配置
18   *
19   * @default
20   * ```json
21   * {
22   *   "printWidth": 120,
23   *   "singleQuote": true,
24   *   "trailingComma": "none",
25   *   "arrowParens": "avoid",
26   *   "htmlWhitespaceSensitivity": "ignore"
27   * }
28   * ```
29   */
30  prettierRules: PartialPrettierExtendedOptions;
31  /**
32   * 是否使用 prettierrc 进行 prettier 配置
33   *
34   * 如果为 true，prettierrc 中的规则将会覆盖默认规则
35   *
36   * @default true
37   */
38  usePrettierrc: boolean;
39
40  /**
41   * 格式化器
42   * @default 默认支持的格式化器
43   * {
44   *  "html": true,
45   *  "css": true,
46   *  "json": true,
47   * }
48   */
49  formatter: {
50    html?: boolean;
51    css?: boolean;
52    json?: boolean;
53    markdown?: boolean;
54    yaml?: boolean;
55    toml?: boolean;
56  };
57  vue?: VueOptions | boolean;
58  react?: RuleBaseOptions | boolean;
59  'react-native'?: RuleBaseOptions | boolean;
60  solid?: RuleBaseOptions | boolean;
61  svelte?: RuleBaseOptions | boolean;
62  astro?: RuleBaseOptions | boolean;
63}
64
65type RuleBaseOptions<T = NonNullable<unknown>> = T & {
66  /**
67   * 需要被检测的文件
68   */
69  files?: string[];
70};
71
72type VueOptions = RuleBaseOptions<{
73  /**
74   * Vue 版本
75   *
76   * @default 3
77   */
78  version?: 2 | 3;
79}>;

感谢

灵感来自以下项目：

• Antfu's eslint-config
• Sxzz's eslint-config