スティーブン・サックス
ESLint - ソート
インポート、プロパティ、オブジェクトキーなどのソート順は完全に主観的であり、特定のコンテキストでの最適な順序についてのあなた自身の意見さえも時間とともに変わる可能性があります。
英数字のソートを強制することで、コードを整理し、チーム全体が読みやすくなります。
英数字
英数字は最も客観的な順序です。A-Zは英語話者が幼少期から学ぶ順序であり、数字は普遍的です。これはプログラミングから独立しています。自然と、GはBの後に来ること、RはYの前に来ること、3は8の前に来ることを知っています。
ソートから主観性を取り除き、英数字で物事をソートすることで、コードを読む際に誰もが（あなた自身も含めて）素早く探しているものを見つけやすくします。
英語アルファベットの母語話者
アルファベットのソートは英語基準ですが、プログラミングは主に英語で行われるため、母国語が異なるESL話者にとって英語アルファベットを強化するポジティブな副作用があります。
ソートルール
fix-on-save をサポートする優れた ESLint ソートプラグインがあります。それは Perfectionist と呼ばれています。natural ルール構成で使用することをお勧めします。2 つのルールをカスタマイズしています（以下を参照）。
sort-imports
これは私のおすすめの設定です。React を一番上に配置し、type インポートをそれらのグループとペアにし、styles を一番下に配置して簡単にアクセスできるようにします。
const perfectionistConfig = [
perfectionist.configs['recommended-natural'],
{
name: 'perfectionist',
rules: {
'perfectionist/sort-imports': [
'error',
{
customGroups: {
type: {
'react-other-type': ['^react-.+'],
'react-type': ['^react$'],
},
value: {
react: ['^react$'],
'react-other': ['^react-.+'],
},
},
groups: [
'react-type',
'react',
'react-other-type',
'react-other',
['external-type', 'external'],
['builtin-type', 'builtin'],
['internal-type', 'internal'],
['parent-type', 'parent'],
['sibling-type', 'sibling'],
['index-type', 'index'],
['object', 'unknown'],
'style',
'side-effect',
'side-effect-style',
],
newlinesBetween: 'never',
type: 'natural',
},
],
'perfectionist/sort-jsx-props': [
'error',
{
customGroups: {
reserved: ['key', 'ref'],
},
groups: ['reserved'],
type: 'natural',
},
],
},
},
];sort-jsx-props
key と ref という予約済みのプロパティを他のすべてのプロパティの前にソートするこの変更をお勧めします。
その他のソート
Canonical プラグインは、React フックの依存関係配列を並べ替えます。
const canonicalConfig = [
canonical.configs['flat/recommended'],
{
name: 'canonical',
rules: {
'canonical/destructuring-property-newline': 'off',
'canonical/filename-match-exported': 'error',
'canonical/id-match': 'off',
'canonical/import-specifier-newline': 'off',
},
},
{
files: ['**/*.tsx', '**/hooks/*.ts?(x)'],
name: 'canonical/sort-react-dependencies',
rules: {
'canonical/sort-react-dependencies': 'error',
},
},
{
files: [
'app/root.tsx',
'app/entry.server.tsx',
'app/**/tests/*',
'test/**/*.ts?(x)',
'**/*.stories.tsx',
'**/routes/**/*.tsx',
'**/hooks/*.ts?(x)',
'.storybook/**/*.ts?(x)',
'.playwright/**/*.ts?(x)',
],
name: 'canonical/filename-match-exported-disabled',
rules: {
'canonical/filename-match-exported': 'off',
},
},
];次の記事: ESLint - 状況に応じたルール
前の記事: ESLint - 基盤