StylelintWebpackPlugin
このバージョンのstylelint-webpack-pluginは、webpack 5でのみ動作します。webpack 4については、2.x ブランチを参照してください。
このプラグインは、スタイルシートのエラーを回避し、規約を強制するのに役立つstylelintを使用します。
はじめに
まず、stylelint-webpack-pluginをインストールする必要があります。
npm install stylelint-webpack-plugin --save-dev
または
yarn add -D stylelint-webpack-plugin
または
pnpm add -D stylelint-webpack-plugin
注意:
まだインストールしていない場合は、npmから
stylelint >= 13もインストールする必要があります。
npm install stylelint --save-dev
または
yarn add -D stylelint
または
pnpm add -D stylelint
注意:
Stylelint 14+ではなく13を使用している場合、stylelint関連の型エラーが発生する場合は、開発依存関係として
@types/stylelintもインストールする必要があるかもしれません。
次に、プラグインをwebpack設定に追加します。例：
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [new StylelintPlugin(options)],
// ...
};オプション
利用可能なオプションの完全なリストについては、stylelintのオプションを参照してください。これらのオプションは、stylelintに直接渡されます。
cache
- 型
type cache = boolean;- デフォルト:
true
キャッシュは実行時間を短縮するためにデフォルトで有効になっています。
cacheLocation
- 型
type cacheLocation = string;- デフォルト:
node_modules/.cache/stylelint-webpack-plugin/.stylelintcache
キャッシュの場所へのパスを指定します。ファイルまたはディレクトリを指定できます。
configFile
- 型
type context = string;- デフォルト:
undefined
stylelintで使用する設定ファイルの場所を指定します。
注意
デフォルトでは、これは
stylelintによって処理されます。
context
- 型
type context = string;- デフォルト:
compiler.context
ファイルのルートを示す文字列。
exclude
- 型
type exclude = string | Array<string>;- デフォルト:
['node_modules', compiler.options.output.path]
除外するファイルやディレクトリを指定します。options.contextからの相対パスでなければなりません。
extensions
- 型
type extensions = string | Array<string>;- デフォルト:
['css', 'scss', 'sass']
チェックする拡張子を指定します。
files
- 型
type files = string | Array<string>;- デフォルト:
null
ディレクトリ、ファイル、またはglobを指定します。options.contextからの相対パスでなければなりません。ディレクトリは、options.extensionsに一致するファイルを再帰的に検索します。ファイルとglobパターンは、options.extensionsを無視します。
fix
- 型
type fix = boolean;- デフォルト:
false
trueの場合、stylelintは可能な限り多くのエラーを修正します。修正は実際のソースファイルに対して行われます。修正されていないエラーはすべて報告されます。エラーの自動修正ドキュメントを参照してください。
formatter
- 型
type formatter = string | (
results: Array<import('stylelint').LintResult>
) => string- デフォルト:
'string'
結果をフォーマットするために使用するフォーマッタを指定します。formatterオプションを参照してください。
lintDirtyModulesOnly
- 型
type lintDirtyModulesOnly = boolean;- デフォルト:
false
変更されたファイルのみをlintし、開始時のlintをスキップします。
stylelintPath
- 型
type stylelintPath = string;- デフォルト:
stylelint
lintに使用されるstylelintインスタンスへのパス。
threads
- 型
type threads = boolean | number;- デフォルト:
false
cpuの数に基づいて自動選択されたプールサイズの場合はtrueに設定します。明示的なプールサイズを設定するには、1より大きい数に設定します。無効にしてメインプロセスでのみ実行する場合は、false、1、またはそれ以下に設定します。
エラーと警告
デフォルトでは、プラグインはstylelintのエラー/警告の数に応じてエラーレポートを自動調整します。emitError または emitWarningオプションを使用すると、この動作を強制できます。
emitError
- 型
type emitError = boolean;- デフォルト:
true
検出されたエラーは常に送信されます。無効にするには、falseに設定します。
emitWarning
- 型
type emitWarning = boolean;- デフォルト:
true
検出された警告は常に送信されます。無効にするには、falseに設定します。
failOnError
- 型
type failOnError = boolean;- デフォルト:
true
エラーがある場合、モジュールビルドを失敗させます。無効にするには、falseに設定します。
failOnWarning
- 型
type failOnWarning = boolean;- デフォルト:
false
trueに設定した場合、警告がある場合、モジュールビルドを失敗させます。
quiet
- 型
type quiet = boolean;- デフォルト:
false
trueに設定した場合、エラーのみを処理および報告し、警告を無視します。
outputReport
- 型
type outputReport =
| boolean
| {
filePath?: string | undefined;
formatter?:
| (
| string
| ((results: Array<import('stylelint').LintResult>) => string)
)
| undefined;
};- デフォルト:
false
エラーの出力をファイル（たとえば、レポートに使用するjsonファイル）に書き込みます。filePathはwebpack設定のoutput.pathからの相対パスです。出力ファイルに別のフォーマッタを渡すことができます。渡されない場合は、デフォルト/構成済みのフォーマッタが使用されます。
{
filePath: 'path/to/file';
formatter: 'json';
}