目次

1. Installing VSCode Extensions

2. Installing the following packages as devDependencies

3. Creating configuration files

4. Overriding VSCode Settings

That's it!

この記事では、VSCODEを使用したプロジェクトでのリンク設定を行います.

VSCode拡張モジュールのインストール

まず、VSコードで次の拡張モジュールをインストールする必要があります.

ESLint Extension

Prettier

以下のパッケージをdevdependenciesとしてインストールする

エスライン

エスニック設定

エスニック設定

プラグインのインポート

ESPINTプラグイン

エスプリプラグイン

プラグインプラグイン

プラグインの反応

プラグインライブラリ

プラグインプラグイン

冗談

前途

端末で以下のコマンドを実行するだけです.

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-plugin-jest jest prettier

設定ファイルの作成

プロジェクトのルート(/srcフォルダと同じレベル)に次のファイルを作成します

.エスライントラック.JSON

.エスリンチノーネ

.プレテック

.プレティルト

.eslintrc.JSON

{
  "root": true,
  "settings": {},
  "env": {
    "browser": true, // Enables browser globals like window and document
    "amd": true, // Enables require() and define() as global variables as per the amd spec.
    "node": true, // Enables Node.js global variables and Node.js scoping.
    "jest/globals": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 2020, // Use the latest ecmascript standard
    "sourceType": "module", // Allows using import/export statements
    "ecmaFeatures": {
      "jsx": true // Enable JSX since we're using React
    }
  },
  "extends": [
    "airbnb",
    "prettier",
    "plugin:testing-library/react",
    "plugin:jest/all"
  ],
  "plugins": ["prettier", "react", "react-hooks", "testing-library", "jest"],
  "rules": {
    "prettier/prettier": ["warn", {}, { "usePrettierrc": true }], // Use .prettierrc file as source
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // To allow importing .jsx files
    "no-console": 1,
    "no-unused-vars": 1,
    "import/no-unresolved": 2,
    "no-undefined": 2,
    "react/jsx-uses-vars": 2
    // add more rules here...
  }
}

エスリングノーネ

node_modules

プレキャスト

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "endOfLine": "auto"
}

を返します.

node_modules

vscode設定の上書き

クリエイト.VSCodeフォルダとその設定の内部.JSONファイル

This is important due to different VSCode options among developers working on the same project.

設定.JSON

{
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.json"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

それだ！

ここでCtrl + Shift + Uキーを押して出力タブを開き、ドロップダウンメニューからeslintを選択します.

[Info  - 3:31:54 PM] ESLint server is starting
[Info  - 3:31:55 PM] ESLint server running in node v14.16.0
[Info  - 3:31:55 PM] ESLint server is running.