VSCodeでJavaScriptの環境作り（Prettier/ESLint編） #JavaScript

概要

基本の組み合わせですよねってことでそれぞれを軽く触りつつ整理していく。

前提

VSCodeインストール済み
Node.jsインストール済み

VSCode, Node.jsについての説明は基本的に割愛します。

これを書いている環境は以下の通りです。

Windows 10
VSCode v1.38.1
Node.js v12.4.0

WSL/WSL2便利すぎてWindowsで作業することが最近多い...あと半年ぐらいしたらWSL2に完全移行しても良いと思う。

Prettier

Prettier is コードフォーマッター。

VSCodeの機能で整形してみる

VSCodeを開いて適当なディレクトリにindex.jsを作成し以下のコードを書いておく。あえてフォーマットはごちゃごちゃ。

const hoge=()=>{
        return"hoge"}
console.log(`Hello ${hoge()}!`)

コンソールでindex.jsがあるディレクトリに移動して（VSCodeでディレクトリを開いていればそのままTerminalが使えるはず）、node index.jsを実行するとHello hoge!と表示されます。とりあえず動いてはいますね。

コマンドパレット（Cmd+Shift+P）を開いて、Format Documentを選択して見てください（またはShift+Alt+Fでもできます）。以下のように綺麗に整形されると思います。

const hoge = () => {
    return "hoge"
}
console.log(`Hello ${hoge()}!`)

あれ？フォーマッターいらなくね？？？って思いますね。

VSCodeはデフォルトの状態でも対応言語のフォーマッターを持っており、それに準じて自動でフォーマットをかけてくれます。デフォルトはPreferencesから色々と変更可能です。User設定とWorkspace設定を使えるので、これで事足りる場合は無理にPrettierを使う必要は無いかもしれません。
とは言えPrettierを使うとより細かい設定（特にLintとの兼ね合い）ができるので、使うことをおすすめします。

Prettierを使って整形する

ここからはnpmを使っていきます。

先程とは異なるディレクトリを用意してそのディレクトリでnpm init -yを実行します。先程のindex.jsも作成しておきます。npm i prettierでprettierをインストールします（実際の開発であれば-Dしておいてくださいね）。Terminalでnpx prettier .\index.jsを実行します。Terminal上に整形後のコードが表示されればOKです。--writeオプションを付けるとコードを整形して保存してくれます。ここまでが基本になります。現状ではPrettierのデフォルト設定でフォーマットされている状態になります。

Prettierの設定は色々な書き方ができます。詳細はConfiguration File · Prettierを参照してみてください。今回はルートディレクトリに.prettierrcファイルを作成していきます。内容は以下の通りです。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

ファイルを用意したら再度npx prettier --write .\index.jsを実行してみましょう。設定通りにフォーマットされていればOKです。ウオッチしてファイルに変更があったら整形して保存とかもできますが、今回の目標はVSCodeでの環境作りなのでこの辺にして次に進みましょう。

VSCodeでPrettierを使う

本題の1つ目ですね。

VSCodeプラグインのPrettier - Code formatterをインストールします。次にコマンドパレットにpreference workspaceと入力してVSCodeの設定画面を開きformatsaveで検索し、Editor: Format On SaveをOn(True)にします。その後、VSCodeを再起動しておきます。

後は適当にフォーマットを崩して上書き保存してみてください。自動的にフォーマットが適用されて保存されていると思います。VSCodeでPrettierを使うために必要なことは以下の通りです。

Prettier - Code formatterをインストール
PreferencesのEditor: Format On SaveをOn(True)にする
プロジェクトルートに.prettierrcを作成し設定を書く
VSCodeを再起動

まとめると簡単ですね。細かい設定はOptions · Prettierで調べてみてください。この辺りの内容はES6もTSも然程変わらない内容かなと思います。

ESLint

ESLint is 静的コード解析（ES用）。コードフォーマットもできるっちゃできます。

VSCodeの機能で静的コード解析をしてみる

VSCode上で適当にjsファイルを作成してファイルの内容をconst hoge =としてみてください。赤い波線で警告が表示されると思います。ま、よくあるIDE標準のコード解析ですね。最低限のコード解析で問題無ければ標準でも事足りるかもしれません。とは言えコーディング規約の適用コストを下げるのであればFormatter/Lintの導入は必須とも思えます。

ESLintを使ってコード解析をしてみる

適当なディレクトリでnpm init -yしてeslintをインストール（npm i eslint）します。インストール後、ルートディレクトリに.eslintrc.jsonというファイルを作成します。これがESLintのルールファイルになります。.eslintrc.jsonの内容を以下の通りに設定しましょう（一旦ね）。

{
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [],
  "parserOptions": {},
  "env": {
    "es6": true
  },
  "globals": {},
  "rules": {
    "semi": [
      "error",
      "never"
    ]
  }
}

内容としてはES6で書かれたコードを解析する＆推奨されているチェック仕様に準じると設定しており、個別の設定でセミコロンの仕様を禁止するルールにしています。ルールの詳細は「eslint rules」で検索すると色々出てきます。推奨されているチェック内容はPossible Errorsで確認できます。推奨を使わずに全てrulesに書くのはあまり賢い方法とは言えないです。

npx eslint --initで初期化してしまっても良いですね。

次にindex.jsの内容を以下のように書き換えます。

const hello = name => `Hello ${name}!`;
const hello2 = name => `Hello ${namae}!`

Terminal上でnpx eslint .\index.jsを実行します。おそらく以下のようなメッセージが表示されると思います。

C:\Users\userName\...\sample\index.js
  1:7   error  'hello' is assigned a value but never used   no-unused-vars
  1:39  error  Extra semicolon                              semi
  2:7   error  'hello2' is assigned a value but never used  no-unused-vars
  2:16  error  'name' is defined but never used             no-unused-vars
  2:33  error  'namae' is not defined                       no-undef

これがESLintがコード解析をした結果になります。後はエラーを潰していくだけで一定の品質やコーディング規約に準じたコードができ上がります。なんと素晴らしいことでしょうか。

VSCode上でESLintを動かす

Terminalから動かせばVSCode上でも動かせるわけですが、どうせなら自動で更にはリアルタイムで解析してもらいたいですよね。ってことでVSCodeのプラグインESLintをインストールします。インストールが終わったらindex.jsを開いてみましょう。npx eslint ...とコマンドを実行しなくてもLintが走ってますね。非常に簡単です。

.eslintrc.jsonのセミコロンのルールを削除してjsファイルを参照してみましょう。セミコロンの部分で発生していたエラーが無くなっているはずです。何をしなくとも.eslintrc.jsonを更新すればルールは適用されます。

VSCodeでPrettierとESLintを組み合わせて使う

ここからが本番と言っても過言じゃないですね。PrettierとESLintを組み合わせて使えば誰が書いてもコーディング規約はある程度守られてフォーマットのズレは無いという状態になります。最高ですね、ってことでやっていきましょう。

と、始める前に最終目標だけ整理しておきましょう。最終的に「ファイル保存時に自動的にフォーマットされる（VSCodeの設定 + Prettier）」「リアルタイムで静的コード解析が実行される（ESLint）」状態にしていきます。

npm関連

npm init -yをしてeslintをインストールしておきます。

プラグインのインストール

PrettierとESLintをインストールしておきます。

設定ファイルの用意

VSCodeのSettingsでEditor: Format On SaveをTrueにして、.prettierrcと.eslintrc.jsonを用意して以下の内容で記述しておきます。

// .prettierrc
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

// .eslintrc.json
{
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [],
  "parserOptions": {},
  "env": {
    "es6": true
  },
  "globals": {},
  "rules": {
    "semi": [
      "error",
      "never"
    ]
  }
}

この時点で保存するとFormatはかかるかと思います。

JavaScriptファイルで確認する

// index.js
const hello = name => `Hello ${name}!`;
const hello2 = name => `Hello ${namae}!`

上のjsファイルを作成して保存すると保存時にセミコロンはPrettierの設定により削除されてESLintが走ってエラーが表示されます。

後はチームでどのようなルールを作り適用させるかを検討すればOKです！

最後に

まとめて一気にやろうとすると難しく感じると思いますが、1つ1つ理解していくとそこまで難しい内容ではありませんね。Vue.jsやReactを使う時はもうちょっと面倒な感じになると思いますが、基本的なところを把握していれば対応はできると思います。

TypeScript（ESLintの代わりにTSLintを利用）でも同じように環境は作れます。便利なものは使って楽をしましょう。