きょるに @kyoruni

ダッシュで奪取

チラシの裏

【Gridsome】StyleLintを導入する

スタイルにも lint 適用させます!
プロパティの順番も良い感じにしてくれたりするみたいです。嬉しい

ESLint 編はこちら ※ 内容ほとんど同じです

Gridsome プロジェクトに導入したので【Gridsome】とか書いてますが、Gridsome あんまり関係ないです……。

環境

  • @gridsome/cli v0.3.4
  • gridsome v0.7.23

インストール

$ yarn add stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-recess-order
  • stylelint: 本体
  • stylelint-config-standard: Stylelint の設定
  • stylelint-scss: scss 用の Stylelint
  • stylelint-order: スタイルを並び替えてくれる
  • stylelint-config-recess-order: スタイル並び順の設定

設定ファイル作成

手動で作成します。

$ touch .stylelintrc.json
.stylelintrc.json

追加した設定やプラグインを記載します。

{
  "extends": [
    "stylelint-config-recess-order",
    "stylelint-config-standard"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
  ],
  "rules": {
  }
}

実行してみる

わざと色々間違えたファイルを作成。

src/assets/fuga.scss
div {
  color:red;
  &-list {
          margin-top: 0;
    color: pink;
  }
}
src/assets/hoge.css
* {
  color:red
}

body{
    color: blue;
    background: aqua;
}
src/components/Hoge.vue
<template>
  <div class="hoge">
    hoge
  </div>
</template>

<script>
export default {
  created () {
    console.log('hoge')
  },
  mounted () {
    console.log('mounted')
  },
  beforeMount () {
    console.log('beforeMount')
  }
}
</script>

<style scoped>
.hoge {
  list-style: none;
  color: red
}
</style>

実行
色々出てきた OK

$ ./node_modules/.bin/stylelint src/**/*.{vue,css,scss}

src/components/Hoge.vue
 24:12  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon

src/assets/hoge.css
 2:9   ✖  Expected single space after ":" with a single-line declaration   declaration-colon-space-after
 2:11  ✖  Expected a trailing semicolon                                    declaration-block-trailing-semicolon
 5:4   ✖  Expected single space before "{"                                 block-opening-brace-space-before
 6:5   ✖  Expected indentation of 2 spaces                                 indentation
 7:5   ✖  Expected indentation of 2 spaces                                 indentation
 8:1   ✖  Unexpected missing end-of-source newline                         no-missing-end-of-source-newline

src/assets/fuga.scss
 2:9   ✖  Expected single space after ":" with a single-line declaration   declaration-colon-space-after
 5:11  ✖  Expected indentation of 4 spaces                                 indentation
 8:1   ✖  Unexpected missing end-of-source newline                         no-missing-end-of-source-newline

スクリプト追加

毎回コマンド書くのは面倒くさいので、エイリアスで実行できるようにします。

package.json

scripts の箇所に追記

  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "lint": "./node_modules/.bin/eslint src/ --ext .js,.vue --fix && ./node_modules/.bin/stylelint src/**/*.{vue,css,scss}"
  },

これで、以下のコマンドで Lint が走るようになります。

$ yarn lint

実行してみる(自動補正)

ESLint の時と同じように、自動で補正してくれる機能を導入します。
—fix オプションを追加

package.json
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "lint": "./node_modules/.bin/eslint src/ --ext .js,.vue --fix && ./node_modules/.bin/stylelint src/**/*.{vue,css,scss} --fix"
  },

実行

ESLint のようなメッセージは表示されませんが、各ファイルを確認した限りちゃんと適用されてそうです。OK

$ yarn lint
✨  Done in 1.31s.

自動補正後の各ファイル

src/assets/fuga.scss
div {
  color: red;

  &-list {
    margin-top: 0;
    color: pink;
  }
}
  • コロンの後にスペースが無かったので追加された
  • ファイル末尾と &-list の前に改行が入った
src/assets/hoge.css
* {
  color: red;
}

body {
  color: blue;
  background: aqua;
}
  • セミコロンが無かったので追加された
  • インデントめちゃくちゃだったのが調整された
src/components/Hoge.vue
<template>
  <div class="hoge">
    hoge
  </div>
</template>

<script>
export default {
  created () {
    console.log('hoge')
  },
  mounted () {
    console.log('mounted')
  },
  beforeMount () {
    console.log('beforeMount')
  }
}
</script>

<style scoped>
.hoge {
  color: red;
  list-style: none;
}
</style>
  • セミコロンが無かったので追加された
  • スタイルの順番が変わった

参考URL