WebStormでstylelintができるようにする手順の紹介

このエントリーをはてなブックマークに追加

WebStormでstylelintができるようにする手順の紹介

WebStormの最新バージョンだとstylelintが使えるようになっています!webpackやgulpなどを使ってlintする方法もあるんですが、処理が重くなってくるとどうしてもビルドするのに時間がかかってしまいますが、エディター上でlintしてくれるのでその辺の心配もないですしいいですね。今回はWebStormでstylelintが使えるようにする手順をご紹介します。

Ads

はじめに

なんで今回WebStormでstylelintをできるようにするなんて記事を書いているかと言いますと、今携わっているプロジェクトで自分以外の例えばエンジニアだったりデザイナーがCSSをいじるケースが増えてきたというのが一番の理由です。ガイドラインもあるんですが、どうしても細かい部分で書き方が違かったり、慣れていない方がいる場合;が抜けていたり、}が抜けていたりすることが多かったので、CSSのコードのクオリティを最低限維持したいなと思ったのできっかけです。最初はwebpackでlintしていたんですが、どうしてもビルドに時間がかかってしまうのがネックでした。

そこでWebStormの最新バージョンではstylelintがサポートされてるじゃん!だったらわざわざwebpackでやる必要もないねって感じです。

WebStormにstylelintを入れる手順

WebStormを最新版にする

最新版にしないとできないので、updateなりなんなりをしてください。

What’s new in WebStorm 2016.3で確認してくださいね。ちなみに、「Angular 2」「PostCSS」などのサポートもされたようです。

ちなみに、余談ですが最近はJSのサービスの場合はもっぱら「WebStorm」を使っているんですが、受注でWordPressやPHP案件が増えているので、PhpStormも買おうかなーと思っています。Rubyの勉強もしているからAll packもありかなー。

プロジェクトにstylelintを入れる

プロジェクトにstylelintをインストールします。

$ npm install stylelint --save-dev

stylelint-config-standardインストール

基本のルールのパッケージです。とりあえず何をlintしたらいいかわからないならこれ入れておけばOK!

$ npm install stylelint-config-standard --save-dev

ただ、これだとルールがちょっと厳しすぎるかなと思った場合は.stylelintrcで調整したりできます。

例えばこんな感じとか

{
  "extends": "stylelint-config-standard",
  "rules": {
    "number-leading-zero": null,
    "font-family-no-duplicate-names": null,
    "no-missing-end-of-source-newline": null,
    "selector-pseudo-element-colon-notation": null,
    "declaration-empty-line-before": null,
    "number-no-trailing-zeros": null,
    "property-no-unknown": null
  }
}

CSSのLintをstylelintにする - Qiitaでルールを一覧で見れます!

WebStorm側の設定

上記まで終わったらWebStorm側の設定をします。一瞬で終わりますが。

WebStorm設定画面

  1. WebStorm > Preferences でstylelint検索
  2. Enableにチェック
  3. Node interpreterでPCにインストールされているnodeを選択
  4. Stylelint packageで先ほど入れたstylelintを選択
  5. Apply > OK

これだけです。これでCSSのコードを書いてルールが違うと赤い波線がつくようになるはずです。結構簡単にできました!!

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ