개요

.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"
  }
}

이제 저장할 때마다 확인할 수 있습니다.
기분 좋음

참조

htps : // 기주 b. 이 m/sty ぃ t/sty ぃ t

htps : // 기주 b. 코 m / k s r rka / sty ぃ t-sc

htps : // 기주 b. 코 m / 스테이 t / 스테이 ぃ ぃ t

htps : // 기주 b. 코 m / ぇ b pack - 혼 티 b / 스타 ぃ