VSCodeにESLintを導入する方法【Mac】【初心者向け】

ESLintプログラミング備忘録
https://eslint.org/からの画像

どうも、ちゃんかま(@chan_kama0244)でございます。

もしかして、VSCodeにESLintを導入する方法についてお調べですか? 
拡張機能をインストールするだけで使えると思っていたのに、何だか面倒な設定が必要なので断念しそうですか?

実は私もターミナルのコマンド操作や、Node.jsのインストールなどが面倒に感じて、しばらくはVSCodeでESLintを導入していませんでした。
しかし実際に導入してみると、初心者でもそんなに面倒な作業ではありませんでしたよ。

そこで今回はVSCodeにESLintを導入する方法について、初心者向けに分かりやすく解説します。

この記事の解説内容はMacを使用していることが前提です。
Windowsを使用している方は、他のサイトをお調べください。

この記事ではこんな疑問や悩みにお答えします
  • VSCodeにESLintを導入する方法について知りたい
  • 他のサイトを検索してみたけど、「Node.js?」、「npm?」、「ターミナル?」、良く分からない・・・
この記事の内容
  • VSCodeにESLintを導入する方法【Mac限定】
  • 初心者向けに分かりやすく解説しています
スポンサーリンク

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

VSCodeの拡張機能でESLintをインストールします。

VSCodeの画面左に、縦に並んでいるタブから拡張機能をクリック。
検索欄に「ESLint」と入力します。
すると検索結果が表示されるので、下記の画像の拡張機能を選択しインストールボタンを押します。

拡張機能をインストール
拡張機能をインストール

インストールが完了すると上記の画像のように、緑色のインストールボタンが消えて、ネジのようなESLintの設定ボタンに変化します。

これでVSCodeの拡張機能のESLintはインストール完了です。
ただし、これだけではVSCodeでESLintは機能しません。

スポンサーリンク

VSCodeでESLintを使うには拡張機能をインストールするだけではダメ

試しにJavaScriptのファイルに、適当に「const」とかだけ入力しても、何もメッセージは表示されません。

ESLintが機能していない
ESLintが機能していない

ちなみにESLintが機能している場合は、下記の画像のように赤の波線で問題を知らせてくれます。

赤の波線で問題を知らせてくれる
赤の波線で問題を知らせてくれる
問題の内容を表示してくれる
問題の内容を表示してくれる

まだESLintが機能していないことが分かるかと思います。

実はVSCodeでESLintを機能させるためには、拡張機能をインストールするだけではダメです。
ターミナルでコマンドを実行して、ESLintのファイルを作成する必要があるんですね。

プログラミング初心者だと難しく感じるかもしれませんが、この後の記事どおりに進めていけば大丈夫です。

VSCodeのターミナル画面を開く

ESLintを機能させるためには、ターミナルで「npm」というコマンドを入力して、ESLintのファイルを作成する必要があります。

「npm?」、「ターミナル?」と思うかもしれませんが、この後の手順どおりに進めれば大丈夫です。

「npm」とは「Node.js」で実行されるコマンドです。
まずは、このNode.jsをインストールする必要があります。

インストール作業はターミナルでコマンドを入力するので、VSCodeでターミナルの画面を開く方法を確認します。
VSCodeの画面上部にあるメニューバーから「表示」を選択し、その中の「ターミナル」をクリックします。
するとVSCodeの画面下部にターミナルの画面が開きます。

表示 → ターミナル
表示 → ターミナル

このターミナルの画面を開くときに、ESLintを機能させたいJavaScriptファイルがあるフォルダを、VSCodeで開いている必要があります。

例えば「app」というフォルダにある「main.js」というJavaScriptファイルでESLintを機能させたい場合は、VSCodeでこの「app」フォルダを開いておきます。
その後に、上記の「表示 → ターミナル」でターミナルの画面を開きます。

Node.jsをインストール

Node.jsをインストールするためには、その前に「Homebrew」と「nodebrew」をインストールする必要があります。
順番としては、Node.jsをインストールするためにnodebrewが必要で、そのnodebrewをインストールするためにはHomebrewが必要、というわけです。

面倒に感じるかもしれませんが、ターミナルにコマンドをコピペして実行するだけです。
Node.js(Homebrewとnodebrewを含む)のインストールは、下記の記事が参考になるかと思います。

MacにNode.jsをインストール - Qiita
MacにNode.jsの環境を構築するメモ。 その前に ※以下の方法もオススメです! MacにNode.jsをインストール(anyenv + nodenv編) 上記の場合はプロジェクト毎(フォルダ毎)にNodeのバージョンを指定...

上記の記事どおりに、ターミナルにコマンドをコピペして実行すればOKだと思います。

npmでESLintをインストール

Node.jsのインストールが完了すると、ターミナルで「npm」コマンドが使えるようになります。
このnpmコマンドでESLintをインストールしていきます。

npmコマンドを使ったESLintのインストールは、下記の記事が参考になるかと思います。

Visual Studio CodeでESLintを使う | 山本隆の開発日誌
eslintをインストールする ESLintがインストールされていない場合は、コマンドプロンプトから次のコマンドを実行して、ESLintをインストールします。 npm install -g eslint ESLintがインストールされているかは、次のコマンドを実行して確認できます。 eslint -v インストールされ...

上記の記事どおりに、ターミナルでコマンドを実行していけばOKだと思います。

ただし、上記の記事内の「念のため、標準のJavaScriptの検証機能を無効にします」という箇所について、私は設定していません。
設定していなくても、問題無くESLintの機能は使えています。

また上記の記事内で「eslint –init」の後に聞かれる質問への回答で、迷ってしまう方が多いかと思います。
eslint –initの後に聞かれる質問の意味と回答については、下記の記事が参考になるかと思います。

参考までに、私の回答は下記のとおりです。

How would you like to use ESLint?   >   To check syntax, find problems, and enforce code style 

What type of modules does your project use?   >   JavaScript modules

Which framework does your project use? (Use arrow keys)   >   Vue.js
(VueやReactを使ってない方は、None of theseを選択)

Does your project use TypeScript?   >   n
(TypeScriptを使ってる方はyを選択)

Where does your code run?   >   Browser,Node
(この質問だけは、スペースキーを押すと✓がつくようになっている)

What format do you want your config file to be in?   >   JSON

How would you like to define a style for your project?   >   Use a popular style guide

Which style guide do you want to follow?   >   Google

インストールが完了すると「node_modules」、「.eslintrc.json」、「package-lock.json」、「package.json」というファイルが作成されます。

この中の「.eslintrc.json」がESLintの設定ファイルです。

ESLintのファイルが作成されている
ESLintのファイルが作成されている

ESLintはそのままでも使えますが、自分でルールをカスタマイズして使うことも出来ます。
「.eslintrc.json」の中の「”rules”」に、カスタマイズしたルールを書くことが出来ます。

私はインデントをタブにしたかったので、以下のようにルールを書き加えました。

"rules": {
	"indent": [2, "tab"],
	"no-tabs": 0
}

これでVSCodeでESLintが機能します。

問題の内容を表示してくれる
ESLintが機能している

もしも機能していない場合は、VSCodeの画面下部の「ESLint」のタブをクリックしてみてください。

画面下部のESLintタブ
画面下部のESLintタブ

おわりに

VSCodeにESLintを導入する方法について解説しました。

私もプログラミング初心者ですが、ネットの記事検索で無事に導入することが出来ました。
ただしネットの検索記事では初心者には分かりにくい箇所もあったので、この記事で私なりに解説してみました。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんかまでした。

コメント

タイトルとURLをコピーしました