vscodeへeslint導入の手順（自分用メモ）

プロジェクトへのインストール

npm i -D eslint eslint-plugin-import eslint-plugin-react

それぞれのおそらくな説明

• eslint
  • eslint本体
• eslint-plugin-import
  • ES2015 +（ES6 +）インポート/エクスポート構文のリンティングをサポートし、ファイルパスとインポート名のスペルミスの問題を防止する（google直訳）
• eslint-plugin-react
  • react用

※ちな、後ほど行う　eslint --init　で足りないプラグインは結局インストールできる模様

cliのインストール

npm -g i eslint-cli

設定ファイルの作成

eslint --init
# 実行すると以下を順に聞いてくる

? How would you like to use ESLint? ... # ESLINTをどのように使用しますか
> To check syntax only # 構文チェックのみ
  To check syntax and find problems # 構文チェックと問題検索
  To check syntax, find problems, and enforce code style # 構文のチェック、問題検索、コードスタイルの強制
# 上下ボタンで選択できる、選択してEnter　とりあえず一番下を選んだ

? what type of modules does your project use? ... # プロジェクトのモジュールのタイプは？
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
# 使っているタイプで選択、今回のプロジェクトではCommonJSを選択

? Which framework does your project use? … # フレームワークつかってる？
❯ React
  Vue.js
  None of these
# Reactで書くつもりだったのでReactを選択した

? Does your project use TypeScript? › No / Yes # typescriptで書くの？
# typescriptはかんがえていなかったのでNoを選択　左右ボタンで選んでENTER

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
# スペースキーで選択できる 両方選んでみた

? 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) # javascriptファイルを検査する
# popularなのを使うにしました。

? Which style guide do you want to follow? … # どのスタイルをフォローする？
❯ Airbnb: https://github.com/airbnb/javascript # airbnb
  Standard: https://github.com/standard/standard # standard
  Google: https://github.com/google/eslint-config-google # google
# Standardを使ってみることにしました

? What format do you want your config file to be in? … # 設定ファイルの拡張子
❯ JavaScript
  YAML
  JSON
# JSONにしておきました。

# その後進めると以下の通り
Checking peerDependencies of eslint-config-standard@latest
The config that youve selected requires the following dependencies:
# 選択した構成には、次の依存関係が必要です。

eslint-plugin-react@latest eslint-config-standard@latest eslint@>=6.2.2 eslint-plugin-import@>=2.18.0 eslint-plugin-node@>=9.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.0
✔ Would you like to install them now with npm? · No / Yes
# installしていいかい？　→　YESでENTER

Successfully created .eslintrc.yml file in ... # とでて設定ファイル作成完了

プロジェクトのルート階層にできあがった.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}
# rules のところにいろいろルールを書けばいい様子

これで設定完了
VSCODEは勝手に.eslintrcを読み込んでくれるようです。