Prettierとstylelintの連携と設定方法

VSCodeに拡張機能をインストール

VSCodeにPrettierとstylelintの拡張機能をインストールして、settings.jsonに記述することで保存時の自動フォーマット＆CSSの構文チェックをすることができます。

Prettierの拡張機能をインストール

JavaScript · CSS · HTMLなど多くの言語に対応している定番のコードフォーマッター。

保存時に自動フォーマットが可能。

stylelintの拡張機能をインストール

CSS· SCSSなどの構文のルールチェック、修正を行うリンター。

settings.jsonに記述

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "css.validate": false, "scss.validate": false, "editor.codeActionsOnSave": { "source.fixAll.stylelint": true },
}

npmパッケージをインストール

VSCodeに拡張機能をインストールしただけでは、 自動フォーマットとCSSの簡易的なルールチェックしかできません。CSSの構文の自動修正やオリジナルのルールカスタマイズ、さらにSCSSの構文チェックにも対応させるには、npmパッケージをインストールしてstylelintの設定ファイルを作成する必要があります。

Node.jsをインストール

初めにPCにNode.jsが入っているかを確認します。

macからターミナルを起動。

npm -v

npm -vを入力、Enterで6.14.8などのバージョン名が出てきたらok.

command not foundが表示されたらNode.jsをインストールします。

Node.js公式ページから推奨版をダウンロード。

Node.jsをインストールすると、npmも同時にインストールされます。

npm -vはnpm -versionの略でバージョン取得の意味。

package.jsonを作成

VSCodeから新しいターミナルを開き、

npm init -y

npm init -yと入力しEnterを押すと、package.jsonが作成されます。

同時にpackage-lock.jsonというファイルも作成されます。

npm init -yはnpm init -yesと同意。

npm initなら、各質問にEnterを入力して回答。

initはinitializeの略で、初期化という意味。

パッケージをインストール

必要なパッケージをインストールします。

npm i -D prettier stylelint stylelint-scss stylelint-config-prettier  stylelint-config-recess-order stylelint-config-recommended-scss

npm i -Dはnpm install --save-devの略。

パッケージ一覧

• stylelint-scss　SCSS構文に対応
• stylelint-config-prettier　不要なルールやPrettierと競合する可能性のあるすべてのルールをオフ
• stylelint-config-recess-order　プロパティの順序
• stylelint-config-recommended-scss　SCSS対応の構文ルールの基盤

.stylelintrc.jsonを作成する

.stylelintrc.jsonファイルを作成し、以下のコードをJSON形式で入力します。

{ "extends": [ "stylelint-config-recommended-scss", "stylelint-config-recess-order", "stylelint-config-prettier" ]
}

.stylelintrc.jsファイルなら、JavaScript形式で記述します。

.jsファイルはコメントの記述が可能です。

module.exports = { extends: [ "stylelint-config-recommended-scss", "stylelint-config-recess-order", "stylelint-config-prettier", ],
};

"plugins": ["stylelint-scss"]の記述は不要。

stylelint-config-recess-orderは他の設定を上書きするように、extends配列の一番最後に記述。

参考ページ

• Prettier公式
• stylelint公式
• stylelintの導入とVS Codeの設定の方法 – Qiita
• stylelintを使ってCSSプロパティのソートと整形を自動化する
• .stylelintrc – Qiita
• npm よく使うコマンドまとめ – Qiita