VS Code の自動フォーマット (alt+shift+F) と VueJs のデフォルトのフォーマット (npm run lint) ルール間の競合を解決します。

Question

<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>

Answer 1

VS Code でデフォルトのフォーマッタを設定する必要があります。操作方法は以下の通りです。

インストール
1. ESLint拡張機能
「設定」に移動し、「デフォルトのフォーマッタ」を検索します
ESLintを選択

VS Code はプロジェクトから ESLint 構成を自動的に読み取り、それに応じてコードをフォーマットします