６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年4月25日 りあクト！ 第6章 Linter とフォーマッタでコード美人に （p.45~)

React

RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。

linterとは

コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。

放っておくと故障の原因となる糸くずを片っぱしから絡めとる乾燥機の『lint trap (糸くずフィルター)』に似ていることから 各種言語で書かれたコードを解析して構文チェックを行うことを 『lint』と動詞化して表現されるようになり、さらにそのプログラムは『linter』と呼ばれるようになったそうです。

コードフォーマッタとは

インデントや改行などのスタイルを一律に自動整形してくれるものです。

ESlint

開発者が独自のlintルールを作れるようにすること、という動機で創られたlinterです。 拡張性に加え、充実したドキュメント、JSHint よりも読みやすくかつ柔軟に記述できる設定ファイル、出力はメッセージとともに抵触したルール の ID が表示されてしっかり根拠が説明されるという親切設計から、ユーザー数を急激に伸びていきました。

2016年4月にJSCSという別のツールの機能を取り入れることでさらにシェアが拡大しました。

JSCS(JavaScript Code Style checker)

コードスタイルをチェックすることや、チェックに引っかかった箇所を強制的に修正するコードフォーマッタの機能を備えたツールです。

TSlint

2019年1月にMicrosoftのTypeScript開発チームがそれまで主力であったTSlintをあらゆる問題があることから見限り、ESlintのTypeScript対応プロジェクトを始動した事をきっかけに、TSlintの作者はTSlintプロジェクトを非推奨としてESlintへの段階的な移行をアナウンスしました。 現在ではESlintがダウンロード数でトップのlinterとなっています。

linterの存在

ツールの栄枯盛衰はありますが、JavaScriptやTypeScriptはlinterの存在があってはじめて言語として完成されます。
linterはモダンフロントエンド開発において必要不可欠なツールとして使用されています。

ESLint の適用ルールをカスタマイズする

Parser

ソースコードを特定の言語仕様に沿って解析してくれるライブラリ。 ESlintにはJavaScriptのパーサが組み込まれているが、標準ではTypeScriptには対応していないので、TypeScriptのパーサを導入する。

Plugin

ESLintの組み込みルール以外に独自のルールを追加するもの。 それらを適用した推奨の共有設定とパッケージングして提供されることが多い。

共有設定(Shareable Config)

複数のルールの適用をまとめて設定するもの。 ESlintに同梱されるeslint:recommendedやAirbnb社が提供しているeslint-config-airbnbが有名。

設定例　（.esluntrc）

module.exports = {
  env: { // プログラムの実行環境をESlintに伝える
    browser: true,
    es2021: true,
  },
  extends: [ // 複数のルールをまとめる共有設定のオプション。
    'plugin:react/recommended',
    'airbnb', 
    // ESLint に同梱される eslint:recommendedやAirbnb社が提供しているeslint-config-airbnbが有名
    // 共有設定間でルール設定が重複している場合、リストの後ろに記述されたほうが 優先される
    
  parser: '@typescript-eslint/parser', // ESLint が使用するパーサを指定する
  parserOptions: { // パーサの各種実行オプションを設定する
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [ // 任意のプラグインを組み込む
    'react',
    '@typescript-eslint',
  ],
  rules: { // 適用する個々のルールと、エラーレベルや例外などその設定値を記述する
  },
    // ルールは共有設定で読み込まれているため、個別で無効にしたり例外を設ける場合に適用する
};

設定ファイルのプロパティの意味

env

プログラムの実行環境をESlintに教える。個別の環境ごとにglobalsの値がプリセットされています。

extends

共有設定を適用する。共有設定はESlintに標準で含まれているものか別途インストールしたもの、またはインストール済みプラグインのパッケージに含まれているものを指定します。 なおここに記述した共有設定間でルール設定が重複している場合、リストの後ろに記述された方が優先されます。

parser

ESlintが使用するパーサを指定します。

parserOptions

パーサの各種実行オプションを指定します。

plugins

任意(インストール済み)のプラグインを組み込みます。

rules

適用する個々のルールと、エラーレベルや例外などの設定値を記述します。

参考

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 p.45~