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は上書き保存用のオプションです。