webpackでStylelintが使える環境を構築してみる
最終更新日: Update!!
今回はwebpackでStylelintを導入する方法についてまとめていきたいと思います。StylelintとはCSSにおけるエラーの検知やコーディングルールの統一のために使われるツールで、設定したルールに基づきチェックしてくれるツールになります。webpackではSassのコンパイル時に合わせてStylelintを使えるようにしていきます。
webpackにおいてStylelintを使う上でTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。また、SassやCSSを扱うため「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」の記事でまとめている内容を構築している前提で今回は進めていきます。
【参考記事】
webpackでTypeScriptの自動コンパイル環境を作成してみる
webpackでBabelを使ったJavaScriptトランスパイルの環境構築
それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。まずは「stylelint」本体に、Stylelintをwebpackで使う際に必要となる「stylelint-webpack-plugin」を、そしてSassのシンタックスに対応させるための「stylelint-scss」のパッケージをインストールします。
その他のルールについて詳しくは公式のドキュメントを参考にしてみてください。
【List of rules】
https://stylelint.io/user-guide/rules/list/
これで設定ファイルの作成が完了したら、実際にコンパイルして確認してみます。そうすると下記のようにStylelintが働いてくれて、エラーを検知してくれるようになります。
今回はwebpackでStylelintを導入する方法についてまとめてみました。コーディングの品質を保つためにもこのようなツールは必要になってくると思いますので、是非忘れずに導入しておきたいですね!
$ npm install --save-dev stylelint stylelint-scss stylelint-webpack-pluginインストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】
{ ....... "devDependencies": { ....... "stylelint": "^13.13.1", "stylelint-scss": "^3.19.0", "stylelint-webpack-plugin": "^2.1.1", ....... }, ....... }Stylelintを使う際には、Stylelintの設定ファイルである「.stylelintrc.json」が必要になります。この設定ファイルのフォーマットですが、json以外でもJavaScriptでオブジェクトとして記述する形でもいいですし、YAML形式でも使えるそうです。今回はこのような構成で、.stylelintrc.jsonをルートディレクトリ直下に配置しておきます。
node_modules dist ┣(main.js) ┗(main.css) src ┣ main.ts ┗ main.scss .stylelintrc.json webpack.config.js tsconfig.jsonそれでは引き続きwebpackの設定をしていきます。ここでは過去記事「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」で作成しているものをベースにStylelintを使えるように追記しています。まずは、stylelint-webpack-pluginを読み込んでいきます。そして、プラグインの設定で設定ファイルのパスを指定していきます。基本的にはこれだけでOKです。 【webpack.config.js】
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const StylelintPlugin = require('stylelint-webpack-plugin'); const cssInline = false; if(cssInline) { styleLoader = 'style-loader'; } else { styleLoader = { loader: MiniCssExtractPlugin.loader }; } module.exports = { mode: 'development', devtool: 'source-map', entry: './src/main.ts', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader' }, { test: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } } ] }, { test: /\.(sass|scss)$/, use: [ styleLoader, { loader: 'css-loader', options: { url: false, sourceMap: true, importLoaders: 2 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', { grid: true } ], [ 'cssnano', { preset: 'default' } ] ] }, } }, { loader: 'sass-loader', options: { sourceMap: true } } ] } ] }, resolve: { extensions: [ '.ts', '.js', '.json' ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'main.min.css' }), new StylelintPlugin({ configFile: `${path.resolve(__dirname, '')/.stylelintrc.json`}), ] }引き続き、Stylelintの設定ファイルを作成していきます。今回はSassを使う前提となっているので「stylelint-scss」のプラグインを指定しておきます。そして「rules」で任意のルールを記述していきます。 【.stylelintrc.json】
{ "plugins": [ "stylelint-scss" ], "rules": { "color-no-invalid-hex": true, "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true, ..... } }ルールは様々なものがありますが、いくつか例を挙げると下記のようなものがあります。必要なものを適宜追加していくような感じですが、たくさんあるので基本的なものや、よく使われるものをまとめたルールセットをモジュールとしてインストールする方法もあるようですね。
color-no-invalid-hex | 16進数でのカラーコード指定をチェック |
---|---|
function-calc-no-invalid | calc関数内にある式をチェック |
unit-no-unknown | 不明な単位が使われていないかのチェック |
property-no-unknown | 不明なプロパティが使われていないかのチェック |
at-rule-no-unknown | 不明な@ルールが使われていないかのチェック |
ERROR in src/scss/foundation/_color.scss 48:15 ✖ Unexpected invalid hex color "#FF" color-no-invalid-hexちなみにSCSSではなくSASS記法を使った場合に「Please check validity of the block starting from line #*** CssSyntaxError」というエラーがなぜか出力されるようですが、調べてみるとどうやらバグのようで、現状は解決は難しいようですね。。SASS記法をよく使うので少し気になりますが、、
今回はwebpackでStylelintを導入する方法についてまとめてみました。コーディングの品質を保つためにもこのようなツールは必要になってくると思いますので、是非忘れずに導入しておきたいですね!
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories