見出し画像

リンターESLintでJavaScriptを修正したりする

Terralien

こんにちは。フロントエンド・バックエンド・インフラ（特にAWS）の知識をつまみ食いしてる寺です。

JavaScript開発環境ではESLintとPrettierが必須だよと言われてなんとなく入れているのですが、いずれも一体何なのか理解してなかったので勉強してみました。

前回学んだこと

Node.jsについて前回はトランスパイラbabelについて学びました。

今回学ぶこと

フロント開発環境でJavaScriptを扱う際に必須とも言えるESLintについて学びます。

ESLintとは

JavaScript開発環境で使用するリンティングツールです。
構文やスタイルに間違いがあると指摘してくれたり修正してくれたりします。

たとえばこちらはJavaScriptのスタンダードな記述方法一覧です。

これ全てを覚えてこなすことはできるでしょうか？
私は抜けや漏れが出る気しかしません。
そんなときESLintがあればいい感じに指摘や修正をしてくれるわけです。（さっき知った）

リンティングツール

ESLint公式サイトの表記に準じました。構文チェックツール、リンター、リントツールともいいます。

構文エラーやバグを未然に防ぐためチェックに使うツールです。
（リン？何？レベルの知識でした）

ESLintの特徴

  • カッコやインデント、改行の位置に至るまで全てのルールをカスタマイズできます。

  • ルールを共有できるためチーム開発などのプロジェクトで共有することでコードの体裁統一化ができます。

インストール方法

npmでインストールできます。

用途によってグローバルインストールとローカルインストールを使い分けてください。

とりあえず環境ごちゃごちゃしたくないのでEnvaderでインストールを試します。

グローバルインストール

パスが通るので使いやすい一方で、環境によって異なるバージョンを使えないためなんとも言えない感じです。

sudo npm install -g eslint

ローカルインストール

様々なプロジェクトごとにルールが異なると思われますのでこちらを使用したほうがいいと思います。
プロジェクトに見立てたディレクトリを作成し、開発環境としてインストールします。

mkdir sample-projectcd sample-project
# npm初期化
npm init -y
# ESLintインストール
npm install eslint --save-dev


--save-devすることでpackage.jsonの devDependenciesに追加されます。

こちらに追加されると開発環境でのみインストールされるパッケージとして認識されます。

初期設定

以下のコマンドを実行することで対話的に設定できます。

bashnpm init @eslint/config

簡単な英語なのでDeepLさんを使えばだいたい分かるのですが、ちょっと意味がわからないという場合は参考にしてください。

使い方

ここではnpxを使用します。
npxを使用するとコマンド実行する際に足りていないパッケージがあれば自動的にインストールしてくれた上、実行後にパッケージ除去まで行ってくれます。

npx eslint [ファイル名]
# 修正する場合は
npx eslint [ファイル名] --fix

コード引用：ESLintで静的検証をしてみよう

この2つのコマンドだけ覚えてればいいと思います。

学んだこと

  • ESLintとは構文の間違いなどを修正してくれるありがたいツール。

  • 必須コマンド2つを覚えた。

次回はESLintとともにJavaScript開発環境では必須と思われるprettierを学びます!

参考資料


この記事が気に入ったらサポートをしてみませんか？