ESLint

📌 拡張機能: ESLint

ESLintの構成

まず、次のコマンドを使用する必要があります.

yarn add eslint -D

そして、すでに次のように初期化しています.

npx eslint --init

ESLint のセットアップを開始したので、最初の質問は、システムで ESLint をどのように使用するかに関するものです.

  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

次に、プロジェクトが使用するモジュールの種類を選択します.この例では、最初のオプション React を選択します.

? What type of modules does your project use? ...
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

次のステップでは、使用しているフレームワークを選択します.この例では、前のステップの React に従います.

? Which framework does your project use? ...
▸ React
  Vue.js
  None of these

次の質問は TypeScript に関するもので、例では使用しないので ** いいえ ** を選択しました.

? Does your project use TypeScript? » No / Yes

次のステップでは、コードを実行する場所を選択する必要があります.

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

ここで、プロジェクトで使用するスタイルを選択するよう求められます.既存のものから選択するか、スタイルを作成するか、独自のものを使用する必要があります.私は常に既存のものを使用することを選択し、AirBNB を使用することを選択します.

? How would you like to define a style for your project? ...
▸ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

最後に、構成ファイルの形式を選択しました.これも個人的な選択です.

? What format do you want your config file to be in? ...
▸ JavaScript
  YAML
  JSON

設定が完了すると、ESLint は ** npm * を使用して依存関係をインストールするかどうかを尋ねます.私たちのプロジェクトは * yarn ** を使用しているため、ここでは 2 つのオプションがあります.

選択 ** はい **、インストール後に生成された package.lock.json ファイルを削除し、yarn を実行して依存関係を yarn.lock ファイル

にインストールします

選択 ** いいえ **、説明されている依存関係のリストをコピーし、yarn add ... を使用してそれらをインストールします (このオプションを選択する場合は、-D を追加することを忘れないでください)

.eslintrc ファイルが作成されたので、上記の構成に対して次の設定を想定します.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb', 'plugin:react/recommended'],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
    'import/prefer-default-export': 'off',
    'jsx-quotes': ['error', 'prefer-single'],
  },
};

Install ESLint 拡張.