スタイルガイド💻📔

Airbnbスタイルガイドは何ですか？

Airbnbスタイルガイドは、ベストプラクティスと品質コードを生成するためのガイドラインのセットです.それはGithubで利用可能な最も人気のあるスタイルガイドの一つです.
\- step 1 -プロジェクトにeslintをインストールする
エスリントは最も人気があり、非常に柔軟なJavaScriptリンギングツールです.それはあなたのJavaScriptコード内の問題のパターンを識別するためのスタティックコードアナライザです.
eslintをインストールするには、まずJavaScriptのパッケージマネージャNPMをインストールする必要があります.
さあ準備ができましたパッケージを作成します.JSONファイルは、次のコマンドを使用してデフォルトの設定です.npm init -yeslintを設定するには、次のことが必要です.最後に、次のコマンドでeslintをインストールします.npm install eslint --save-dev涼しくて、我々はeslintインストールでします.次に必要なのは、使用するスタイルガイドをインストールすることです.幸運にも、Airbnbは誰でも使うことができるeslint構成を提供します.
Step 2 - Airbnbスタイルガイドをプロジェクトにインストールする
ルールを実装する設定ファイルが必要です.ルールを実行する設定ファイルを作成することができますnpx eslint --initこのコマンドはいくつかのオプションを選択する.

第3のオプションで行きましょう.3番目のオプションを選択した後、Enterキーを押すと、オプションの別のセットを選択するから取得します.あなたが次のオプションを通過するまで、あなたの必要性に応じて最も適切なオプションを選択します.

ここから最初のオプションを選択し、オプションの次のセットからAirbnbのスタイルガイド.

あなたがAをセットアップしたいならばStandard style guide or Google’s style guide Airbnbのスタイルガイドの代わりにJavaScriptの場合は、指示の同じセットに従って、上記のステップからそれぞれのスタイルガイドを選択することができます.
スタイルガイドのインストールを完了するには、Enterキーを押して、必要に応じて他のオプションを選択します.これは.eslintrc.json 作業ディレクトリにファイルを表示し、以下のようになります.

また、あなたが選んだオプションに基づいて、あなたのパッケージ.JSONファイルは次のようになります

eslintのために見つけて、我々のテキストエディタの上でバグを修正するVS Code ESLint extension . だから、素晴らしい、我々はスタイルガイドの実装で行われている.今では、きれいなインストールに移動する時間です.
\- step 3 -プロジェクターにインストールする
prettierは最も人気のあるコードフォーマッタの一つです.ローカルコマンドを以下のコマンドでローカルにインストールできます.npm install --save-dev --save-exact prettier次に、ルートディレクトリの設定ファイルを作成する必要があります.echo {}> .prettierrc.jsonこのJSONファイルは、コードをフォーマットするために使用する規則を保持します.加えて、私は以下の私の設定のいくつかを追加しました.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "bracketSpacing": true,
  "singleQuote": true
}

さあ、インストールしましょうVS Code Prettier extension . それから、我々のすべてのJavaScriptファイルがきれいにフォーマットされるのを確実にする必要があります.設定に移動します.JSON FILE FILEコードと関連する既存の行を以下のように変更します.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

我々はほとんど完了です!保存時にフォーマットを確認するには、上のファイルに次の行を挿入します."editor.formatOnSave": true,それはeslintルールがきれいと競合することが判明します.それを避けるために、eslintの書式設定を無効にする必要があります.そのためには、1つの余分なNPMパッケージをインストールする必要がありますnpm i eslint-config-prettier次にprettier の配列を.eslintrc.json 下記のファイル.配列の末尾に追加し、他の設定を上書きするようにしてください.

それだ!現在、それは若干の楽しみのための時間です😋

Airbnbスタイルガイドのテスト

動作しているかどうかをテストするには、index.js ファイルを追加し、次のコード行を追加します.

かなりクール、右?😍 あなたが見ることができるように、eslintは見つけて、我々のコードの問題を解決して、保存の上できれいなフォーマットを修正します.

最後の思考

我々のワークフローにAirbnbのスタイルを組み合わせると、きれいに、我々はコードの品質を強化し、一貫性のあるスタイルガイドを維持するのに役立ちます.しかし、私は先に行くと、これらの各ツールのドキュメントを見てお勧めします.
読んでくれてありがとう!📒
Guarapo研究所は、彼らの考えを開発する際に人々を援助するデジタル製品をつくります.当社のスタッフは、すべての必要なスキルをあなたのWebとバーチャルリアリティゲームプロジェクトで動作する必要があります.私たちのコミットメントをどのようにソリューションを最大限に顧客の経験を提供する上で私たちのクライアントを教育する当社のソフトウェアの高品質に反映されます.
お問い合わせ[email protected]
ガラパソ研
エドウィンNunez -概要