Vscode開発環境の構成(ESLint、Prettyer、typescript)

ESLint設定
インストールeslint

npm install -D eslint	// -D = --save-dev
or
yarn add -D eslint

vscode拡張にeslintを追加します.
.eslintcファイルを生成します.

npm init @eslint/config
or
yarn create @eslint/config

前述したように、質問に答えることが基本です.eslintrc.jsonファイルの生成

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "windows"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "@typescript-eslint/strict-boolean-expressions": [
      2,
      {
        "allowString": false,
        "allowNumber": false
      }
    ]
  }
}

一般的なプラグインは次のとおりです.
Eslint-plugin-react:レスポンスプラグイン
@typescript-eslint/eslint-plugin::タイプスクリプトプラグイン
Eslint-plugin-prettyer:Prettyerプラグイン
Eslint-config-prettyer:eslintとprettyerルールが重複している場合にprettyerルールから除外されるプラグイン
Eslint-config-irbnb-base:airbnbプラグイン
eslint-config-next: Next.jsプラグイン
詳細については、次のESLintサイトを参照してください.
ESLint
Prettierのインストール
1)Vscodeのみで有効にする方法
vscode拡張にPrettier-Code formatterをインストールする

Prettier Setup
設定(ctrl+,)

環境を構成するために必要な機能を追加すればよい.
2)NPMを使用してプロジェクトの下部に設定する方法
きれいな取り付け

npm install -D prettier
or
yarn add -D prettier

ESLintがインストールされている場合
その他のプラグインのインストール

// eslint-plugin-prettier 플러그인
npm install -D eslint-plugin-prettier
or
yarn add -D eslint-plugin-prettier

// eslint-config-prettier 플러그인
npm install -D eslint-config-prettier
or
yarn add -D eslint-plugin-prettier

2つのプラグインをインストールします.
自動ソート機能の有効化
vscode設定値を変更して、ストレージ時の自動ソート機能を使用します.
ctrl + shift + p
Open Settingsを検索します.選択json(JSON)
次のコードを登録

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-
}

by Kazel