v0.9.1リリース用にnpmパッケージをアップデートする

[KentaHizume]

概要

調査の結果アップデートしなかったnpmパッケージについて、
dependabotのPRにコメントを残していたところ、
追加のバージョンアップが来た際にPRが取り下げられてしまい情報が失われるため、
issueに情報をまとめておく。
discussion等他により適切な場所があれば移動する。

完了条件

• アップデート対象のアップデートが完了すること
• 見送り対象の一覧と見送り理由が判明すること

[KentaHizume]

新機能

vee-validate

Can set a fallback locale for rules that do not have messages in the active locale with setFallbackLocale

• Should be possible to configure vee-validate i18n fallback locale logaretm/vee-validate#4872

Yup Typed Schemas now pass the form values as a ref context

• Custom input not working with yup.ref()  logaretm/vee-validate#4753

[KentaHizume]

アップデート保留

TypeScript

eslint-config-airbnb-with-typescriptが更新されない見込みなので、
下記の警告を避けるためにtypescript5.3.3まで戻すべきか検討する必要あり。

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

typescript@5.3.3に戻しても同じエラーが出てしまう。
5.4.5のままだと認識されているようだが、原因不明。
クローンして作り直しても同じ現象が起きている。

YOUR TYPESCRIPT VERSION: 5.4.5

Vite

セキュリティアラートに対応するために手動で上げたrollupのバージョン指定が戻ってしまう。
6系のリリースが控えているので保留したい。

• https://github.com/AlesInfiny/maia/pull/1427/files#diff-1f33887984b51d4e86c0e9856b64c7ad04e2b7a6e5a88282bd732afe69a32385L9710

ESLint系

まとめ

eslint-plugin-vueのみ動作確認のうえアップデートする。

eslint

9系へのアップデートは保留する。
そもそもdependabotから9以降へのPRが出てきていないように見えるが、
dependabot.ymlにそれらしき設定は見当たらなかった。

@vue/eslint-config-prettier from 9.0.0 to 10.1.0

CIで落ちている。
10.0.0で旧形式のeslintrcのサポートをやめているため、保留。

@vue/eslint-config-typescript from 13.0.0 to 14.1.3

CIは通過しているが、
旧形式のサポートは停止した旨の記述があるため、保留する。

https://github.com/vuejs/eslint-config-typescript/releases/tag/v14.0.0
Dropped support for the legacy .eslintrc* configuration format. If you need that, please stay on version 13, which is also tagged as @vue/eslint-config-typescript@legacy-eslintrc.

eslint-plugin-vue from 9.28.0 to 9.29.1

マイナーバージョンアップで、
リリースノート上も旧形式のサポート停止等の記述はないため、アップデートできる。
flat config 対応は9.24.0で既に行われていた。

eslint-plugin-cypress from 3.5.0 to 4.0.0

CIは通過しているが、
eslint 9以上のみサポートの記述があるため、保留する。

Support ESLint v9 and above only

[KentaHizume]

メジャーバージョンアップ

npm-run-all2 from 6.2.3 to 7.0.1

Breaking change: Bump node engines ^18.17.0 || >=20.5.0

Node14,16のサポートが終わったようだが、
CIワークフローでは20を使用しているため影響なし。

[KentaHizume]

そもそも警告が出る理由として、
@vue/eslint-config-airbnb-with-typescriptが
typescriptt-eslintの6系に依存していて、
TS5.4への対応が7.2.0なので、未対応の警告が出る

└─┬ consumer@0.0.0 -> .\consumer
  ├─┬ @vue/eslint-config-airbnb-with-typescript@8.0.0   
  │ ├─┬ @typescript-eslint/eslint-plugin@6.21.0

  "dependencies": {
    "@typescript-eslint/eslint-plugin": "^6.16.0",

8.10.0 (2024-10-17)
support TypeScript 5.6 (#9972)

7.14.1 (2024-06-24)
support TypeScript 5.5 (#9397)

7.2.0 (2024-03-11)
support TS 5.4 (#8630)

[KentaHizume]

バージョンの戻し方

1. 該当のパッケージ（今回はtypescript）に依存するパッケージを全部uninstall
2. typescriptをuninstall
3. 1でuninstallしたパッケージを再度install
   しないとpackage-lock.jsonがきれいにならない

typescriptのみをuninstall、installした場合、
下記のように他のパッケージで推移的に参照しているtypescriptへの依存関係は触られず、
それが使われてしまうらしい。

└─┬ consumer@0.0.0 -> .\consumer
  ├─┬ @vue/eslint-config-airbnb-with-typescript@8.0.0
  │ ├─┬ @typescript-eslint/eslint-plugin@6.21.0
  │ │ └─┬ ts-api-utils@1.3.0
  │ │   └── typescript@5.4.5 deduped
  │ └── typescript@5.4.5
  ├─┬ @vue/eslint-config-typescript@13.0.0
  │ └── typescript@5.4.5 deduped
  ├─┬ pinia@2.2.4
  │ └── typescript@5.4.5 deduped
  ├─┬ stylelint@16.9.0
  │ └─┬ cosmiconfig@9.0.0
  │   └── typescript@5.4.5 deduped
  ├── typescript@5.3.3
  ├─┬ vue-tsc@2.1.6
  │ ├─┬ @vue/language-core@2.1.6
  │ │ └── typescript@5.4.5 deduped
  │ └── typescript@5.4.5 deduped
  └─┬ vue@3.5.12
    └── typescript@5.4.5 deduped

全部入れなおした場合は下記のようになる

└─┬ consumer@0.0.0 -> .\consumer
  ├─┬ @vue/eslint-config-airbnb-with-typescript@8.0.0
  │ ├─┬ @typescript-eslint/eslint-plugin@6.21.0
  │ │ └─┬ ts-api-utils@1.3.0
  │ │   └── typescript@5.3.3 deduped
  │ └── typescript@5.3.3 deduped
  ├─┬ @vue/eslint-config-typescript@13.0.0
  │ └── typescript@5.3.3 deduped
  ├─┬ pinia@2.2.4
  │ └── typescript@5.3.3 deduped
  ├─┬ stylelint@16.10.0
  │ └─┬ cosmiconfig@9.0.0
  │   └── typescript@5.3.3 deduped
  ├── typescript@5.3.3
  ├─┬ vue-tsc@2.1.8
  │ ├─┬ @vue/language-core@2.1.8
  │ │ └── typescript@5.3.3 deduped
  │ └── typescript@5.3.3 deduped
  └─┬ vue@3.5.12
    └── typescript@5.3.3 deduped

[KentaHizume]

create-vueとconsumerのpackage.jsonの差分検証

consumerにしかないものは下記。

@heroicons/vue
@openapitools/openapi-generator-cli
@rollup/rollup-linux-x64-gnu
@vue/eslint-config-airbnb-with-typescript
autoprefixer
axios
postcss
postcss-nesting
stylelint
stylelint-config-recommended-vue
stylelint-config-standard
stylelint-prettier
tailwindcss
vee-validate
yup

このうち、ガイド中でinstallしていないものは下記。

@vue/eslint-config-airbnb-with-typescript
@rollup/rollup-linux-x64-gnu
@heroicons/vue

[KentaHizume]

vue-tsc

vue-tsc@2.1.8 に不具合があるようで、Marisで同じ現象が発生している。
下記のissueのコメントをウォッチする。

• fix(language-core): refer absolute path of global types file vuejs/language-tools#4924

[KentaHizume]

@vue/eslint-config-airbnb-with-typescriptに置き換えているので、
下記のパッケージには参照がなくなっている。
@vue/eslint-config-typescript": "^13.0.0",

[KentaHizume]

旧形式で適用されているESLintのルールの差分を取る

まとめ

no-constant-condition
⇒airbnbのスタイルガイドに由来するカスタマイズ、想定通りの書き換え
no-irregular-whitespace
⇒vueであることのカスタマイズ、想定通りの書き換え
prettier/prettier
ESLint(コードの品質チェック)の実行と、
Stylelint(CSSのフォーマット)/Prettier(JS/TSのフォーマット)の実行コマンドをバラしたほうがよい、
という話になるはず。
その場合はpackage.jsonとCIワークフローを修正する必要がある。

ただ、ユースケースとしては1コマンドでESLintとフォーマットを実行したいということになるはずなので、
その場合は直列実行するコマンドを用意してそれを叩くことになるのであまり変わらないように見える。
大きいプロジェクトの場合は時間がかかりすぎるので避けたい（個別に叩きたい）というケースが出てくる？

• ESLint・Stylelint(Linter)とprettier(Formatter)の役割と実行方法について再考する maris#1389

そうであれば、下記のようなnpmスクリプトになる想定。
prettierとstylelintもバラしたほうがよいのかもしれない。

"lint-format": "lintとformatを直列実行"
"lint": "eslintを実行"
"format": "prettier/stylelintを実行"

調査

デフォルトのルール@vue/eslint-config-typescriptを、
@vue/eslint-config-airbnb-with-typescriptに置き換えた場合の差分を確認したい。

下記の記事でうまくルールの一覧のJSONを加工して抽出するスクリプトが紹介されている。

https://zenn.dev/nananaoto/articles/9968d8f3966e90a46229

off：0
warn：1
error：2

デフォルトにしかない設定

[no-constant-condition](https://eslint.org/docs/rules/no-constant-condition): 2
[no-irregular-whitespace](https://eslint.org/docs/rules/no-irregular-whitespace): 2
[prettier/prettier](https://eslint.org/docs/rules/prettier/prettier): 0

カスタムルール
存在するが、レベルに変更が入っている

[no-constant-condition](https://eslint.org/docs/rules/no-constant-condition): 1 　エラー⇒警告にダウン
[no-irregular-whitespace](https://eslint.org/docs/rules/no-irregular-whitespace): 0　エラー⇒無効にダウン 
[prettier/prettier](https://eslint.org/docs/rules/prettier/prettier): 1　無効⇒警告にアップ
prettierのプラグインを実行するルール

no-constant-condition

airbnbのスタイルガイドで該当のレベルに設定している
https://github.com/airbnb/javascript/blob/6499695ac11c4640ed0f77f8865a1adcb32d3239/packages/eslint-config-airbnb-base/rules/errors.js#L35

no-irregular-whitespace

vue用に意図的に置き換えている

https://github.com/vuejs/eslint-config-airbnb/blob/adec897132845986de6ed8600acaa327626372aa/packages/eslint-config-airbnb/rules/template.js#L11

下記の背景により、
no-irregular-whitespaceを無効化して、
vue/no-irregular-whitespaceをエラーに設定しているということらしい。

• New: Add vue/no-irregular-whitespace rule vuejs/eslint-plugin-vue#964

prettier/prettier

create-vueではスキップして別のコマンドでprettierでフォーマットするつくりになっている。
'@vue/eslint-config-prettier/skip-formatting'
"format": "prettier --write src/"

https://github.com/vuejs/eslint-config-prettier/blob/main/skip-formatting.js#L13

背景は下記で、prettierの公式ドキュメント中で、
ESLint（リンター）とPrettier（フォーマッター）は別々に実行したほうがよい、
と言われているため。

• https://github.com/vuejs/eslint-config-prettier?tab=readme-ov-file#use-separate-commands-for-linting-and-formatting

vue/eslint-config-airbnb-with-typescriptにしかないもの

310件ほど存在する。

[KentaHizume]

他のパッケージのアップデート作業が残っているため、
自動クローズされたissueをリオープンします。

[KentaHizume]

作業完了したためクローズします。