Prettierとstylelintの連携と設定方法

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

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

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

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

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

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

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

settings.jsonに記述

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形式で入力します。

.stylelintrc.json

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

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

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

.stylelintrc.js

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

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

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