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