🤔

ESLint の導入方法と初期設定

2024/01/22に公開

ESLint

tech

はじめに

ESLintについて学習する機会があったので、その際に行った導入方法と初期設定を記事にしておきます。

ESLintとは

ESLint は、JavaScript/TypeScript のための静的検証ツールコードでスタイルの一貫性を高め、バグを回避することを目的としたツールです。

ESLintを手動で導入

任意のディレクトリを作成/移動

mkdir lint_tool

cd lint_tool

package.jsonを作成

npm init

ESLintをインストール

npm install --save-dev eslint

※ 開発環境でしか使用しないため--save-devオプションを使用。

ESLintの初期設定

npx eslint --init

下記の質問が出てくるので選択していきます。

How would you like use ESLint?
to check syntax only.
to check syntax and find problems.
❯  to check syntax, find problems, and enforce code style

ESLintをどのように使いたいですか？
構文チェックのみ行いたい
構文をチェックし、問題を発見する
❯ 構文をチェックし、問題を発見し、コードスタイルを強制する

What type of modules does your project use?
❯ JavaScript modules
CommonJS
None of these

あなたのプロジェクトでは、どのような種類のモジュールを使用していますか？
❯ JavaScript モジュール
CommonJS
なし

Which framework does your project use?  
React
Vue.js
❯ None of these

あなたのプロジェクトでは、どのフレームワークを使用していますか？... 
React
Vue.js
❯ どれも使っていない

Does your project use TypeScript? › No / Yes

あなたのプロジェクトはTypeScriptを使用していますか？ ❯ いいえ / はい

? Where does your code run? 
  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

あなたのコードはどこで実行されますか？
(<スペース>で選択、<a>で全選択、<i>で反転します。）
✔ Browser
✔ Node

? How would you like to define a style for your project? 
❯ Use a popular style guide
  Answer questions about your style

プロジェクトのスタイルをどのように定義しますか？
❯ 一般的なスタイルガイドを使用する
  スタイルに関する質問に答える

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

どのスタイルガイドに従いますか？
❯ エアビーアンドビー： https://github.com/airbnb/javascript
  スタンダード： https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO：https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? 
  JavaScript
  YAML
❯ JSON

? 設定ファイルはどのような形式で作成しますか？
  JavaScript
  YAML
❯ JSON

eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
? Would you like to install them now? › No / ❯ Yes

今すぐインストールしますか？' いいえ / ❯はい

? Which package manager do you want to use? 
❯ npm
  yarn
  pnpm

どのパッケージマネージャを使用しますか？
❯ npm
  yarn
  pnpm

package.json修正

"scripts": {
  "lint": "eslint --ext ts,tsx src/**/*",
  "lint:fix": "eslint --ext ts,tsx --fix src/**/"
}

srcディレクトリを作成し、その中にtest.jsファイルを作成。
以下のコードをtest.jsファイルにコピペ

function hello(name) {
  'Hello World'
}

hello('test')

ESLintを実行

npm run lint

すると以下のようなエラーが出力されます。

  1:16  error  'name' is defined but never used  no-unused-vars
  2:17  error  Missing semicolon                 semi
  5:14  error  Missing semicolon                 semi
  
  引数nameが使用されていないよ。
  セミコロンを忘れているよ。
  セミコロンを忘れているよ。

これでESLintの初期設定は完了になります。
もし設定を変更したい場合は、.eslintrc.* ファイルの中身を ESLintドキュメントに従って変更します。

はじめに

ESLintとは

ESLintを手動で導入

Discussion