@zjutjh/eslint-config 0.7.0 → 0.7.2

package/README.md

@@ -1,9 +1,6 @@
-# `@zjutjh/eslint-config`
+# `@zjutjh/eslint-config` [![npm-version](https://img.shields.io/npm/v/%40zjutjh%2Feslint-config)](https://www.npmjs.com/package/@zjutjh/eslint-config)
 
-[![npm-version](https://img.shields.io/npm/v/%40zjutjh%2Feslint-config
-)](https://www.npmjs.com/package/@zjutjh/eslint-config)
-
-zjutjh 的 ESLint 配置，适用于 JS, TS, Vue3 项目。
+zjutjh 的 ESLint 配置，适用于 JS, TS, Vue3 等项目。
 
 ## 使用方式
 
@@ -27,83 +24,118 @@ import zjutjh from "@zjutjh/eslint-config";
 export default zjutjh();
 ```
 
-```ts
-// 添加定制化配置
-export default [
-  ...await zjutjh(),
-  {
-    name: "local/ignores",
-    ignores: [
-      "dist"
-    ]
-  }
-]
-```
-
-> [!TIP]
-> 在项目中调整配置时，如果对最终计算出的的配置有疑问，可以使用 [@eslint/config-inspector](https://github.com/eslint/config-inspector) 来调试配置。
-
-```ts
-// 覆盖原有配置
-export default [
-  ...await zjutjh({
-    overrides: {
-      vue: {
-        "vue/multi-word-component-names": "off"
-      }
-    }
-  })
-]
-```
-
-> [!WARNING]
-> 不要在数组内添加新的配置来修改原有配置，请使用函数提供的 overrides 属性来修改。
->
-> 在一个配置对象内，一条规则的生效需要声明出对应的插件。对于用户而言，在工厂函数 `zjutjh()` 之外声明规则，无法直接获知一条规则对应的插件是什么。
-> 所以函数开放了 `overrides` 入口来透传配置到内部的配置对象中。自定义的配置被带到合适插件的生效范围之下，并结合 JS 声明同名的对象属性来支持配置的覆盖。
-
 在 `package.json` 中添加如下命令。
 
 ```json
 {
   "scripts": {
-    "lint": "eslint"
+    "lint": "eslint ."
   }
 }
 ```
 
-在项目中运行即可。如果有提示按照依赖，请按照提示出的包名安装（应该安装到 `devDependencies`）。
+在项目根目录运行下面的命令，没有报错就算配置成功。
 
 ```sh
 $ npm run lint
 ```
 
+> [!NOTE]
+> 项目第一次接入时运行 `eslint .` 可能会有安装依赖的交互式命令，按照提示完成依赖安装即可。
+>
+> 在每次修改依赖配置后，最好也运行一遍 lint 命令，部分配置项可能需要安装额外的依赖。
+
+大部分场景到这里就能使用了，不需要额外的配置。如果你想自定义一些配置，请往下看。
+
+### 自定义配置
+
+基于现有能力修改配置
+
+```ts
+export default zjutjh({
+  overrides: {
+    vue: {
+      "vue/multi-word-component-names": ["off"]
+    },
+    stylistic: {
+      "stylistic/quotes": ["error", "single"]
+    }
+  },
+  ignores: [
+    "**/build"
+  ]
+})
+```
+
+扩展 eslint 配置
+
+```ts
+export default zjutjh(
+  // 第一个参数是 zjutjh 专用的配置
+  {
+    overrides: {
+      stylistic: {
+        "stylistic/quotes": ["error", "single"]
+      }
+    },
+    ignores: [
+      "**/build"
+    ]
+  },
+  // 从第二个参数开始，可以任意传入多个 flat config
+  {
+    files: ["**/*.vue"],
+    rules: {
+      "vue/multi-word-component-names": ["off"]
+    }
+  },
+  {
+    // 不传入 files glob, 则对所有文件生效 */
+    // files: [/** any globs */],
+    plugins: {
+      // 使用 eslint 插件
+    },
+    rules: {
+      // 使用 eslint 规则
+    }
+  }
+)
+```
+
+> [!TIP]
+> 在项目中调整配置时，如果对最终生效的配置有疑问，可以使用 [@eslint/config-inspector](https://github.com/eslint/config-inspector) 来调试配置。
+
 ## 代码格式化
 
 很多人在意代码的格式化，这里单独拿出一章讲。
 
-支持使用 `@stylistic/eslint-plugin` (lint 工具对格式的检查) 或者传统的 formatter 工具
-(Prettier) 来对代码进行格式化。后者的具体配置放在 `options.prettier` stylistic 默认开启，
-如果要使用 formatter，需要手动开启。
+内置两种格式化工具。`@stylistic/eslint-plugin` (lint 工具对格式的检查) 和传统的 formatter 工具
+(Prettier) 。stylistic 默认开启，如果要使用 Prettier，需要手动开启。
 
 ```ts
 // 启用 prettier
-export default [
-  ...(await zjutjh({
-    prettier: {
-      prettierSelfOptions: {
-        // 自定义 prettier 的格式化风格配置
-      },
-      lang: {
-        html: false // 关闭对一些文件的格式化，默认对支持的文件全部开启
-      }
+export default zjutjh({
+  prettier: true
+}),
+```
+
+支持自定义 prettier 格式化选项，以及关闭对部分文件的格式化（默认对支持的文件全部开启）
+
+```ts
+export default zjutjh({
+  prettier: {
+    prettierSelfOptions: {
+      // 自定义 prettier 的格式化风格配置
+    },
+    lang: {
+      html: false // 关闭对一些文件的格式化。默认对支持的文件全部开启
     }
-  })),
-];
+  }
+})
 ```
 
 stylistic 只对 js(x) 和 ts(x) 进行格式化，而 prettier 还对其他文件，如 css，html 等的格式化。
-如果你要格式化这些文件，需要配置编辑器来允许 eslint 校验这些类型的文件。
+如果你要**在编辑器中**自动格式化这些文件，需要配置编辑器来允许 eslint 校验这些类型的文件。
 
 ```jsonc
 // 可以参考仓库下的 .vscode/settings.json 给 vscode 配置

package/dist/index.d.ts

@@ -2,25 +2,25 @@ import { Linter } from 'eslint';
 import { ParserOptions } from '@typescript-eslint/parser';
 import { Options } from 'prettier';
 
-type OverridesConfigs = {
+interface OverridesConfigs {
     vue?: Linter.RulesRecord;
     ts?: Linter.RulesRecord;
     stylistic?: Linter.RulesRecord;
     react?: Linter.RulesRecord;
-};
-type OptionsConfig = {
+}
+interface OptionsConfig extends OptionsComponentExts {
     vue?: boolean;
-    ts?: boolean | (OptionsOverrides & OptionsTypeScriptParserOptions);
+    ts?: boolean | OptionsTypeScriptParserOptions;
     taro?: boolean;
     jsx?: boolean;
     react?: boolean;
     prettier?: boolean | OptionsPrettier;
     ignores?: string[];
     overrides?: OverridesConfigs;
-};
-type OptionsOverrides = {
-    overrides?: Linter.RulesRecord;
-};
+}
+interface OptionsComponentExts {
+    componentExts?: string[];
+}
 interface OptionsTypeScriptParserOptions {
     parserOptions?: Partial<ParserOptions>;
 }

package/dist/index.js

@@ -203,7 +203,12 @@ var prettierOptions = {
   singleAttributePerLine: false
 };
 async function prettier(options) {
-  await ensurePackages(["eslint-plugin-prettier", "eslint-config-prettier", "prettier"]);
+  await ensurePackages([
+    "eslint-plugin-format",
+    "eslint-plugin-prettier",
+    "eslint-config-prettier",
+    "prettier"
+  ]);
   const [configPrettier, pluginFormat] = await Promise.all([
     interopDefault(import("eslint-plugin-prettier/recommended")),
     interopDefault(import("eslint-plugin-format"))
@@ -369,9 +374,11 @@ function stylistic(options) {
 // src/configs/typescript.ts
 async function typescript(options) {
   const {
+    componentExts = [],
     overrides,
     parserOptions
   } = options;
+  const files = [GLOB_TS, GLOB_TSX, ...componentExts.map((ext) => `**/*.${ext}`)];
   await ensurePackages([
     "@typescript-eslint/eslint-plugin",
     "@typescript-eslint/parser"
@@ -393,7 +400,7 @@ async function typescript(options) {
     },
     {
       name: "zjutjh/typescript/parser",
-      files: [GLOB_TS, GLOB_TSX],
+      files,
       languageOptions: {
         parser: parserTs,
         parserOptions: {
@@ -410,6 +417,7 @@ async function typescript(options) {
     },
     {
       name: "zjutjh/typescript/rules",
+      files,
       rules: {
         ...pluginTs.configs.strict.rules,
         "@typescript-eslint/ban-ts-comment": ["error", { "ts-expect-error": "allow-with-description" }],
@@ -417,6 +425,7 @@ async function typescript(options) {
         "@typescript-eslint/no-non-null-assertion": "error",
         "@typescript-eslint/no-empty-function": "error",
         "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unnecessary-condition": "error",
         "@typescript-eslint/no-unused-expressions": ["error", {
           allowShortCircuit: true,
           allowTaggedTemplates: true,
@@ -480,6 +489,7 @@ async function vue(options) {
 // src/factory.ts
 async function zjutjh(options = {}, ...userConfigs) {
   const {
+    componentExts = [],
     vue: enableVue = isPackageExists2("vue"),
     ts: enableTs = isPackageExists2("typescript"),
     taro: enableTaro = isPackageExists2("@tarojs/taro"),
@@ -497,6 +507,9 @@ async function zjutjh(options = {}, ...userConfigs) {
       overrides: getOverrides(options, "stylistic")
     })
   );
+  if (enableVue) {
+    componentExts.push("vue");
+  }
   const typescriptOptions = resolveSubOptions(options, "ts");
   if (enableTs) {
     configs.push(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zjutjh/eslint-config",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "ISC",
   "author": "zjutjh",
   "description": "Eslint config used by zjutjh",