Closed2022/10/07にクローズ2

Vue3+Typescript+ESLint+Prettier構成の再確認

TypeScript

Vue.js

ESLint

Prettier

tristar

以下の記事を参考にする。

非推奨になった背景には、最近のエディタがPrettierをサポートしているケースが多くなってきたことがありそう。
eslint-plugin-prettier でも良いかもしれないものの、ESLintが整形も担当することで整形に関する警告などが出てしまうようになる。
自分では気にならないものの速度面や1枚挟むことで不整合が起きる可能性などもあるらしい。
(eslint-plugin-prettierのバージョンアップ追従が遅れる可能性がある？)

tristar

eslint-config-prettierを使ってESLintとの競合を無効化した状態で、Prettierを適用するのが良さそう。
どちらが先かについては、参考にさせていただいた記事ではよく分からなかった。

Prettierの本家の設定としては以下のようになっていた。

    "lint": "run-p lint:*",
    "lint:typecheck": "tsc",
    "lint:eslint": "cross-env EFF_NO_LINK_RULES=true eslint . --format friendly",
    "lint:changelog": "node ./scripts/lint-changelog.js",
    "lint:prettier": "prettier . \"!test*\" --check",
    "lint:dist": "eslint --no-eslintrc --no-ignore --no-inline-config --env=es6,browser --parser-options=ecmaVersion:2018 \"dist/!(bin-prettier|index|third-party).js\"",
    "lint:spellcheck": "cspell \"**/*\" \".github/**/*\"",
    "lint:deps": "node ./scripts/check-deps.js",
    "fix": "run-s fix:eslint fix:prettier",
    "fix:eslint": "yarn lint:eslint --fix",
    "fix:prettier": "yarn lint:prettier --write",

run-p は一連のスクリプトを並列実行するもの。初めて知った。
run-s は一連のコマンドを直列で実行する。

これを見る限り、記事に書かれているコード例(これもPrettier)の通り、
ESLintでチェックする -> Prettierで整形するの順の模様。

このスクラップは2022/10/07にクローズされました