Nuxt.js で .vue ファイルの SCSS に Lint を適用する

5144 ワード
Sass stylelint scss nuxt.js Sass テキストリンク

概要

.vue ファイル内の style にも Lint を当てるメモ

(node-sass と sass-loader で既に scss が利用できている状態を想定)

詳細

インスコ

yarn add -D stylelint stylelint-scss stylelint-config-standard stylelint-webpack-plugin

はい

stylelint-webpack-plugin を適用

nuxt.config.js で webpack の設定を流し込む。

nuxt.config.js
const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {

  // 略

  build: {
    /*
    ** Run StyleLint on save
    */
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.plugins.push(new StylelintPlugin({
          files: [
            '**/*.vue',
            '**/*.scss',
          ],
        }))
      }
    },
  },
}

stylelint-scss を適用

.stylelintrc.json
{
  "plugins": [
    "stylelint-scss"
  ],
  "extends": "stylelint-config-standard",
  "rules": {
    "scss/dollar-variable-colon-space-after": "always"
  }
}

これで保存のたびにチェックできる。
気持ち良い

参照