Selesaikan konflik antara pemformatan automatik Kod VS (alt+shift+F) dan peraturan pemformatan lalai VueJs (npm run lint)

Question

Saya baru sahaja memulakan projek VueJs:

npm init vue@3 .
Perlu memasang pakej berikut:
  create-vue@3.3.2
Ok untuk meneruskan? (y) y

Vue.js - Rangka Kerja JavaScript Progresif

√ Nama pakej: ...tiada gangguan
√ Tambah TypeScript?
√ Tambah Sokongan JSX?
√ Tambah Penghala Vue untuk pembangunan Aplikasi Satu Halaman ... Ya
√ Tambah Pinia untuk pengurusan negeri ... Ya
√ Tambah Vitest untuk Ujian Unit?
√ Tambah Cypress untuk ujian Unit dan End-to-End ... Tidak
√ Tambah ESLint untuk kualiti kod ... Ya
√ Tambah Prettier untuk pemformatan kod ... Ya

Tetapi sekarang apabila saya memformat kod saya (alt+shift+f), lebih cantik menekankan sesuatu. Jika saya menjalankan npm run lint, keadaan akan kembali normal.

Sebagai contoh, alt-shift-F nampaknya cuba mengekalkan atribut pertama elemen html pada baris pertama:

<img alt="Vue logo"
     class="logo"
     src="@/assets/logo.svg"
     lebar="125"
     ketinggian="125" /></pra>
<p>di mana npm run lint mempunyai baris khusus untuk setiap sifat: </p>
<pre class="brush:php;toolbar:false;"><img
  alt="Logo Vue"
  class="logo"
  src="@/assets/logo.svg"
  lebar="125"
  ketinggian="125"
/></pra>
<p>Ini adalah masalah terutamanya kerana fail diformatkan pada simpan. </p>
<p>Saya tidak mempunyai keutamaan yang kuat, tetapi jika boleh saya ingin mengekalkan pilihan yang dicadangkan oleh <code>npm run lint</code> </p>
<p><kod>eslintrc.cjs</code> saya mengandungi kandungan berikut: </p>
<pre class="brush:php;toolbar:false;">/* eslint-env nod */
memerlukan("@rushstack/eslint-patch/modul-modul-resolusi");

module.exports = {
  akar: benar,
  memanjangkan: [
    "plugin:vue/vue3-essential",
    "eslint:disyorkan",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "terkini",
  },
};

Apakah yang perlu saya lakukan untuk mendapatkan perintah alt-shift-f untuk memformatkan kod saya dengan betul?

Answer 1

Anda perlu menetapkan pemformat lalai dalam Kod VS. Begini cara melakukannya:

1. Pasang ESLintSambungan
2. Pergi ke Tetapan dan cari "Pemformat Lalai"
3. Pilih ESLint

Kod VS kemudiannya akan membaca konfigurasi ESLint secara automatik daripada projek dan memformatkan kod dengan sewajarnya