第 6 章 Linter とフォーマッタでコード美人に メモ

linter

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

コードフォーマッタ

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

ESLint については Create React App で生成したプロジェクトには ESLint パッケージが最初からインストールされてる
インストール済みのものをそのまま使っておいたほうが無難

・インストールされているバージョンの確認の方法

$ yarn list eslint
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ eslint@7.20.0

追加でインストールしていくのは、ESLint による公式の TypeScript 対応プロジェクト『TypeScript ESLint』が提供してるパッケージ群

ESLint 本体を除くエコシステムのパッケージは主に 3 種類に分類される
・パーサ(Parser)
...... ソースコードを特定の言語仕様に沿って解析してくれるライブラリ。ESLint には JavaScript のパーサが組み込まれているが、標準では TypeScript には対応していないので、TypeScript のパ ーサを導入する

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

・共有設定(Shareable Config)
...... 複数のルールの適用をまとめて設定するもの。ESLint に同梱される eslint:recommended や
Airbnb社が提供しているeslint-config-airbnb53 が有名

ESLint の設定ファイル

設定ファイルは eslint --init コ マンドでひな形を対話的に作ることもできる

生成される設定ファイル .eslintrc.js の内容は次のよう になるはず

module.exports = { 
 env: {
  browser: true,
  es2021: true, 
 },
 extends: [ 
  'plugin:react/recommended', 
  'airbnb',
 ],
 parser: '@typescript-eslint/parser', 
  parserOptions: {
  ecmaFeatures: { 
   jsx: true,
  },
  ecmaVersion: 12, 
  sourceType: 'module',
  }, 
 plugins: [
  'react',
  '@typescript-eslint', 
 ],
 rules: {
 }, 
};

ESLint の設定ファイルは JSON でも YAML でもいいんだけど、JavaScript にしておくのが無難

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

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

・parser
...... ESLint が使用するパーサを指定する

・parserOptions
...... パーサの各種実行オプションを設定する

・plugins
...... 任意の(インストール済みの)プラグインを組み込む

・rules
...... 適用する個々のルールと、エラーレベルや例外などその設定値を記述する

特別なコードフォーマッタ Prettier

Prettier の環境を作る

・prettier
...... Prettier 本体

・eslint-config-prettier
...... Prettier と競合する可能性のある ESLint の各種ルールを無効にする共有設定

stylelint

stylelintはまさにESLintのCSS版

・stylelint
...... stylelint 本体

・stylelint-config-standard 84
...... stylelint 公式による標準の共有設定

・stylelint-order 85
...... stylelint の並び順に関するルールセットのプラグイン

・stylelint-config-recess-order 86
......RECESS87 にもとづくCSSの並べ替えのための共有設定