反応に便利なツールを開発する

反応液を開発する際に使う便利な道具を知っておきましょう.
Prettier
コードスタイルを自動的に管理するツール.このツールはCLI入力コマンドで使用するか、複数のエディタで使用できます.
JavaScript、HTML、CSSコードのコードスタイルを管理するだけでなく、REACT、Angular、Vueなどのライブラリをサポートし、プラグインを通じて他の言語を管理することもできます.
create-act-appを使用してプロジェクトを作成します.
vscodeの場合は、左側の拡張ラベルを選択し、検索ウィンドウで「Prettier」を検索し、「Prettier-Code formatter」というプログラムをインストールします.

次に、プロジェクトディレクトリに.prettierrcというファイルを作成します.このファイルはPrettierに使用する設定を加えることができます.

{
    "trailingComma" : "none"
    "tabWidth" :4,
    "semi" :false,
    "singleQuote": true
}

trailingCommaは、オブジェクト、配列、および関数の後にカンマを付けるかどうかを制御します.
「none」の場合、カンマは付けず、「es 5」と書いてある場合は、ES 5で有効な後行にカンマを付けます.tabWidth:クリックラベルの時空格子数を設定します.semi:セミコロンを使用するかどうかを確認しますsingleQuote:一重引用符を使用するかどうかを設定します.デフォルトはfalse二重引用符に設定されています.
その他の設定に関する内容はこちらで確認しておきます.
ESLint
JavaScript,JSXの静解析ツール,オープンソースプロジェクト.コードを分析し、構文エラーや逆パターンを見つけ、一貫したコードスタイルを作成するのに役立ちます.JSLint、JSHintなどのJavaScriptスタティック解析ツールもありますが、ESLintはカスタマイズが容易で拡張性が高いため、非常に多く使用されています.
ESLint設定カスタマイズ
eslintライブラリのインストール

yarn add eslint-config-airbnb

インストール後はpackage.jsonに入り、eslintConfig項目からairbnbを追加します.

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "airbnb"
    ]
  },

ESLint管理のルールとPrettier管理のルールが競合する場合があります.このような状況を防ぐために.yarn add eslint-config-prettierを実行し、衝突を防止します.package.jsonファイルには、eslintConfigのextendsにprettierが追加されている.
本人が設定したいルールはパッケージですjsonでrules値を設定すればいいです.

"eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ],
    "rules": {
      "react/jsx-filename-extension": 0
    }
  },

自分が動作しているエレメントの赤い線の文字にマウスを置くと、エラーが解釈されます.eslintのルール名も一緒に現れるので、赤い線が嫌いな場合は、ルールを作成して適用するだけでエラーは消えます.
Snippet
エディタに組み込まれた機能で、共通コードにショートカットキーを作成することでコードをすばやく生成します.
練習のためにSample.jsを作ります.

import React from "react";

function Sample() {
    return (
        <div>
            Hello React!
        </div>
    )

}

export default Sample;

関数の名前Sampleを変更する場合でも、ファイル自体の名前を参照して自動的に入力します.このため、Sampleではなく${TM_FILENAME_BASE}に変更します.
そしてPrettier.ioというサイトに入ります.
中に入ると下の画面が見えますが、

左に書いたばかりのSamplejsの内容を貼り付けると、右側に変形したコードが表示されます.左上隅のdescriptionでファイルの説明が作成されます.tabトリガは、対応するショートカットキーキーを設定する場所です.
このように書き終わったコードをコピーします.
その後vscodeに戻り、右下で言語モードをJavaScript Reactに変更します.右下に表示される言語をクリックすると、接続言語検索ウィンドウが表示され、JavaScript reactを入力して選択します.
次に、「ファイル」>「プリファレンス」>「ユーザー・コード・セグメント」の順にクリックします.次に、先ほど選択した言語JavaScript Reactを入力して選択すると、javascriptreact.jsonというファイルが表示され、Sniftに変更したコードの内容が貼り付けられます.

{
  "Create Functional React Component": {
    "prefix": "fc",
    "body": [
      "import React from \"react\";",
      "",
      "function ${TM_FILENAME_BASE}() {",
      "    return (",
      "        <div>",
      "            Hello React!",
      "        </div>",
      "    );",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "Create Functional React Component"
  }
}

では今はSamplejsで作成したすべてのコードを削除し、snipetの作成時に使用するキーワードを入力した場合、どうすればいいですか?

コードの内容はこつこつ!そして現れます.
もし一生の成果がある内容に焦点を当てたいなら?
このコンテンツに${数値:}を上書きすればよい.このとき${1:}${2:}があれば,1で囲まれた部分にフォーカスする.
例えば、コードを生成すると、HelloReact!焦点を合わせるには${1:Hello React!}はこのように記入すればいいです.
一度修正してキーワード生成を再入力すると?

生成後、HelloReactをフォーカスすることで、直ちに変更/追加が可能になります.
参考資料snippet-generator.app