解决 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 配置并相应地格式化代码