ESLint簡単導入 × VSCode

node.js をインストールする

NodeBrewをインストール

NodeBrew は Nodeのバージョンを管理するツール
似たものに nodenv というものもある

bash

brew install nodebrew

Nodebrewのセットアップ

初めに打たなければいけない

bash

nodebrew setup

最新版のnode.jsをインストール

もちろんバージョンを指定してインストールしても良し
nodebrew ls-remote で提供されているバージョンを調べられる

bash

nodebrew install-binary latest
nodebrew ls # インストールしたnode.jsのバージョンを確認

バージョンを指定して使用できるようにする

複数のバージョンを切り替えるときにも同じようにバージョンを指定する

bash

$ nodebrew use v12.4.0 # ls で確認したバージョンを指定

パスを通す

.bash_profile

PATH=/usr/local/var/nodebrew/current/bin:$PATH

参考：MacにNode.jsをインストール
参考：【2018年版】macのhomebrewでnodebrew入れてからnode.jsを入れるまで

ESLintをインストールする

ざっくりコマンド

$ cd {プロジェクトルート} # プロジェクトルートに移動

# package.json作成していない場合
$ npm init # 対話式でpackage.json作成 (適当にエンターでOK)

$ npm install eslint --save-dev # eslintのインストール (開発環境にしか必要ないはずなので --save-dev を付与)

$ npm install -g eslint-cli # eslintをグローバルインストールしなくてもeslintコマンドがパス通るようになる

$ eslint --init # ESLintの初期化 (.eslintrcファイルの作成)

eslint --init の対話内容

# コードスタイルも強制してもらおうかなと一番厳しめな一番下を選択
? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style

# フロントのJSしか書かないつもりなので一番上を選択
? What type of modules does your project use? 
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these

# フレームワークは使わないので一番下を選択
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these

# TypeScriptは使わないので N
? Does your project use TypeScript? (y/N) N

# フロントのJSしか書かないつもりなので Browser のみ選択
? Where does your code run? 
❯◉ 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) 

# よく分からないけれど Airbnb を選択
? Which style guide do you want to follow? 
❯ Airbnb: https://github.com/airbnb/javascript 
  Standard: https://github.com/standard/standard 
  Google: https://github.com/google/eslint-config-google 

# 設定ファイルといえばJSONのイメージなのでJSONを選択
? What format do you want your config file to be in? 
  JavaScript 
  YAML 
❯ JSON 

# どうやら Airbnb だとESLintのバージョンを下げなければいけないらしくて大人しく従う Y
? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0. You are currently using eslint@7.1.0.
  Do you want to downgrade? (Y/n) Y

# 関連するパッケージをインストールしろと言われたので Y
eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1
? Would you like to install them now with npm? (Y/n) Y

参考：ESLintと「eslint --init」による「.eslintrc.json」の生成

VSCodeの拡張機能をインストールする

• ESLint をインストールする
• Cmd + Shift + P > ESLint: enable ESLint を実行
• 自動的にJSファイルがチェックされるようになるはず・