-
Notifications
You must be signed in to change notification settings - Fork 0
/
.eslintrc.json
242 lines (222 loc) · 9.48 KB
/
.eslintrc.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
{
"env": {
"browser": true,
"es2022": true
},
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"standard-with-typescript",
"prettier"
],
"parserOptions": {
"ecmaVersion": "latest",
"tsconfigRootDir": ".",
"project": ["./tsconfig.json"],
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"react",
"react-hooks",
"import",
"unused-imports"
],
"rules": {
// 任意の構文の間に空行を入れるかどうかの定義
// ここでは return 文の前に常に空行を入れるよう設定
"padding-line-between-statements": [
"error",
{
"blankLine": "always",
"prev": "*",
"next": "return"
}
],
// オブジェクトの型定義にインターフェースまたは型エイリアスのどちらかを強制するルール
// eslint-config-standard-with-typescript がインターフェースを強制しているのを無効化
"@typescript-eslint/consistent-type-definitions": "off",
// 関数の戻り値に必ず型定義を書かなければいけないルール
// eslint-config-standard-with-typescript が全面採用しているが厳しすぎるため、
// その適用がエクスポートされる関数に限られる @typescript-eslint/explicit-module-boundary-types に入れ替え
// 追記：
// @typescript-eslint/explicit-module-boundary-types の方も有効化するメリットがないという意見もあるので error から off に変更
// 参考：
// https://twitter.com/fiahfy/status/1521724999953879040
// https://github.com/typescript-eslint/typescript-eslint/issues/3746
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
// Promise の誤用を防ぐためのルール
// 何も返さない async 関数のコールに明示的に void キーワードをつけることを強制され、
// かつ、コンポーネントのイベント属性に async 関数を渡す際に、
// (e): void => { handleSubmit(e) } のような煩雑な記述を強いられるのを部分的に無効化
"@typescript-eslint/no-misused-promises": [
"error",
{
"checksVoidReturn": false
}
],
// 本ルールについての説明、補足を追加すること
// `${process.env.REACT_APP_REST_URL}/tasks/` のような記述に対するエラーを無効化している
"@typescript-eslint/restrict-template-expressions": "off",
// 使用していない変数の定義を許可しないルール
// ここでは変数および引数の名前の頭に `_` をつけた時のみ許容するよう設定
// eslint-plugin-unused-imports を併用する場合はこちらの設定はコンフリクトするのでコメントアウトする
// '@typescript-eslint/no-unused-vars': [
// 'error',
// {
// argsIgnorePattern: '^_',
// varsIgnorePattern: '^_',
// },
// ],
// 使用していないインポートを自動削除するルール
// 本プラグインとコンフリクトを起こす no-unused-vars の設定を無効化し、
// 変数および引数の名前の頭に `_` をつけた場合のみ許可する設定をこちらでおこなっている
"@typescript-eslint/no-unused-vars": "off", // or 'no-unused-vars': 'off'
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
}
],
// Boolean 値が期待される記述で、Boolean 型以外の使用を許可しないルール
// ここではオブジェクト、関数、null、undefined の場合には許容するよう設定
"@typescript-eslint/strict-boolean-expressions": [
"error",
{
"allowNullableObject": true
}
],
// トリプルスラッシュ・ディレクティブの使用を許可するかどうかを定義するルール
// ここでは eslint-config-standard-with-typescript が一律禁止にしているのを、type 属性に限り許可するように設定
"@typescript-eslint/triple-slash-reference": [
"error",
{
"types": "always"
}
],
// autoFocus 属性の使用を禁止するルール
// autoFocus 属性の使用はユーザビリティを損なうため禁止は妥当なのだが、
// デフォルトで有効化されてるフレームワーク等に対して値を false にしたい場合でもエラーになってしまうので判定を無効化
"jsx-a11y/no-autofocus": "off",
// インポートの際のファイル拡張子を記述するかを定義するルール
// ここでは npm パッケージ以外のファイルについて、`.js`、`.jsx`、`.ts`、`.tsx` のみ拡張子を省略し、
// それ以外のファイルは拡張子を記述させるように設定
"import/extensions": [
"error",
{
"ignorePackages": true,
"pattern": {
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
}
],
// 最後のインポート文のあとは空行を入れるよう設定
"import/newline-after-import": "error",
// モジュールインポートの順番をカスタマイズできるルール
// react および react-dom モジュールを最初に、
// 非相対パスで記述した内部モジュールのコンポーネントを相対パスモジュールの直前に、
// CSS Modules ファイルのインポートを最後にするよう設定
// import from `xxx` 形式の記述は eslint-plugin-import が認識できないため、通常の CSS ファイルのインポート文はソート不可
"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal",
"type",
["parent", "sibling"],
"object",
"index"
],
"pathGroups": [
// react 関連のモジュールを外部モジュールより前に配置する
{
"pattern": "{react,react-dom/**,react-router-dom,next,next/**}",
"group": "builtin",
"position": "before"
},
// @/ からインポートするファイルをグルーピング
{
"pattern": "{@/**}",
"group": "internal",
"position": "before"
},
// 非相対パスで記述した内部モジュールのコンポーネントを相対パスモジュールの直前に配置
{
"pattern": "{[A-Z]*,**/[A-Z]*}",
"group": "internal",
"position": "after"
},
// @@/ からインポートするファイルを一番最後に配置
{
"pattern": "@@/**",
"group": "index",
"position": "after"
}
],
"newlines-between": "never",
"pathGroupsExcludedImportTypes": ["builtin"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
// displayName コンポーネントのプロパティで、デバッグメッセージでコンポーネントを明示するのに使用
// これがなくてもほとんどの場合はコンポーネントを特定できるため無効化
"react/display-name": "off",
// React 17 以降で eslint-plugin-react を使用している場合のための設定
// 下記を無効化することで不要なエラーを回避
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
// Boolean 変数の受け渡しには JSX の省略形を使用する
// 追記：true を明示的に記述しないと正しく動作しないライブラリもあるので
// 'react/jsx-boolean-value': 'error',
// 文字列の属性値に波括弧は不要
"react/jsx-curly-brace-presence": "error",
// 子要素のないコンポーネントは自己終了タグを使う
// HTML タグは除外している
"react/self-closing-comp": [
"error",
{
"component": true,
"html": false
}
],
// React Hook における依存関係を示す第二引数の内容を明示させるルール
// 第二引数に空配列を指定したい場合にも警告が出てしまうので無効化
"react-hooks/exhaustive-deps": "off",
// Next.js における img 要素の使用を禁止するルール
// 一般的な静的サイト構築において img 要素の全面禁止は不便なので無効化
"@next/next/no-img-element": "off"
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"rules": {
// コンポーネントの props に型チェックをおこなうための propTypes プロパティの定義を強制するルール
// TypeScript の場合は不要なので、ファイル拡張子が `.tsx` の場合に無効化するよう設定を上書き
"react/prop-types": "off",
// JSX における不明な属性値に対するルール
// ここでは Emotion で利用する `css` 属性を許容するよう設定
"react/no-unknown-property": [
"error",
{
"ignore": ["css"]
}
]
}
}
]
}