polish

README.md

@@ -9,7 +9,7 @@ Kaciras JavaScript style.
 You'll first need to install [ESLint](http://eslint.org):
 
 ```
-npm i eslint
+pnpm add eslint
 ```
 
 Next, install config packages:
@@ -32,23 +32,30 @@ npm i -D @kaciras/eslint-config-vue
 
 ## Usage
 
-Add `@kaciras/*` to the `extends` section of your `.eslintrc` configuration file.
+All packages are ESM and export flat configs, they cannot be used for legacy project.
 
 ```javascript
-module.exports = {
-	root: true,
-	extends: [
-		"@kaciras/core",
-		"@kaciras/typescript", // for TS project
-		"@kaciras/react", // for React project
-
-		"@kaciras/vue", // for Vue project or
-		"@kaciras/vue/typescript", // for Vue & Typescript
-	],
+import core from "@kaciras/eslint-config-core";
+import typescript from "@kaciras/eslint-config-typescript";
+import jest from "@kaciras/eslint-config-jest";
+import react from "@kaciras/eslint-config-react";
+import vueTs from "@kaciras/eslint-config-vue/typescript.js";
+
+export default [
+	...core,
+	...typescript, // for TS project
+	...vueTs, // for Vue & Typescript
+
 	// for project uses Jest
-	overrides: [{
-		files: "<test match pattern>",
-		extends: ["@kaciras/jest"],
-	}],
-};
+	jest.map(config => ({ ...config, files: ["<test match pattern>"]})),
+
+	// for React project
+	react.map(config => ({ ...config, files: ["**/*.[jt]sx"]})),
+
+	{
+		rules: {
+			"kaciras/import-group-sort": "warn",
+		},
+	},
+];
 ```

configs/core/index.js

@@ -1,26 +1,23 @@
 import stylistic from "@stylistic/eslint-plugin-js";
-import kaciras from "../../plugin/index.js";
+import kaciras from "@kaciras/eslint-plugin";
 
 export default [{
 	plugins: { kaciras, stylistic },
 	name: "kaciras/javascript",
 	rules: {
-		// 我应该不会这么写吧，不过还是加上以免意外。
-		"no-array-constructor": 2,
-
-		// 永远使用三等号，避免一些无聊的问题。
-		// 有时候其它语言写多了，回来会忘。
+		// Don’t use the dross of weakly typed languages.
 		"eqeqeq": 2,
 
 		// 永远不要使用 for-in，这个遗留的糟粕已经被其他写法取代了。
 		// 同样 Python 写多了可能会忘。
 		"no-restricted-syntax": [2, "ForInStatement"],
 
-		// 一些永远不要使用的特性。
+		// Also some dross you should never to use.
 		"no-sequences": 2,
 		"no-throw-literal": 2,
 		"no-label-var": 2,
 
+		// Variable named with only dashes means ignored.
 		"no-unused-vars": [2, {
 			varsIgnorePattern: "^_+$",
 		}],
@@ -61,7 +58,7 @@ export default [{
 			SwitchCase: 1,
 		}],
 
-		// 换行用俩字符确实多余，统一使用 \n
+		// \n is more popular and simpler than \r\n
 		"stylistic/linebreak-style": [2, "unix"],
 
 		// 函数名和括号间不加空格，关键字与括号间加。

configs/jest/index.js

@@ -1,34 +1,32 @@
 import jest from "eslint-plugin-jest";
 
-/*
- * 因为无法在 eslint 的配置里获取 jest 的配置，所以没法像 ts 那样直接用。
- * 建议将此扩展写在 overrides 里，仅对测试文件生效：
- * {
- *     overrides: [{
- *         files: require("./jest.config").testMatch,
- *         extends: ["@kaciras/jest"],
- *     }],
- * }
+/**
+ * 因为无法在 eslint 的配置里获取 jest 的配置，所以没法自动配置 files。
+ * 建议手动设置 files 属性，仅对测试文件生效：
  *
- * 我想用 overrides ESLint 似乎没有提供在配置文件里获取 cwd 参数的方法。
+ * @example
+ * import jest from "@kaciras/eslint-config-jest";
+ * import { testMatch } from "./jest.config.js";
+ *
+ * export default [{ ...jest, files: testMatch }]
  */
-export default {
-	...jest.configs["flat/recommended"],
-	name: "kaciras/jest",
-	rules: {
-		...jest.configs["flat/recommended"].rules,
-		...jest.configs["flat/style"].rules,
-
-		// 生命周期钩子当然要写在最前面啊。
-		"jest/prefer-hooks-on-top": 2,
+export default [
+	jest.configs["flat/recommended"],
+	jest.configs["flat/style"],
+	{
+		name: "kaciras/jest",
+		rules: {
+			// 生命周期钩子当然要写在最前面啊。
+			"jest/prefer-hooks-on-top": 2,
 
-		// 无法识别第三方库的断言，添加 assertFunctionNames 也很麻烦。
-		"jest/expect-expect": 0,
+			// 无法识别第三方库的断言，添加 assertFunctionNames 也很麻烦。
+			"jest/expect-expect": 0,
 
-		// 有些库还在用回调式的 API，强行转异步不好看。
-		"jest/no-done-callback": 0,
+			// 有些库还在用回调式的 API，强行转异步不好看。
+			"jest/no-done-callback": 0,
 
-		// Prefer sugar functions.
-		"jest/prefer-mock-promise-shorthand": 2,
-	},
-};
+			// Prefer sugar functions.
+			"jest/prefer-mock-promise-shorthand": 2,
+		},
+	}
+];

configs/react/index.js

@@ -1,28 +1,25 @@
 import reactRecommended from "eslint-plugin-react/configs/recommended.js";
 import jsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
 
-/*
- * 该配置仅适用于 React 17+ 并使用 React Hooks 的项目。
- */
-export default [
-	reactRecommended,
-	jsxRuntime,
-	{
-		name: "kaciras/react",
-		settings: {
-			react: {
-				version: "detect",
-			},
+// Designed for projects that use React 17+ with Hooks.
+export default [reactRecommended, jsxRuntime, {
+	name: "kaciras/react",
+	settings: {
+		react: {
+			version: "detect",
 		},
-		rules: {
-			// 写太快可能没注意这个，加上该规则以便用 ESLint 批量改。
-			"react/jsx-curly-brace-presence": [2, {
-				props: "never",
-				children: "never",
-			}],
+	},
+	rules: {
+		// 写太快可能没注意这个，加上该规则以便用 ESLint 批量改。
+		"react/jsx-curly-brace-presence": [2, {
+			props: "never",
+			children: "never",
+		}],
 
-			// 都是动态页面的时代了，默认的 submit 基本用不到，还容易漏。
-			"react/button-has-type": 2,
-		},
+		/*
+		 * If you forget this of a button inside a form,
+		 * click it will refresh the page unexpectedly.
+		 */
+		"react/button-has-type": 2,
 	},
-];
+}];

configs/typescript/index.js

@@ -11,10 +11,10 @@ import tseslint from "typescript-eslint";
 export default [...tseslint.configs.recommended, {
 	name: "kaciras/typescript",
 	rules: {
-		// 不让用感叹号和 any 是不对的，总有些情况必须这样做。
+		// I need `any` for the flexible language.
 		"@typescript-eslint/no-explicit-any": 0,
 
-		// TS 并非完美无缺，总有用到 @ts-ignore 的时候。
+		// Type-test needs `@ts-expect-error`.
 		"@typescript-eslint/ban-ts-comment": 0,
 
 		// 多行总是加上末尾的逗号，一来整齐些，二是调整顺序更方便。

configs/vue/index.js

@@ -1,16 +1,18 @@
 import pluginVue from "eslint-plugin-vue";
 
-// 里面已经设置了 parser: "vue-eslint-parser"
+/**
+ * Used for Vue SFC without typescript, already includes `files: ["**\/*.vue"]`
+ */
 export default [...pluginVue.configs["flat/essential"], {
 	name: "kaciras/vue",
 	rules: {
 		// 没有 emits 或是 onXXX props 的话事件会绑到元素上，应当避免。
 		"vue/require-explicit-emits": [2, { allowProps: true }],
 
-		// I use double quote in JS, so single for template.
+		// I used double quote in JS, so single for template.
 		"vue/html-quotes": [2, "single", { avoidEscape: true }],
 
-		// 驼峰更好，跟 JSX 一致，同时也和 Custom Element 区分开。
+		// Consistent with JSX, and different from custom elements.
 		"vue/component-name-in-template-casing": [2, "PascalCase"],
 	},
 }];

eslint.config.js

@@ -2,20 +2,8 @@ import core from "./configs/core/index.js";
 import typescript from "./configs/typescript/index.js";
 
 // 没有使用 eslint-plugin-mocha 因为它的规则太严了
-export default [
-	...core,
-	...typescript,
-	{
-		// files: ["**/*.?(m)[jt]s"],
-		// env: {
-		// 	node: true,
-		// },
-		rules: {
-			"kaciras/import-group-sort": "warn",
-		},
+export default [...core, ...typescript, {
+	rules: {
+		"kaciras/import-group-sort": "warn",
 	},
-	{
-		files: ["tests/**/*.?(m)[jt]s"],
-		// env: { mocha: true },
-	},
-];
+}];

plugin/import-group-sort.js

@@ -106,7 +106,7 @@ function tryExpandEnd(sourceCode, node) {
 	// Expand before the first multi-lines comment if present.
 	const crossComment = sourceCode
 		.getCommentsAfter(node)
-		.find(c => c.range[1] > nl);
+		.find(c => c.range[1] >= nl);
 
 	if (crossComment) {
 		return crossComment.range[0];

tests/core.mjs → tests/core.js

@@ -1,7 +1,7 @@
 import assert from "assert";
 import { Linter } from "eslint";
 import coreConfig from "../configs/core/index.js";
-import { getConfig } from "./common.mjs";
+import { getConfig } from "./common.js";
 
 const config = await getConfig("dummy.js", coreConfig);