WebサイトやWebアプリケーション開発で使われるCSSですが、チームで開発していると、フォーマットの一貫性や重複などの面で問題が生じます。
チームでCSSを書くときの生産性とメンテナンス性を向上させたいときに便利なツールが「stylelint」です。この記事では、その概要と導入方法、Visual Studio Codeでの設定方法を紹介します。

SE

チームでCSSを書いていると、それぞれ個人の書き方があり、統一性に欠けてしまいます。

PM

そんなときにlintツールの一つである、stylelintという設定したルールに基づいてコードを修正してくれる便利なツールがあります。

stylelintの概要

stylelintとはCSSのためのLintです。設定しているルールに違反したコードを検知して警告を出すことができます。構文をチェックするだけではなく、そのエラーを解決するようにコードを整形してくれる機能も含まれています。また、CSSだけでなくSCSSやLessにも対応しているところもメリットの1つです。

WebサイトやWebアプリケーション開発時にLint工程を追加することで、エラーを減らし、一貫性のあるコードを作成することができます。その他、必要に応じてルールを設定し、自由に組み合わせることが可能です。そのルールの数は160種類以上にものぼります。

stylelintの導入とVisual Studioの設定方法

stylelintの導入

1. 1. 自動補正をオフにする

まず、Visual Studioを使用している方は、保存時の自動補正をオフにしてください。stylelintの設定と干渉してしまい、stylelintが正常に働かない可能性があるためです。

1. 1. スタイルガイドの導入

“stylelint-config-recommended”というスタイルガイドを導入します。これは最小限の設定だけがオンになっています。

1. 1. 設定 for CSS

インストールしたら、設定を行います。VS Codeでは補完機能が使えるので、設定ファイルは”.json”で作成しましょう。

1. 1. 設定 for SCSS

“.scss”が使えるように、”stylelint-scss”を導入します。スタイルガイドに”stylelint-config-recommended-scss”を一旦採用します。

1. 1. npm scriptsで実行

テストファイルを作成し、「npm scripts」でstylelintを実行してエラーを検出することができます。

Visual Studio Codeの設定

“settings.json”のファイルを開き、設定を記述していきますが”stylelint.autoFixOnSave”:trueで先に導入した拡張機能による自動補正が使うことができます。記事の冒頭で自動修正をオフにした方はここでオンに戻しましょう。

SE

これで一貫性のある開発ができますね。これだけの柔軟性に優れたツールがあるなんて驚きです。

PM

lintツールの中でも設定できるルールが豊富ですから、好みのビルドツールに簡単に統合することもできます。

stylelintの柔軟性

CSSやSCSSなどのコードチェックができるstylelintを使うことで、一貫性かつ保守性の高いコードの開発が可能になります。CSSを使用する機会が多い方は利用してみることをおすすめします。