VS Code の自動フォーマット (alt+shift+F) と VueJs のデフォルトのフォーマット (npm run lint) ルール間の競合を解決します。
<p>VueJs プロジェクトを初期化しました: </p>
<pre class="brush:php;toolbar:false;">npm init vue@3 。
次のパッケージをインストールする必要があります。
create-vue@3.3.2
続行してもよろしいですか? (y) y
Vue.js - プログレッシブ JavaScript フレームワーク
√ パッケージ名: ...割り込みなし
√ TypeScript を追加しますか? ... はい
√ JSX サポートを追加しますか? ... はい
√ シングルページアプリケーション開発用に Vue Router を追加しますか? ... はい
√ 状態管理のために Pinia を追加しますか? ... はい
√ 単体テスト用に Vitest を追加しますか? ...いいえ
√ 単体テストとエンドツーエンド テストの両方に Cypress を追加しますか? ... いいえ
√ コード品質のために ESLint を追加しますか? ... はい
√ コードのフォーマットに Prettier を追加しますか? ... はい</pre>
<p>しかし、コードをフォーマットすると (alt Shift f)、prettier が何かを強調します。 <code>npm run lint</code> を実行すると、正常に戻ります。 </p>
<p>たとえば、alt-shift-F は、HTML 要素の最初の属性を最初の行に保持しようとしているようです。
<pre class="brush:php;toolbar:false;"><img alt="Vue ロゴ"
クラス="ロゴ"
src="@/assets/logo.svg"
幅= "125"
height="125" />
<p>npm run lint にはプロパティごとに専用の行があります: </p>
<pre class="brush:php;toolbar:false;"><img
alt=「Vue ロゴ」
クラス="ロゴ"
src="@/assets/logo.svg"
幅= "125"
高さ= "125"
/>
<p>ファイルは保存時にフォーマットされるため、これは特に問題になります。 </p>
<p>強い好みはありませんが、可能であれば、<code>npm run lint</code> によって提案されたものを維持したいと思っています。 </p>
<p>私の <code>eslintrc.cjs</code> には次のコンテンツが含まれています: </p>
<pre class="brush:php;toolbar:false;">/* eslint-env ノード */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
ルート: true、
拡張します: [
"プラグイン:vue/vue3-essential"、
"eslint: 推奨"、
"@vue/eslint-config-typescript/推奨"、
「@vue/eslint-config-prettier」、
]、
パーサーオプション: {
ecmaVersion: "最新",
}、
};</pre>
<p><code>alt-shift-f</code> コマンドでコードを正しくフォーマットするにはどうすればよいですか? </p>
