おすすめネガフィルム

Prettierとstylelintの連携と設定方法

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

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

 

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

prettier

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

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

 

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

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 -vnpm -versionの略でバージョン取得の意味。

 

package.jsonを作成

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

ターミナル
npm init -y

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

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

 

npm init -ynpm 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 -Dnpm install --save-devの略。

 

パッケージ一覧

 

.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配列の一番最後に記述。

 

参考ページ

 

コメントを残す

メールアドレスが公開されることはありません。