Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@myzkyy

[webpack][Vue.js] vue ファイル内で定義されているスタイルに stylelint を使用する

More than 3 years have passed since last update.

したいこと

webpack + Vue.js で構成される開発環境において *.vue ファイル内に記述されているスタイル(CSSとかそのメタ言語とか)に stylelint を適用し、コーディングルールに反している場合は警告を表示したい。

とりあえず stylelint インストール

npm install stylelint stylelint-config-standard

ちなみに2017年5月にリリースされた npm v5 から --save 無しでも自動で dependencies に追加されるようになっている。古い npm では必要に応じて --save あるいは --save-dev を付与する。

次に stylelint のルールを定義。ルールの定義方法は色々あるが、package.json に書くよりは独立したファイルで管理したほうが良いと思う。今回は .stylelintrc.json に以下の通り定義しておくことにする。拡張子は省略可能だが、エディタのシンタックスハイライト対応のため、つけておいたほうが扱いやすい。

.stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "single"
  }
}

上で stylelint と合わせてこっそりインストールしていた stylelint-config-standard というルール定義をベースに、追加・変更したい定義を rules 内に書いていく(ルール定義のテンプレートは他にも色々ある)。今回はサンプルとしてシングルクオートを強制するルールを追加定義している。

stylelint 動作確認

※ここは試さず次の見出しまで進んでも良い

いったん、これでちゃんと動くかどうか試してみたい。package.json"scripts"内に以下を追加する(カンマなど必要に応じて加えること。以下同様)。

package.json
"stylelint": "stylelint **/*.css"

また、適当な css ファイルを用意して、あえてシングルクオートではなくダブルクオートを使ってみる。

src/assets/styles/test.css
div::before {
  content: "test";
}

で、npm run stylelint としてみる。もし No configuration provided for ... とか言われたら、たぶん stylelint の設定ファイルの名前か配置場所が間違っている。うまくいけば以下のようになるはず。

src/assets/styles/test.css
 2:12  ✖  Expected single quotes   string-quotes

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! xxxx@1.0.0 stylelint: `stylelint **/*.css`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the xxxx@1.0.0 stylelint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.../*.log

ちゃんとダブルクオート部分がエラーになってくれた。

ただ、上の *.css*.vue にしてもうまくいかない。*.vueファイルにはtemplatescriptが含まれるので、そのまま stylelint に渡すことはできないのである(たぶん)。

webpack-dev-server 実行時に vue ファイル内のスタイル定義に stylelint を適用する

このあたりうまくやってくれるプラグインがある模様。stylelint-webpack-plugin をインストール。

npm install stylelint-webpack-plugin

build/webpack.dev.conf.js の頭の require が並んでいるあたりに

build/webpack.dev.conf.js
const StylelintPlugin = require('stylelint-webpack-plugin')

を書き足し、同ファイル内で plugins を読み込んでいる部分の最後に以下追加する。

build/webpack.dev.conf.js
new StylelintPlugin({
  files: ['**/*.vue']
})

以下のような vue ファイルを作って試してみる。

src/components/Test.vue
<template>
  <div></div>
</template>

<script>
</script>

<style scoped>
div::before {
  content: "test";
}
</style>

webpack-dev-server (vue init webpack *** でプロジェクトを初期化している場合は npm run dev で実行できる)を実行してみる。

 ERROR  Failed to compile with 1 errors                                                           14:22:23

 error  


src/components/Test.vue
 10:12  ✖  Expected single quotes   string-quotes

ちゃんとエラー出ました。

備考

  • PostCSS のプラグインで色々やっている場合でも、この方法でいけるはず(十分な検証はしていない)。
  • この方法は、エラーを出すだけで自動整形してくれるわけではない。
  • 余談だが Visual Studio Code で *.vue ファイル内にネストされた PostCSS を書くとシンタックスハイライトによってエラー扱いされてしまう。ここをうまく認識させる方法がないので、とりあえず Settings で "vetur.validation.style": false を定義しておくとエラー表示はなくなる。
11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
myzkyy
最近は TypeScript, React[ Native], Vue.js, Firebase あたりをメインに触っています(Qiita で記事を書いているとは言っていない)。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?