lint, prettier導入編（mac）

lint導入

lintってなに？

文法チェック用のプログラムです。
エラーの発生を防いだり、バグの原因となるような記述をチェックしたりできます。

どんな種類があるのか

特にフロントよりのことをすることが多いので、関連したものを抜粋します。

lintツール名	対象ファイル	参考URL
htmlhint	htmlファイル	https://www.npmjs.com/package/htmlhint
stylelint	cssファイル	https://www.npmjs.com/package/stylelint
eslint	jsファイル	https://www.npmjs.com/package/eslint

どんな特徴があるのか

前述の通り、エラーやバグを未然に防げます。
かなり厳密なチェックが行われるため、例えばセミコロンを省略しないようにするというようなルールを設定すると、セミコロンを全て書かない限り、警告は消えません。

また、それに付随してどういったエラーや警告が発生しているのかも表示してくれるため、エラーの原因が把握しやすいです。
（例えば、XX行目にセミコロンが抜けているなどですね。）

ルールを設定すると、というような記載もしましたが、その他にも独自のルールを設定できます。
それにより、プロジェクト毎のルールなども追加でき、より完成度の高いコーディングができます。

lintツールのインストール

※npmを用いてインストールします。
※ローカルにインストールしますので、対象のプロジェクトまで移動した後、実行ください。

package.jsonが存在しない場合は、以下のコマンドにて作成してください。

npm init -y

htmlhintのインストール

npm i -D htmlhint

lintの実行は、npx htmlhint ファイルパス or ディレクトリパスです。

stylelintのインストール

npm i -D stylelint

続いてルールセットのインストールを行います。
特にこだわりなどがなければ、スタンダードで大丈夫だと思います。

npm i -D stylelint-config-standard

インストールは完了しましたので、このルールを適用します。
適用方法として、今回はpackage.jsonに追記します。
（その他、.stylelintrcに追記などありますが、下手にファイルを作成せずともよい方法を採用しました。）

以下のように追記できればOKです。

  "devDependencies": {
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0"
  },
  "stylelint": {
          "extends": "stylelint-config-standard"
  }

lintの実行は、npx stylelint ファイルパス or ディレクトリパスです。

eslintのインストール

npm i -D eslint

初期設定として以下のコマンドを実行し、プロジェクトに沿うようにQAにお答えください。

npx eslint --init

lintの実行は、npx eslint ファイルパス or ディレクトリパスです。

Prettier導入

Prettierってなに？

インデントの数やスペースの位置などを自動整形するツールです。

Prettierのインストール

以下でインストールします。

npm i -D prettier

npx prettier ファイル名で整形が実行されます。
ただ、このままでは単純に整形後の状態が確認できるだけなので、整形後の状態をファイルに上書きするようにオプションを追加します。

npx prettier --write ファイル名

--writeは上書き保存用のオプションです。