@yoshinani/style-guide 0.0.1 → 0.0.3

package/README.md

@@ -51,92 +51,27 @@ yarn add --dev @yoshinani/style-guide
 >
 > 参考: https://eslint.org/docs/user-guide/getting-started#installation-and-usage
 
-この ESLint 設定は合成可能（composable）です。
+利用できる設定は以下の通りです。
 
-以下のベース設定が利用可能です。これらの設定は `extends` の最初に記載してください（どちらか一方または両方を使用可能）。
-
-- `@yoshinani/style-guide/eslint/browser`
-- `@yoshinani/style-guide/eslint/node`
-
-設定をスコープして、特定のファイルのみに適用することもできます。詳細は [Scoped configuration with `overrides`](#scoped-configuration-with-overrides) を参照してください。
-
-追加で利用できる設定は以下の通りです。
-
-- `@yoshinani/style-guide/eslint/jest`
-- `@yoshinani/style-guide/eslint/jest-react`（`@testing-library/react` のルールを含む）
-- `@yoshinani/style-guide/eslint/next`（`@next/eslint-plugin-next` を `next` と同じバージョンでインストールする必要あり）
-- `@yoshinani/style-guide/eslint/playwright-test`
-- `@yoshinani/style-guide/eslint/react`
-- `@yoshinani/style-guide/eslint/typescript`（`typescript` のインストールと[追加設定](#configuring-eslint-for-typescript)が必要）
-- `@yoshinani/style-guide/eslint/vitest`
+- `@yoshinani/style-guide/eslint/base`
+- `@yoshinani/style-guide/eslint/next`
+- `@yoshinani/style-guide/eslint/library`
+- `@yoshinani/style-guide/eslint/react-internal`
 
 > ESLint の設定解決の問題（[eslint/eslint#9188](https://github.com/eslint/eslint/issues/9188)）のため、`require.resolve` を使って絶対パスを指定してください。
 
 例として、Next.js プロジェクトで共有 ESLint 設定を使う場合、`.eslintrc.js` に以下のように記載します。
 
 ```js
-module.exports = {
-  extends: [
-    require.resolve('@yoshinani/style-guide/eslint/browser'),
-    require.resolve('@yoshinani/style-guide/eslint/react'),
-    require.resolve('@yoshinani/style-guide/eslint/next'),
-  ],
-};
-```
-
-### TypeScript 用 ESLint 設定
-
-TypeScript 設定で有効になっている一部のルールは追加の型情報が必要です。`tsconfig.json` へのパスを指定してください。
-
-詳細は https://typescript-eslint.io/docs/linting/type-linting を参照してください。
-
-```js
-const { resolve } = require('node:path');
-
-const project = resolve(__dirname, 'tsconfig.json');
-
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: [
-    require.resolve('@yoshinani/style-guide/eslint/node'),
-    require.resolve('@yoshinani/style-guide/eslint/typescript'),
-  ],
+  extends: [require.resolve("@yoshinani/style-guide/eslint/next")],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project,
+    project: true,
   },
-  settings: {
-    'import/resolver': {
-      typescript: {
-        project,
-      },
-    },
-  },
-};
-```
-
-### `jsx-a11y` のカスタムコンポーネント設定
-
-React アプリでは、`Button` などの共通コンポーネントでネイティブ要素をラップすることが一般的です。`jsx-a11y` の `components` 設定でこの情報を渡せます。
-
-以下は一例です。
-
-```js
-module.exports = {
-  root: true,
-  extends: [require.resolve('@yoshinani/style-guide/eslint/react')],
-  settings: {
-    'jsx-a11y': {
-      components: {
-        Article: 'article',
-        Button: 'button',
-        Image: 'img',
-        Input: 'input',
-        Link: 'a',
-        Video: 'video',
-      },
-    },
-  },
-};
+}
 ```
 
 ### `overrides` を使ったスコープ設定
@@ -157,35 +92,21 @@ module.exports = {
 };
 ```
 
-#### ファイル拡張子について
-
-デフォルトでは、すべての TypeScript ルールは `.ts` および `.tsx` ファイルにスコープされています。
-
-ただし、`overrides` を使う場合はファイル拡張子を明示的に含める必要があります。そうしないと ESLint は `.js` ファイルのみを対象にします。
-
-```js
-module.exports = {
-  overrides: [
-    { files: [`directory/**/*.[jt]s?(x)`], rules: { 'my-rule': 'off' } },
-  ],
-};
-```
-
 ## TypeScript
 
 このスタイルガイドは複数の TypeScript 設定を提供しています。これらの設定は LTS の Node.js バージョンに対応しており、それぞれに適した `lib`、`module`、`target`、`moduleResolution` 設定が含まれています。利用可能な設定は以下の通りです。
 
-| Node.js バージョン | TypeScript 設定                           |
-| ------------------ | ----------------------------------------- |
-| v16                | `@yoshinani/style-guide/typescript/node16`   |
-| v18                | `@yoshinani/style-guide/typescript/node18`   |
-| v20                | `@yoshinani/style-guide/typescript/node20`   |
+| 種類           | 設定パッケージ名                                      |
+| -------------- | --------------------------------------------------- |
+| base           | `@yoshinani/style-guide/typescript/base`            |
+| nextjs         | `@yoshinani/style-guide/typescript/nextjs`          |
+| react-library  | `@yoshinani/style-guide/typescript/react-library`   |
 
 共有 TypeScript 設定を使うには、`tsconfig.json` に以下のように記載します。
 
 ```json
 {
-  "extends": "@yoshinani/style-guide/typescript/node16"
+  "extends": "@yoshinani/style-guide/typescript"
 }
 ```
 

package/eslint/base.js

@@ -0,0 +1,133 @@
+const { resolve } = require("node:path")
+
+const project = resolve(process.cwd(), "tsconfig.json")
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  plugins: ["@typescript-eslint", "eslint-plugin-import"],
+  rules: {
+    eqeqeq: ["error", "always", { null: "ignore" }],
+    "@typescript-eslint/no-confusing-void-expression": [
+      "error",
+      { ignoreArrowShorthand: true },
+    ],
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      { checksVoidReturn: { attributes: false } },
+    ],
+    "@typescript-eslint/restrict-template-expressions": [
+      "error",
+      {
+        allowAny: false,
+        allowBoolean: false,
+        allowNullish: false,
+        allowRegExp: false,
+        allowNever: false,
+      },
+    ],
+    // sort import statements
+    "import/order": [
+      "warn",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+        ],
+        "newlines-between": "always",
+        alphabetize: { order: "asc" },
+      },
+    ],
+    // sort named imports within an import statement
+    "sort-imports": ["warn", { ignoreDeclarationSort: true }],
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "TSEnumDeclaration",
+        message:
+          "TSのenumには様々な問題があります。enum as constを使用してください。",
+      },
+      {
+        selector: "ForInStatement",
+        message: "for文は使わず、forEach、map、filterなどを使用してください。",
+      },
+      {
+        selector: "ForOfStatement",
+        message: "for文は使わず、forEach、map、filterなどを使用してください。",
+      },
+      {
+        selector: "LabeledStatement",
+        message:
+          "Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.",
+      },
+      {
+        selector: "WithStatement",
+        message:
+          "`with` is disallowed in strict mode because it makes code impossible to predict and optimize.",
+      },
+    ],
+    "no-process-env": "error",
+    "no-restricted-imports": [
+      "warn",
+      {
+        paths: [
+          {
+            name: "yup",
+            message: "valibotを使用してください。",
+          },
+          {
+            name: "@material-tailwind/react",
+            message: "shadcn/uiを使用してください。",
+          },
+          {
+            name: "dayjs",
+            message: "date-fnsを使用してください。",
+          },
+        ],
+        patterns: [
+          {
+            group: ["lodash/*"],
+            message: "remedaを使用してください。",
+          },
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: [
+        "*.config.{mjs,ts}",
+        "app/**/{page,layout,not-found,*error,opengraph-image,apple-icon}.tsx",
+        "app/**/{sitemap,robots}.ts",
+      ],
+      rules: {
+        "import/no-default-export": "off",
+        "import/prefer-default-export": ["error", { target: "any" }],
+      },
+    },
+    {
+      files: ["env.ts"],
+      rules: {
+        "@typescript-eslint/dot-notation": "off",
+        "no-process-env": "off",
+      },
+    },
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "func-names": "off",
+      },
+    },
+  ],
+}

package/eslint/library.js

@@ -0,0 +1,40 @@
+const { resolve } = require("node:path")
+
+const project = resolve(process.cwd(), "tsconfig.json")
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    require.resolve("@vercel/style-guide/eslint/node"),
+    require.resolve("@vercel/style-guide/eslint/typescript"),
+    require.resolve("./base"),
+  ],
+  plugins: ["only-warn"],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+    "dist/",
+  ],
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
+}

package/eslint/next.js

@@ -0,0 +1,35 @@
+const { resolve } = require("node:path")
+
+const project = resolve(process.cwd(), "tsconfig.json")
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    require.resolve("@vercel/style-guide/eslint/next"),
+    require.resolve("./base"),
+  ],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+    browser: true,
+  },
+  plugins: ["only-warn"],
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+  ],
+  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
+}

package/eslint/react-internal.js

@@ -0,0 +1,44 @@
+const { resolve } = require("node:path")
+
+const project = resolve(process.cwd(), "tsconfig.json")
+
+/*
+ * This is a custom ESLint configuration for use with
+ * internal (bundled by their consumer) libraries
+ * that utilize React.
+ */
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    "turbo",
+    require.resolve("@vercel/style-guide/eslint/react"),
+    require.resolve("./base"),
+  ],
+  plugins: ["only-warn"],
+  globals: {
+    React: true,
+  },
+  env: {
+    browser: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+    "dist/",
+  ],
+  overrides: [
+    // Force ESLint to detect .tsx files
+    { files: ["*.js?(x)", "*.ts?(x)"] },
+  ],
+}

package/package.json

@@ -1,20 +1,34 @@
 {
 	"name": "@yoshinani/style-guide",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "Yoshinani's Style Guide",
 	"exports": {
 		"./typescript": "./typescript/base.json",
 		"./typescript/nextjs": "./typescript/nextjs.json",
-		"./typescript/react-library": "./typescript/react-library.json"
+		"./typescript/react-library": "./typescript/react-library.json",
+		"./eslint/*": "./eslint/*.js"
 	},
 	"files": [
-		"typescript"
+		"typescript",
+		"eslint"
 	],
+	"dependencies": {
+		"@typescript-eslint/eslint-plugin": "^8.18.2",
+		"@typescript-eslint/parser": "^8.18.2",
+		"@vercel/style-guide": "^6.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-only-warn": "^1.1.0",
+		"eslint-plugin-tailwindcss": "^3.17.5"
+	},
 	"devDependencies": {
 		"@commitlint/cli": "^19.8.0",
 		"@commitlint/config-conventional": "^19.8.0",
 		"husky": "^9.1.7"
 	},
+	"peerDependencies": {
+		"eslint": "^8"
+	},
 	"packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
 	"scripts": {
 		"prepare": "husky"