解決 VS Code 自動格式化 (alt+shift+F) 和 VueJs 預設格式化 (npm run lint) 規則之間的衝突

Question

我剛剛初始化了一個 VueJs 專案：

npm init vue@3 .
Need to install the following packages:
  create-vue@3.3.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Package name: ... no-interrupts
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

但現在當我格式化我的程式碼（alt shift f）時，prettier 會強調​​一些東西。如果我運行 npm run lint，事情就會恢復正常。

例如，alt-shift-F似乎試圖將html元素的第一個屬性保留在第一行：

<img alt="Vue logo"
     class="logo"
     src="@/assets/logo.svg"
     width="125"
     height="125" />

其中 npm run lint 為每個屬性都有專用行：

<img
  alt="Vue logo"
  class="logo"
  src="@/assets/logo.svg"
  width="125"
  height="125"
/>

這尤其是一個問題，因為檔案是在儲存時格式化的。

我沒有強烈的偏好，但如果可能的話我想保留 npm run lint 提出的。

我的 eslintrc.cjs 包含以下內容：

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

我該怎麼做才能讓 alt-shift-f 指令正確地格式化我的程式碼？

Answer 1

您需要在 VS Code 中設定預設格式化程式。操作方法如下：

1. 安裝ESLint擴充功能
2. #前往設定並蒐索「預設格式化程式」
3. 選擇 ESLint

VS Code 然後會自動從專案中讀取 ESLint 配置並相應地格式化程式碼