Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした