Closed4
2024年最新のJavaScriptコーディング規約を様々な観点から整理する
kei2024年版最新のJavaScriptコーディング規約
| コーディング規約 | 詳細 |
|---|---|
| 基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど、一般的なJavaScriptのベストプラクティス。 |
| キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 |
| セミコロンの使用 | 各文の末尾にセミコロンを付ける。 |
| インデントとスペース | インデントはスペース2つまたは4つを使用。オペレーターの前後にスペースを入れる。 |
| 文字列リテラル | 文字列にはシングルクォートを使用。 |
| 中括弧のスタイル | 中括弧は新しい行に置かない。 |
| コメントの追加 | コードの目的や重要な部分にはコメントを追加。 |
| エラーハンドリング | 適切なエラーハンドリングを行い、try...catchを使用。 |
| モジュールとインポート | ES6モジュールを使用し、importとexportを利用。 |
| アクセシビリティ | アクセシビリティ向上のためのルール。 |
| Reactのサポート | Reactのベストプラクティスとコンポーネントベースの開発をサポート。 |
| フックのルール | Reactフックのベストプラクティスをサポート。 |
| コードフォーマットの一貫性 | Prettierなどを使用してコードフォーマットを一貫させる。 |
参考文献
keiJavaScriptのコーディング規約とESLintプリセットのサポート内容
| コーディング規約 | 詳細 | サポートするESLintプリセット | インストールコマンド |
|---|---|---|---|
| 基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど、一般的なJavaScriptのベストプラクティス。 | eslint:recommended |
npm install eslint --save-dev |
| キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 | eslint:recommended |
npm install eslint --save-dev |
| セミコロンの使用 | 各文の末尾にセミコロンを付ける。 | eslint:recommended |
npm install eslint --save-dev |
| インデントとスペース | インデントはスペース2つまたは4つを使用。オペレーターの前後にスペースを入れる。 | eslint:recommended |
npm install eslint --save-dev |
| 文字列リテラル | 文字列にはシングルクォートを使用。 | eslint:recommended |
npm install eslint --save-dev |
| 中括弧のスタイル | 中括弧は新しい行に置かない。 | eslint:recommended |
npm install eslint --save-dev |
| コメントの追加 | コードの目的や重要な部分にはコメントを追加。 | eslint:recommended |
npm install eslint --save-dev |
| エラーハンドリング | 適切なエラーハンドリングを行い、try...catchを使用。 |
eslint:recommended |
npm install eslint --save-dev |
| モジュールとインポート | ES6モジュールを使用し、importとexportを利用。 |
eslint:recommended |
npm install eslint --save-dev |
| アクセシビリティ | アクセシビリティ向上のためのルール。 | plugin:jsx-a11y/recommended |
npm install eslint-plugin-jsx-a11y --save-dev |
| Reactのサポート | Reactのベストプラクティスとコンポーネントベースの開発をサポート。 | plugin:react/recommended |
npm install eslint-plugin-react --save-dev |
| フックのルール | Reactフックのベストプラクティスをサポート。 | airbnb/hooks |
npm install eslint-plugin-react-hooks --save-dev |
| コードフォーマットの一貫性 | コードフォーマットを一貫させる。 |
prettier, eslint-config-prettier, eslint-plugin-prettier
|
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev |
参考文献
keiAirbnb JavaScript Style Guideに沿ったESLintの推奨設定（recommended）のサポート内容
| コーディング規約 | Airbnb Style Guideの詳細 |
eslint:recommendedのサポート |
|---|---|---|
| 基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど、一般的なJavaScriptのベストプラクティス。 | サポート |
| キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 | 部分サポート |
| セミコロンの使用 | 各文の末尾にセミコロンを付ける。 | サポート |
| インデントとスペース | インデントはスペース2つを使用。オペレーターの前後にスペースを入れる。 | 部分サポート |
| 文字列リテラル | 文字列にはシングルクォートを使用。 | 部分サポート |
| 中括弧のスタイル | 中括弧は新しい行に置かない。 | サポート |
| コメントの追加 | コードの目的や重要な部分にはコメントを追加。 | 部分サポート |
| エラーハンドリング | 適切なエラーハンドリングを行い、try...catchを使用。 |
サポート |
| モジュールとインポート | ES6モジュールを使用し、importとexportを利用。 |
サポート |
参考文献
keieslint-config-airbnbのサポート状況
| コーディング規約 | 詳細 | eslint-config-airbnbのサポート |
|---|---|---|
| 基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど。 | サポート |
| キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 | サポート |
| セミコロンの使用 | 各文の末尾にセミコロンを付ける。 | サポート |
| インデントとスペース | インデントはスペース2つを使用。オペレーターの前後にスペースを入れる。 | サポート |
| 文字列リテラル | 文字列にはシングルクォートを使用。 | サポート |
| 中括弧のスタイル | 中括弧は新しい行に置かない。 | サポート |
| コメントの追加 | コードの目的や重要な部分にはコメントを追加。 | サポート |
| エラーハンドリング | 適切なエラーハンドリングを行い、try...catchを使用。 |
サポート |
| モジュールとインポート | ES6モジュールを使用し、importとexportを利用。 |
サポート |
| アクセシビリティ | アクセシビリティ向上のためのルール。 | 部分サポート |
| Reactのサポート | Reactのベストプラクティスとコンポーネントベースの開発。 | サポート |
| フックのルール | Reactフックのベストプラクティス。 | サポート |
| コードフォーマットの一貫性 | Prettierを使用してコードフォーマットを一貫させる。 | サポート |
このスクラップは2024/08/04にクローズされました