stylelintは、コードに一貫性を持たせることができ、エラーを減らすことができます。またプロパティの並び順なども気にする必要がなくなります。また、prettierと組み合わせることでその真価を発揮します。
Stylelintの導入
事前にyarn create nuxt-app <project-name>
でnuxtのプロジェクトを作成しておいてください。
ライブラリインストール
stylelintを使うならprettierも使うと思うので、prettierに関するライブラリも導入しておきます。
$ yarn add -D node-sass sass-loader stylelint @nuxtjs/stylelint-module stylelint-config-standard stylelint-config-recess-order stylelint-scss stylelint-config-recommended-scss stylelint-prettier stylelint-config-prettier
設定ファイル
stylelint.config.js
でルールセットを設定していきます。
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order',
'stylelint-config-recommended-scss',
'stylelint-prettier/recommended'
],
plugins: [],
rules: {}
}
stylelint-config-standard
Google や Airbnb のスタイルガイドなどが含まれた一般的なスタイル規則です。
stylelint-config-recess-order
stylelint-config-recess-order
はRecess(Twitter's CSS Hinter)や Bootstrap で使用された/使用されている CSS プロパティソート(並び替え)手法を取り入れるルールセットです。関連性のあるプロパティをいい感じで並び替えてくれるやつです。
recessのプロパティの並び順はstylelint-config-recess-orderのGithubにあります。
プロパティもオーバーライドできるので、自由に設定することができます。
stylelint-config-recommended-scss
SCSS 用ルールセットです。
stylelint-prettier/recommended
stylelint-config-で適応したルールとprettierが競合するルールを後ろからオフにします。そのためstylelint-prettier/recommendedは必ず最後に記述してください
VSCode 設定
.vscode/setting.json
{
// editor
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
// css
// https://code.visualstudio.com/docs/languages/css#_syntax-verification-linting
"css.validate": false,
"scss.validate": false
}
参考
こちらの記事を参考にしています。
またアルファベット順に並べる方法などもあります。