ESLint - ソート
インポート、プロパティ、オブジェクトキーなどのソート順は完全に主観的であり、特定のコンテキストでの最適な順序についてのあなた自身の意見さえも時間とともに変わる可能性があります。
英数字のソートを強制することで、コードを整理し、チーム全体が読みやすくなります。
英数字
英数字は最も客観的な順序です。A-Zは英語話者が幼少期から学ぶ順序であり、数字は普遍的です。これはプログラミングから独立しています。自然と、GはBの後に来ること、RはYの前に来ること、3は8の前に来ることを知っています。
ソートから主観性を取り除き、英数字で物事をソートすることで、コードを読む際に誰もが（あなた自身も含めて）素早く探しているものを見つけやすくします。
英語アルファベットの母語話者
アルファベットのソートは英語基準ですが、プログラミングは主に英語で行われるため、母国語が異なるESL話者にとって英語アルファベットを強化するポジティブな副作用があります。
ソートルール
fix-on-save をサポートする優れた ESLint ソートプラグインがあります。それは Perfectionist と呼ばれています。natural ルール構成で使用することをお勧めします。2 つのルールをカスタマイズしています（以下を参照）。
plugins: [
// ... 他のplugins
'perfectionist',
],
extends: [
// ... 他のextends
'plugin:perfectionist/recommended-natural-legacy',
],sort-imports
これは私のおすすめの設定です。React を一番上に配置し、type インポートをそれらのグループとペアにし、styles を一番下に配置して簡単にアクセスできるようにします。
'perfectionist/sort-imports': [
'error',
{
type: 'natural',
internalPattern: ['~/**'],
newlinesBetween: 'never',
groups: [
'react',
['external-type', 'external'],
['builtin-type', 'builtin'],
['internal-type', 'internal'],
['parent-type', 'parent'],
['sibling-type', 'sibling'],
['index-type', 'index'],
'side-effect',
['object', 'unknown'],
'style',
],
customGroups: {
value: {
react: ['react', 'react-*'],
},
type: {
react: ['react', 'react-*'],
},
},
},
],sort-jsx-props
key と ref という予約済みのプロパティを他のすべてのプロパティの前にソートするこの変更をお勧めします。
'perfectionist/sort-jsx-props': [
'error',
{
type: 'natural',
groups: ['reserved'],
customGroups: {
reserved: ['key', 'ref'],
},
},
],その他のソート
React フックの依存関係配列をソートするための ESLint プラグインを作成しました。
npm i -D eslint-plugin-sort-react-dependency-arraysuseEffect、useCallback などで依存関係配列をソートします。このルールは、依存関係配列を他のすべてのソートルールと一貫性のある状態に保ちます。
'sort-react-dependency-arrays/sort': 'error',次の記事: ESLint - 状況に応じたルール
前の記事: ESLint - 基盤