コフス技術ブログ

ホームに戻る
Powered by
ホーム
SASS

Migrating Stylelint from v13 to v14

,

個人プロジェクトのQuicintでStylelintをv13系からv14系へ移行してみたのでその流れを備忘録として残したいと思います。

Stylelint v14系ではいくつかの大きな変更点が含まれますが、単体の移行手順自体は多くありません。詳しくはMigrating to 14.0.0を確認するものとして概要は以下になります。

  1. stylelint単体のアップデート
  2. 標準config指定をstylelint-config-standard-scssに変更
  3. 標準configにて新しく追加された新ルールの確認と適用

移行作業

まずはncuや直接指定等でStylelint自体のアップデートを行い、続けて以下で新しい標準configをインストールします。

Terminal window
yarn add -D stylelint-config-standard-scss

例としてv13時点で標準configにstylelint-config-standardを使用していた場合、v14ではstylelint-config-standard-scssに変更されるので不要なconfigの削除も適宜行います。

Terminal window
yarn remove stylelint-config-standard

ここまでの変更点が以下です。付随する移行作業は別として、Stylelint単体の移行はこれだけです。

package.jsonを表示
package.json
{
  "devDependencies": {
   "stylelint": "13.13.1",
   "stylelint": "14.2.0",
   "stylelint-config-standard": "^22.0.0",
   "stylelint-config-standard-scss": "^3.0.0",
  }
}
.stylelintrc.jsonを表示
.stylelintrc.json
{
  "extends": ["stylelint-config-standard"],
  "extends": ["stylelint-config-standard-scss"],
}

新ルールの確認

新しい標準configstylelint-config-standard-scssのChangeLogを見るといくつかの新しく追加されたルールを確認できます。

移行直後ではこれらルールに引っかかる環境も多いはずですので適宜新ルールの確認と適用を行うことになります。
ただ残念ながらstylelint --fixなどで自動修正を行うと私の場合だと高い確率でat-rule系の記述が壊れる様子でしたので、行う際は手動対応が基本と考えておくと良さそうです。

新ルールの数も2,3個というわけではないのでひとまずルールに関しては時間があるときに対応するのも良い選択肢です。
"stylelint-config-standard-scss": "^3.0.0"時点だと以下ルールをオーバーライドすると取り敢えず引っかかる事はなくなります。

.stylelintrc.json
{
  "rules": {
   "scss/at-else-closing-brace-newline-after": null,
   "scss/at-else-closing-brace-space-after": null,
   "scss/at-else-empty-line-before": null,
   "scss/at-else-if-parentheses-space-before": null,
   "scss/at-function-parentheses-space-before": null,
   "scss/at-function-pattern": null,
   "scss/at-if-closing-brace-newline-after": null,
   "scss/at-if-closing-brace-space-after": null,
   "scss/at-mixin-argumentless-call-parentheses": null,
   "scss/at-mixin-parentheses-space-before": null,
   "scss/at-mixin-pattern": null,
   "scss/at-rule-conditional-no-parentheses": null,
   "scss/dollar-variable-colon-space-after": null,
   "scss/dollar-variable-colon-space-before": null,
   "scss/dollar-variable-empty-line-before": null,
   "scss/dollar-variable-pattern": null,
   "scss/double-slash-comment-empty-line-before": null,
   "scss/double-slash-comment-whitespace-inside": null,
   "scss/percent-placeholder-pattern": null,
   "at-rule-empty-line-before": null,
   "media-feature-name-no-vendor-prefix": null,
   "property-no-vendor-prefix": null,
   "value-no-vendor-prefix": null,
   "selector-no-vendor-prefix": null
  }
}

VS Codeなどでもv13系を使っているとWARNINGが出るようになってきましたが、幸いStylelint単体の移行作業はそこまで多くはないのでなるべく早いタイミングで移行を進めていきたいところです。

参考：Migrating to 14.0.0
参考：stylelint-config-standard-scss
参考：stylelint-config-standard-scssのChangeLog

ホームへ戻る