stylelintは、コードに一貫性を持たせることができ、エラーを減らすことができます。またプロパティの並び順なども気にする必要がなくなります。また、prettierと組み合わせることでその真価を発揮します。

Stylelintの導入

事前にyarn create nuxt-app <project-name>でnuxtのプロジェクトを作成しておいてください。

nuxt: v2.13.0

ライブラリインストール

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

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
}

参考

こちらの記事を参考にしています。

またアルファベット順に並べる方法などもあります。