スティーブン・サックス
ESLint - 意見の分かれるルール
これらのルールはより主観的です。なぜこれらを使用するのかについて説明します。使用するかどうかは自由に決めてください。
命名規則の徹底
このプラグインは、プロジェクトで使用する命名規則の自動強制を提供します。README にその使用方法が説明されています。ルールは主観的で、あなたの会社が名前を付ける方法に基づいています。
自動的に命名規則を強制するルールを持つことは、プロジェクトに新しく参加する人々にとって特に時間を節約し、コードレビューで命名規則を取り上げる必要がなくなります。
const checkFileConfig = [
{
plugins: {
'check-file': checkFile,
},
},
{
files: ['app/**/*'],
name: 'check-file',
rules: {
'check-file/filename-naming-convention': [
'error',
{
// React hook files must be camelCase (to match the hook name)
'**/hooks/*.{ts,tsx}': 'CAMEL_CASE',
'app/state/*.tsx': 'KEBAB_CASE',
// React component files must be named index.tsx
'app/{components,pages}/**/!(assets|hooks|state|tests|utils)/*.tsx':
'index+()',
// Generally, non-component files must be named kebab-case
'app/{components,pages}/**/!(hooks)/*.ts': 'KEBAB_CASE',
// Non-component files inside specific components folders must be kebab-case
'app/{components,pages}/**/(assets|state|tests|utils)/*.{ts,tsx}':
'KEBAB_CASE',
'test/**/*.ts?(x)': 'KEBAB_CASE',
},
{
ignoreMiddleExtensions: true,
},
],
'check-file/folder-match-with-fex': [
'error',
{
// require stories and test files to be inside tests folders
'*.(stories|test).{ts,tsx}': 'app/**/tests/',
},
],
'check-file/folder-naming-convention': [
'error',
{
// enforce PascalCase component folders, and allow assets, hooks, tests, and utils subfolders
'app/components/**/':
'(assets|hooks|state|tests|utils|[A-Z][a-zA-Z0-9]*)',
},
],
},
},
{
files: ['test/**/*.*'],
name: 'check-file/test-files',
rules: {
'check-file/filename-naming-convention': [
'error',
{
'test/**/*.ts?(x)': 'KEBAB_CASE',
},
{
ignoreMiddleExtensions: true,
},
],
},
},
];アロー関数のみを使用
React は関数型プログラミング原則に基づいて構築されています。関数型コードは、アロー関数を使用して最もよく書かれます。すべて関数にアロー関数を使用することで、コードに一貫性が生まれます。
ルールセットにprefer-arrowプラグインを追加することで、これを強制することができます。
私がアロー関数のみを使用する他の理由:
- 既に多くの場所で使用されており、クロージャーや map、filter、reduce などの関数内の無名関数パラメーターで使用されています。
- 関数型プログラミングや React では
thisを使用すべきではありません。 - ホイスティングが起こりません。ホイスティングは「魔法」です。関数の順序について明示的であることは、コードに明確さをもたらします。アロー関数が呼び出されている場合、その行の上にあることがわかります。
- より短く、読み書きしやすいです。
- 暗黙の戻り値があります。
私が使用している設定は次のとおりです:
const preferArrowConfig = [
{
name: 'prefer-arrow',
plugins: {
'prefer-arrow': preferArrow,
},
rules: {
'prefer-arrow/prefer-arrow-functions': [
'error',
{
classPropertiesAllowed: false,
disallowPrototype: true,
singleReturnOnly: false,
},
],
},
},
{
files: ['**/*.d.ts'],
name: 'ts-definition-files/prefer-arrow-off',
rules: {
'prefer-arrow/prefer-arrow-functions': 'off',
},
},
];no-switch-statements
switch を使用することは if else よりも望ましくないという多くの記事が書かれており、おそらく全く使用すべきではありません。このプラグインは、コードベースで switch の使用を防止します。ただし、このプラグインは「修正」をサポートしていませんが、一部の IDE には変換する機能があります。このルールを有効にしたら、すべての switch 文を置き換えるのに長い時間はかかりません。
const noSwitchStatementsConfig = [
{
name: 'no-switch-statements',
plugins: {
'no-switch-statements': noSwitchStatements,
},
...noSwitchStatements.configs.recommended,
},
];前の記事: ESLint - 状況に応じたルール