@yoshinani/style-guide 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -89
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,92 +51,27 @@ yarn add --dev @yoshinani/style-guide
|
|
|
51
51
|
>
|
|
52
52
|
> 参考: https://eslint.org/docs/user-guide/getting-started#installation-and-usage
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
利用できる設定は以下の通りです。
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
- `@yoshinani/style-guide/eslint/
|
|
59
|
-
- `@yoshinani/style-guide/eslint/
|
|
60
|
-
|
|
61
|
-
設定をスコープして、特定のファイルのみに適用することもできます。詳細は [Scoped configuration with `overrides`](#scoped-configuration-with-overrides) を参照してください。
|
|
62
|
-
|
|
63
|
-
追加で利用できる設定は以下の通りです。
|
|
64
|
-
|
|
65
|
-
- `@yoshinani/style-guide/eslint/jest`
|
|
66
|
-
- `@yoshinani/style-guide/eslint/jest-react`（`@testing-library/react` のルールを含む）
|
|
67
|
-
- `@yoshinani/style-guide/eslint/next`（`@next/eslint-plugin-next` を `next` と同じバージョンでインストールする必要あり）
|
|
68
|
-
- `@yoshinani/style-guide/eslint/playwright-test`
|
|
69
|
-
- `@yoshinani/style-guide/eslint/react`
|
|
70
|
-
- `@yoshinani/style-guide/eslint/typescript`（`typescript` のインストールと[追加設定](#configuring-eslint-for-typescript)が必要）
|
|
71
|
-
- `@yoshinani/style-guide/eslint/vitest`
|
|
56
|
+
- `@yoshinani/style-guide/eslint/base`
|
|
57
|
+
- `@yoshinani/style-guide/eslint/next`
|
|
58
|
+
- `@yoshinani/style-guide/eslint/library`
|
|
59
|
+
- `@yoshinani/style-guide/eslint/react-internal`
|
|
72
60
|
|
|
73
61
|
> ESLint の設定解決の問題（[eslint/eslint#9188](https://github.com/eslint/eslint/issues/9188)）のため、`require.resolve` を使って絶対パスを指定してください。
|
|
74
62
|
|
|
75
63
|
例として、Next.js プロジェクトで共有 ESLint 設定を使う場合、`.eslintrc.js` に以下のように記載します。
|
|
76
64
|
|
|
77
65
|
```js
|
|
78
|
-
|
|
79
|
-
extends: [
|
|
80
|
-
require.resolve('@yoshinani/style-guide/eslint/browser'),
|
|
81
|
-
require.resolve('@yoshinani/style-guide/eslint/react'),
|
|
82
|
-
require.resolve('@yoshinani/style-guide/eslint/next'),
|
|
83
|
-
],
|
|
84
|
-
};
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### TypeScript 用 ESLint 設定
|
|
88
|
-
|
|
89
|
-
TypeScript 設定で有効になっている一部のルールは追加の型情報が必要です。`tsconfig.json` へのパスを指定してください。
|
|
90
|
-
|
|
91
|
-
詳細は https://typescript-eslint.io/docs/linting/type-linting を参照してください。
|
|
92
|
-
|
|
93
|
-
```js
|
|
94
|
-
const { resolve } = require('node:path');
|
|
95
|
-
|
|
96
|
-
const project = resolve(__dirname, 'tsconfig.json');
|
|
97
|
-
|
|
66
|
+
/** @type {import("eslint").Linter.Config} */
|
|
98
67
|
module.exports = {
|
|
99
68
|
root: true,
|
|
100
|
-
extends: [
|
|
101
|
-
|
|
102
|
-
require.resolve('@yoshinani/style-guide/eslint/typescript'),
|
|
103
|
-
],
|
|
69
|
+
extends: [require.resolve("@yoshinani/style-guide/eslint/next")],
|
|
70
|
+
parser: "@typescript-eslint/parser",
|
|
104
71
|
parserOptions: {
|
|
105
|
-
project,
|
|
72
|
+
project: true,
|
|
106
73
|
},
|
|
107
|
-
|
|
108
|
-
'import/resolver': {
|
|
109
|
-
typescript: {
|
|
110
|
-
project,
|
|
111
|
-
},
|
|
112
|
-
},
|
|
113
|
-
},
|
|
114
|
-
};
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
### `jsx-a11y` のカスタムコンポーネント設定
|
|
118
|
-
|
|
119
|
-
React アプリでは、`Button` などの共通コンポーネントでネイティブ要素をラップすることが一般的です。`jsx-a11y` の `components` 設定でこの情報を渡せます。
|
|
120
|
-
|
|
121
|
-
以下は一例です。
|
|
122
|
-
|
|
123
|
-
```js
|
|
124
|
-
module.exports = {
|
|
125
|
-
root: true,
|
|
126
|
-
extends: [require.resolve('@yoshinani/style-guide/eslint/react')],
|
|
127
|
-
settings: {
|
|
128
|
-
'jsx-a11y': {
|
|
129
|
-
components: {
|
|
130
|
-
Article: 'article',
|
|
131
|
-
Button: 'button',
|
|
132
|
-
Image: 'img',
|
|
133
|
-
Input: 'input',
|
|
134
|
-
Link: 'a',
|
|
135
|
-
Video: 'video',
|
|
136
|
-
},
|
|
137
|
-
},
|
|
138
|
-
},
|
|
139
|
-
};
|
|
74
|
+
}
|
|
140
75
|
```
|
|
141
76
|
|
|
142
77
|
### `overrides` を使ったスコープ設定
|
|
@@ -157,20 +92,6 @@ module.exports = {
|
|
|
157
92
|
};
|
|
158
93
|
```
|
|
159
94
|
|
|
160
|
-
#### ファイル拡張子について
|
|
161
|
-
|
|
162
|
-
デフォルトでは、すべての TypeScript ルールは `.ts` および `.tsx` ファイルにスコープされています。
|
|
163
|
-
|
|
164
|
-
ただし、`overrides` を使う場合はファイル拡張子を明示的に含める必要があります。そうしないと ESLint は `.js` ファイルのみを対象にします。
|
|
165
|
-
|
|
166
|
-
```js
|
|
167
|
-
module.exports = {
|
|
168
|
-
overrides: [
|
|
169
|
-
{ files: [`directory/**/*.[jt]s?(x)`], rules: { 'my-rule': 'off' } },
|
|
170
|
-
],
|
|
171
|
-
};
|
|
172
|
-
```
|
|
173
|
-
|
|
174
95
|
## TypeScript
|
|
175
96
|
|
|
176
97
|
このスタイルガイドは複数の TypeScript 設定を提供しています。これらの設定は LTS の Node.js バージョンに対応しており、それぞれに適した `lib`、`module`、`target`、`moduleResolution` 設定が含まれています。利用可能な設定は以下の通りです。
|