ESLint

JavaScript や TypeScript で書かれたコードがコーディング規約に準拠しているかをチェックするためのツール。

背景

ESLint が作られるに至った背景。

• 書き方は様々。
• 書き方の違いがプログラムの保守性を損なう。
  • コードの本筋が入ってこない。
  • インデント幅が統一されていない。
• コーディング規約(cording standards)で誰が書いても同じコードにしようね。というためのツール。

コーディング規約(cording standards)

誰が書いても同じコードになることが理想。 そのためのルール。

• 変数名はキャメルケース。
• function の括弧は同じ行。
• console.log は消してね。
• if 文の条件式で変数代入してはいけない。

コーディング規約の問題点

• 運用の手間は少なくない
• コミニュケーション上の心理的な負担が増す。

コーディング規約の自動化

リンター（linter）とは

プログラムを静的に解析し、バグや問題点を発見するツール。 問題点を解析することを「リント(lint)する」という。

リンターの本質はプログラムの問題点を指摘すること。

###　コンパイラとの違い

重複する部分はあるが、それぞれの得意分野と責務が違う。

コンパイラ

• 言語から言語への変換
• 型のチェック
• 構文チェック

リンター

• 構文チェック
• コーディングスタイル
• コードの意思決定
• セキュリティ
• パフォーマンス

設定ファイル

ファイル名

.eslintrc.js

module.export = {
  /// ここに設定項目を追加
}

設定項目

root

eslint コマンドを実行したディレクトリを起点に、ルートディレクトリに達するまで遡って設定ファイルを探す仕様が ESLint にはある。 探索中に複数の設定ファイルが見つかった場合は、設定内容がマージされていく。 この仕様は便利でありながら、プロジェクト外の設定ファイルをマージしてしまう危険性を孕んでいます。 root:true は設定ファイルがあるディレクトリより上のディレクトリに遡らなくなる。

module.export = {
  root:true,
}

env

チェック対象の JavaScript と TypeScript コードがどの実行環境で使われるかを ESLint に伝えるためのオプション。 これを設定すると ESLint がグローバル変数を認識するようになる。 この設定は、未定義の変数をチェックするためのもの。ESLint はどのグローバル変数が定義済みかを知らないと正しく適応しない。

module.export = {
  env:{
    browser: true,
    es2021: true,
  }
}

parserOptions

チェック対象の JavaScript がどの構文を使っているかを ESLint に伝えるためのオプション。

ecmaVersion

どのバージョンの ECMAScript の構文を使うかを指定。 デフォルトでは ECMAScript5 が設定されている。

sourceType

JavaScript にはスクリプトモードとモジュールモードがある。これは JavaScript コードがどちらのモードで書かれているかを指定するオプション。

ルール

ESLint にはルールという概念が存在します。 ルールはチェックの最小単位で複数のルールを組み合わせてコーディング規約を組み立てていく。

• non-console: console.log を書いてはならない。
• camelcase: 変数名はキャメルケース。
• semi: 文末セミコロンは省略しない。

ルールによっては細かく設定できるものもある。

重大度（severity）

ルールの重み付けが設定できる。

• off
• warn
• error

module.export = {
  rules: {
    "no-console": "error",
    "camelcase": ["error", {properties: "never"}],
  }
}

コードの自動修正

ESLint ではコードを自動修正できるものがある。

Shareable config

誰かが設定したルールのプリセット。これを使うことで自分のルールを設定する手間が省ける。