Closed4
2024年最新のJavaScriptコーディング規約を様々な観点から整理する
![kei](https://res.cloudinary.com/zenn/image/fetch/s--c43p20Dt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8c6c3c1a2e.jpeg)
2024年版最新のJavaScriptコーディング規約
コーディング規約 | 詳細 |
---|---|
基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど、一般的なJavaScriptのベストプラクティス。 |
キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 |
セミコロンの使用 | 各文の末尾にセミコロンを付ける。 |
インデントとスペース | インデントはスペース2つまたは4つを使用。オペレーターの前後にスペースを入れる。 |
文字列リテラル | 文字列にはシングルクォートを使用。 |
中括弧のスタイル | 中括弧は新しい行に置かない。 |
コメントの追加 | コードの目的や重要な部分にはコメントを追加。 |
エラーハンドリング | 適切なエラーハンドリングを行い、try...catch を使用。 |
モジュールとインポート | ES6モジュールを使用し、import とexport を利用。 |
アクセシビリティ | アクセシビリティ向上のためのルール。 |
Reactのサポート | Reactのベストプラクティスとコンポーネントベースの開発をサポート。 |
フックのルール | Reactフックのベストプラクティスをサポート。 |
コードフォーマットの一貫性 | Prettierなどを使用してコードフォーマットを一貫させる。 |
参考文献
![kei](https://res.cloudinary.com/zenn/image/fetch/s--c43p20Dt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8c6c3c1a2e.jpeg)
JavaScriptのコーディング規約と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 |
参考文献
![kei](https://res.cloudinary.com/zenn/image/fetch/s--c43p20Dt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8c6c3c1a2e.jpeg)
Airbnb JavaScript Style Guideに沿ったESLintの推奨設定(recommended)のサポート内容
コーディング規約 | Airbnb Style Guideの詳細 |
eslint:recommended のサポート |
---|---|---|
基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど、一般的なJavaScriptのベストプラクティス。 | サポート |
キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 | 部分サポート |
セミコロンの使用 | 各文の末尾にセミコロンを付ける。 | サポート |
インデントとスペース | インデントはスペース2つを使用。オペレーターの前後にスペースを入れる。 | 部分サポート |
文字列リテラル | 文字列にはシングルクォートを使用。 | 部分サポート |
中括弧のスタイル | 中括弧は新しい行に置かない。 | サポート |
コメントの追加 | コードの目的や重要な部分にはコメントを追加。 | 部分サポート |
エラーハンドリング | 適切なエラーハンドリングを行い、try...catch を使用。 |
サポート |
モジュールとインポート | ES6モジュールを使用し、import とexport を利用。 |
サポート |
参考文献
![kei](https://res.cloudinary.com/zenn/image/fetch/s--c43p20Dt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/8c6c3c1a2e.jpeg)
eslint-config-airbnbのサポート状況
コーディング規約 | 詳細 | eslint-config-airbnbのサポート |
---|---|---|
基本的なベストプラクティス | 変数宣言、関数定義、文末のセミコロンなど。 | サポート |
キャメルケースの使用 | 変数名、関数名はキャメルケースを使用。 | サポート |
セミコロンの使用 | 各文の末尾にセミコロンを付ける。 | サポート |
インデントとスペース | インデントはスペース2つを使用。オペレーターの前後にスペースを入れる。 | サポート |
文字列リテラル | 文字列にはシングルクォートを使用。 | サポート |
中括弧のスタイル | 中括弧は新しい行に置かない。 | サポート |
コメントの追加 | コードの目的や重要な部分にはコメントを追加。 | サポート |
エラーハンドリング | 適切なエラーハンドリングを行い、try...catch を使用。 |
サポート |
モジュールとインポート | ES6モジュールを使用し、import とexport を利用。 |
サポート |
アクセシビリティ | アクセシビリティ向上のためのルール。 | 部分サポート |
Reactのサポート | Reactのベストプラクティスとコンポーネントベースの開発。 | サポート |
フックのルール | Reactフックのベストプラクティス。 | サポート |
コードフォーマットの一貫性 | Prettierを使用してコードフォーマットを一貫させる。 | サポート |
このスクラップは1ヶ月前にクローズされました