挫折した理由
どうも上かるびです。
半年以上前、VSCode上で「ESLint」「Prettier」「StyleLint」を使おうと思って、挫折したことがありました。
当時は上記３つをいっぺんに導入しようとしたため理解できずに挫折しました。
その後webpackの導入を経験し、「ESLint」「Prettier」「StyleLint」などの記事をたくさん調べていく中で少しずつ分かってきました。
全て理解してから記事にしたかったのですが長くなりそうなので、自分の中で理解でき次第、ロードマップ形式で継ぎ足して書いていこうと思います。
「ロードマップ」って頼りたくなる安心感あるよね。
ロードマップ概要
考えているロードマップは以下の通りです。
現在のコーディング環境
- 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のいろんな記事を見て勉強しているのですが、
わりと非推奨の書き方で進めているものも見かけます。
非推奨ということは思わぬエラーを起こしたり、将来的に修正しなければならないリスクを抱えているということだと考えています。
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に関してはパソコンというかユーザーとしてインストールしているのが一般的だと思いますので、インストール方法については省略します。（ググればたくさん良記事出てきます。）
初期設定
まずはVSCodeの「フォルダを開く」でプロジェクトフォルダを開きます。（フォルダ名はtestとしました）。
開けたらターミナルを開き、下のコマンドを打ちます。
|
1 |
npm init -y |
これでpackage.jsonができました。
次にsrcフォルダを作成し、その中にindex.htmlとindex.jsを作成します。
フォーマットされているかチェックするために、それぞれのファイルに適当な記述を加えます。
（htmlファイルの方は特に中身がなくても大丈夫です。）
jsファイルの方は整形のチェックをしたいので、シングルとダブルのクオートを混ぜたり、セミコロンを付けたり付けなかったりするコードにします。
|
1 2 3 4 5 6 7 |
const test = "テスト" console.log(test) document.getElementById('box').addEventListener('click', function () { alert('this is alert'); }); |
必要なパッケージをインストール
ターミナルで
- ESLint
- Prettier
をインストールします。
|
1 |
npm i -D eslint prettier |
でも実はESLintには本来フォーマット機能もついてるんだ。
俺のルールでキレイにしてやるぜ！
え？私のルールの方がキレイになるんですけど？
という感じでケンカしてしまうからESLintのルールをオフにする「eslint-config-prettier」というプラグインも入れる必要があるんやで。
インストールします。
|
1 |
npm i -D eslint-config-prettier |
ESLintの設定をする
ESLintの設定は、「.eslintrc.json」というファイルに書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "env": { "browser": true, //ブラウザでメジャーなもの（documentなど）を許可 "es6": true //ES6の書き方許可 }, "extends": [ "eslint:recommended", //ESLintおすすめルールの読み込み "prettier" //Prettier適用 ], //個別ルール "rules": { "no-extra-semi": "warn", //セミコロンがないと警告 "quotes": [ //シングルクオートを使っていないと警告 "warn", "single" ] } } |
ESLintを動かしてみる
基本的な設定が終わったのでESLintを実行してみましょう。
その前にコマンドでESLintを実行できるように、ショートカットキーを設定します。
package.jsonのscriptに以下のように記述を加えます。
|
1 |
"lint": "eslint ./src/**/*.js" |
（※「lint」は任意の名称です。）
この設定をしてターミナルで「npm run lint」と打つと、eslintを実行してくれます。
./src～はESLintを実行するディレクトリを指しています。
今回はsrcより下にあるすべてのjsファイルを対象にしています。
それではターミナルで以下のコマンドを打ってみましょう。
|
1 |
npm run lint |
しっかり警告を出してくれました。
シングルクオートを使え！
本来はもっと様々なルール設定をするのですが、今回は動かせたらOKということにします。
もっと知りたいという方は公式ドキュメントをご覧ください。
Prettierを動かしてみる
続いてPrettierで整形してみます。
任せなさい。
PrettierもESLint同様、設定ファイルを作ります。（package.jsonに書く方法もあります。）
新規で「.prettierrc.json」というファイルを作成し、以下のコードをコピペします。
|
1 2 3 4 |
{ "tabWidth": 8, "semi": true } |
タブのサイズを８、セミコロンをつける、という整形になります。
せっかくなので、先ほど使った「lint」のコマンドでprettierも実行するようにpackage.jsonを変更します。
|
1 2 3 4 5 |
"lint": "eslint ./src/**/*.js" ↓ "lint": "eslint ./src/**/*.js && prettier --write ./src" |
–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を動かせた皆さん、そして自分。頑張りました！素晴らしいです！
コメント