如何使用 Vue 3 和 Prettier 自定义 HTML 格式？

Question

我已经使用 Eslint 和 Prettier 配置设置了一个新的 Vue 3 项目。 但是在重新格式化 HelloWorld.vue 时，我看到了像这样的丑陋的东西

        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          rel="noopener"
          target="_blank"
          >babel</a
        >

我想要一些更紧凑且仍然可读的东西，如下所示：

        <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" rel="noopener"
          target="_blank">babel</a>

我搜索了一段时间，也尝试了 "htmlWhitespaceSensitivity": "ignore" 之类的东西，但没有任何帮助。

.eslintrs.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? ['error', {allow: ['warn', 'error']}] : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        mocha: true,
      },
    },
  ],
}

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": false,
  "printWidth": 120,
  "jsxBracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore"
}

我的解决方案

我不会给出答案，因为它不能解决 Prettier 的问题。
我不再使用 Prettier。

这是我目前的.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', '@vue/standard', '@vue/typescript/recommended'],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'comma-dangle': ['error', 'always-multiline'],
    'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['warn', 'error'] }] : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'quotes': ['error', 'single'],
    'vue/html-quotes': ['error', 'double'],
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
}

与 IntelliJ 一起，这种配置导致代码格式对我来说看起来很漂亮...

Answer 1

该格式由 Prettier 的 printWidth option 控制。由于您看到即使printWidth 为 120 也会发生换行，因此问题可能是 <a> 所在的特定行超过 120 个字符，包括周围的空格（如 demo 所示）。

方案一：全局增加printWidth

增加.prettierrc 中的printWidth 值以覆盖该行的字符长度（可能不是最好的主意，因为它违背了整个项目中该选项的目的）。

解决方案 2：为线路禁用 Prettier

禁用<template> 中该特定行的所有 Prettier 规则：

<!-- eslint-disable-next-line prettier/prettier -->
<a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" rel="noopener" target="_blank">babel</a>

方案3：为组件增加printWidth

在<script> 中使用组件特定的printWidth 配置，以适应可接受的长度（目前无法从<template> 配置）：

<script>
/* eslint "prettier/prettier": ["warn", { "printWidth": 200 }] */
</script>