CRA+ESLint+Prettier設定

ここでは、CRAを使用して作成した応答項目に基づいてデフォルトのESLintおよびPrettierを設定する方法について説明します.
CRAによって生成された項目にはESLintが個別にインストールされているため、個別にインストールする必要はありません.

Prettierのインストール

$ yarn add -D prettier

PrettierとESLintを同時に使用するには、次のモジュールを追加でインストールする必要があります.

$ yarn add -D eslint-config-prettier

eslint-config-prettier
ESLintのフォーマットに関する設定では、Prettierと競合する部分を無効にします.

次に、プロジェクトのルートパスに.eslintrc.jsonファイルを作成し、次の内容を追加します.

{
  // ...
  "extends": ["react-app", "prettier"]
  // ...
}

ESLint，Prettier Extensionのインストール

ノードモジュールがインストールされ、Vscodeと一緒に使用するために必要な拡張機能をインストールし、設定を変更する必要があります.
Vscode拡張:Marketplaceに入り、ESLintとPrettierを検索してインストールします.

Vscode設定

Vscodeでは、設定コードはファイルを保存するたびに自動的に変更されます.
Vscode設定(ウィンドウ、LinuxではCtrl+、MacではCmd+).
設定に入ると、Search settings入力ウィンドウの下にUserとWorkspaceエントリがあります.
ユーザーはVscode自身の設定ですべてのプロジェクトに適用し、Workspaceは現在のプロジェクトにのみ設定を適用し、設定項目は.vscode/settings.jsonに格納します.
ESLintとPrettiterの場合、設定はプロジェクトによって異なることが多いため、ワークスペースごとに設定ファイルを個別に管理することをお勧めします.
jsonファイルを直接入力できるように設定し、右上隅で紙型Open Setting(JSON)アイコンをクリックするとsettings.jsonファイルが開き、以下のコードが追加されます.

{
  // Set the default
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Enable per-language
  // 사용하고자 하는 언어의 Vscode 설정 방법을 구글링하여 추가합니다. 
  // js
  "[javascript]": {
    "editor.formatOnSave": true
  },
    
  // jsx, ts 등등
  // ts
  "[typescript]": {
    "editor.formatOnSave": true
  },
  // jsx
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

Prettier設定

ESLintプロファイルと同様に、ルートパスに.prettierrcを作成します.Prettierのオプションドキュメントで必要なオプションを選択して設定すればよい.

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

参考資料

https://velog.io/@yrnana/prettier%EC%99%80-eslint%EB%A5%BC-%EA%B5%AC%EB%B6%84%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90