挫折した人のための ESLint + Prettier 環境構築 on VSCode ロードマップ01

JavaScript / jQuery
この記事は約10分で読めます。

スポンサードサーチ

挫折した理由

どうも上かるびです。

半年以上前、VSCode上で「ESLint」「Prettier」「StyleLint」を使おうと思って、挫折したことがありました。

当時は上記3つをいっぺんに導入しようとしたため理解できずに挫折しました。

 

その後webpackの導入を経験し、「ESLint」「Prettier」「StyleLint」などの記事をたくさん調べていく中で少しずつ分かってきました。

全て理解してから記事にしたかったのですが長くなりそうなので、自分の中で理解でき次第、ロードマップ形式で継ぎ足して書いていこうと思います。

ネコーダー
ネコーダー

「ロードマップ」って頼りたくなる安心感あるよね。

ここからは概要や前置きになります。「とにかく本題に行ってくれ!」という方はこちらへジャンプしてお進みください。

ロードマップ概要

考えているロードマップは以下の通りです。

①ESLintとPrettierを連携(VSCodeは連携しない)←本記事
②ESLintとPrettierを連携(VSCodeと連携し、保存時などのタイミングでPrettierを走らせる)
③上記をwebpackに組み込む
④StyleLintやVueも組み込む(ここは余裕があれば)

スポンサードサーチ

現在のコーディング環境

  • HTML/CSS(Sass)をメインで書いて、動きなどを持たせるのにJavaScript、jQuery、その他swiper、slick、GSAPなどの代表的なライブラリを使用。
  • フルスクラッチ(一からすべて考えて構築)でJavaScriptを書くことは皆無。
  • 近々Vue.jsを使うため勉強中。
  • タスクランナーはgulpを使用。webpackと組み合わせるor全乗り換えしたいけど、まだ移行できておらず勉強中。実務ではgulpのみ使用。

理想の環境構築

gulpとwebpackの連携がまだ完全に理解できていないので、各ツールとの連携もモヤモヤしておりますが、ざっくりと下図のイメージで環境構築していきたいと思っております。

スポンサードサーチ

本記事について

ESLintとPrettierの連携などの記事を検索すると、わりとある程度知識やスキルがあること前提で説明されているものが多いと感じおります。(Reactを併用しているケースが多い気がする)

ですが私はそこまで強くないので、初心者レベルでのお話になるかと思います。ご了承ください。

本記事を読むのに向いている人

上記の通り私はJSをゴリゴリ書く人ではないので、エンジニア向けではなく、Webデザイナー兼コーダーの方などJSをたまに書くような人向けです。

なおかつ、以下の項目に当てはまる人におすすめかと思います。

  • ESLint、Prettierを導入しようとして挫折した経験がある
  • チームでコーディングしている(する予定がある)
  • JavaScriptの構文がきちんと書けているか不安。

前提知識・スキル

こちらはあればよし、なくても大丈夫、くらいの項目です。

分からないところは極力コピペで済むように進めていきます。

  • npm
  • Node.js
  • コマンドプロンプト(黒い画面)、Powershell(青い画面)
  • jsonファイルの書き方

気を付けていきたいこと

現在進行形でESLintやらPrettierのいろんな記事を見て勉強しているのですが、

わりと非推奨の書き方で進めているものも見かけます。

非推奨ということは思わぬエラーを起こしたり、将来的に修正しなければならないリスクを抱えているということだと考えています。

この記事ではできるだけ非推奨の書き方を避けていきます。もし非推奨の書き方をしていたらコメントやTwitterなどで気軽に指摘していただきたいですm(_ _)m

ESLintとPrettierについて

前置きが長くなりましたが、ここから本題に入ります。

まずはESLIintとPrettierの概要について説明します。それぞれどのような役割をするものなのでしょうか。

リンター
リンター

俺はESLintの化身、リンターだ!一言でいうとコードが正しく書かれているか品質チェックするぜ!

プリティア
プリティア

Prettierの化身、プリティアです!コードを美しくフォーマット(整形)するよ。

スポンサードサーチ

VSCodeにESLintとPrettierをインストールする

では実際にVSCodeに入れていきましょう。

今回は新規でフォルダを作って、その中でのみ動くようにします。

つよつよの人の記事などでは「プロジェクトフォルダ(ファイル)」とか言ってます。

というのも、例えばAサイトを作るときと、Bサイトを作るときでは、CSSやJavaScriptなどの仕様が変わる場合があります。

ネコーダー
ネコーダー

分かりやすいのはIE対応かな?Sassのベンダープレフィックスをつけたり、JavaScriptの書き方を変えたりするか、切り替える必要があるんだ。

 

 

 

今回はESLinやPrettierをインストールするフォルダのことをプロジェクトフォルダとして進めていきます。(この単語を使わないかもしれませんが一応。)

前提条件

今回の記事を書くのに使ったパッケージなどのバージョン情報です。

VSCode:最新バージョン(1.54)

node:v12.18.1

npm:6.9.0

 

nodeとnpmに関してはパソコンというかユーザーとしてインストールしているのが一般的だと思いますので、インストール方法については省略します。(ググればたくさん良記事出てきます。)

ちなみに最近知ったのですが、Windowsの場合、普通にnode.jsをインストール(npmも同梱される)するのではなく、nodistというnodeのバージョンを管理できるものをインストールすればよいということを知りました。
(nodeをインストールしてからnodistをインストールすると上手くいかないことがあるらしい。)

初期設定

最終的にはVSCodeの拡張機能のESLintとPrettierを使いますが、今回はVSCodeとは連携せずに使いたいので、既に拡張機能を入れている場合は一旦無効にしてください。

まずはVSCodeの「フォルダを開く」でプロジェクトフォルダを開きます。(フォルダ名はtestとしました)。

開けたらターミナルを開き、下のコマンドを打ちます。

これでpackage.jsonができました。

次にsrcフォルダを作成し、その中にindex.htmlとindex.jsを作成します。

フォーマットされているかチェックするために、それぞれのファイルに適当な記述を加えます。
(htmlファイルの方は特に中身がなくても大丈夫です。)

jsファイルの方は整形のチェックをしたいので、シングルとダブルのクオートを混ぜたり、セミコロンを付けたり付けなかったりするコードにします。

必要なパッケージをインストール

ターミナルで

  • ESLint
  • Prettier

をインストールします。

ネコーダー
ネコーダー

でも実はESLintには本来フォーマット機能もついてるんだ。

リンター
リンター

俺のルールでキレイにしてやるぜ!

プリティア
プリティア

え?私のルールの方がキレイになるんですけど?

ネコーダー
ネコーダー

という感じでケンカしてしまうからESLintのルールをオフにする「eslint-config-prettier」というプラグインも入れる必要があるんやで。

 

インストールします。

記事によっては「eslint-plugin-prettier」を使っているところもありますが、このプラグインは非推奨なので使いません。

ESLintの設定をする

ESLintの設定は、「.eslintrc.json」というファイルに書いていきます。

記事によっては「.eslintrc.js」を使っていますが、こちらは非推奨です。
とりあえず最低限の設定をしてみます。

 

ESLintを動かしてみる

基本的な設定が終わったのでESLintを実行してみましょう。

その前にコマンドでESLintを実行できるように、ショートカットキーを設定します。

package.jsonのscriptに以下のように記述を加えます。

 

 

 

 

(※「lint」は任意の名称です。)

この設定をしてターミナルで「npm run lint」と打つと、eslintを実行してくれます。

./src~はESLintを実行するディレクトリを指しています。

今回はsrcより下にあるすべてのjsファイルを対象にしています。

それではターミナルで以下のコマンドを打ってみましょう。

しっかり警告を出してくれました。

リンター
リンター

シングルクオートを使え!

本来はもっと様々なルール設定をするのですが、今回は動かせたらOKということにします。

もっと知りたいという方は公式ドキュメントをご覧ください。

Prettierを動かしてみる

続いてPrettierで整形してみます。

プリティア
プリティア

任せなさい。

PrettierもESLint同様、設定ファイルを作ります。(package.jsonに書く方法もあります。)

新規で「.prettierrc.json」というファイルを作成し、以下のコードをコピペします。

 

タブのサイズを8、セミコロンをつける、という整形になります。

せっかくなので、先ほど使った「lint」のコマンドでprettierも実行するようにpackage.jsonを変更します。

–writeのオプションで整形したコードで上書きします。

これで再度ターミナルでnpm run lintを実行してみましょう。

するとindex.jsのすべての文末にセミコロンがつき、インデントが8スペース分になっているかと思います。

さらに今回は対象のディレクトリを./srcにしたので、index.jsだけでなく、index.htmlのファイルもインデントが8スペース分に変わっているはずです。

プリティア
プリティア

キレイになったでしょ

Prettierも公式ドキュメントを一度見てみることをおすすめします。

ESLintとPrettierをどう連携していくか

ここからはまだ勉強中なので最適解がわからない状態です。

ただ、今まではESLintとPrettierを連携させるのが一般的な手法みたいだったのですが、どうやら公式ドキュメントを読む限りは、Prettier単体で動かして、PrettierにESLintのプラグインを導入する、みたいな流れもあるみたいです。

上かるび
上かるび

まだどれが最適解なのか探り探りです…。

 

 

次のステップ

次はVSCode上で保存したときにPrettierが自動で走るように設定したいです。

拡張機能入れればすぐなんですが、ESLintとどう連携するのがベターなのか調べているところです。

自分の中で納得できる答えが出ましたら、またこの記事の続きを書いていこうと思います。

 

とりあえず、ESLintとPrettierを動かせた皆さん、そして自分。頑張りました!素晴らしいです!

コメント

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