在 nuxt / vue 环境下有没有办法修复 prettier 中的这个错误

Question

我刚刚在一个运行良好的项目上运行了 NPM 更新。现在，我收到了一个更漂亮的“友好错误”。我想知道 ESLint 和 Prettier 在我的配置中是否不能很好地配合。

error  Replace `⏎··················Coming·Soon!⏎················` with `Coming·Soon!`

我不太确定这里发生了什么，但看起来这是一个格式问题，告诉我添加反引号。这些错误出现在 HTML 标记上，甚至没有 qoutes。真的是

<span>Coming Soon</span>

。

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  rules: {},
}

.prettierrc：

{
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore"
}

Answer 1

错误并不表示反引号。它告诉您

Coming Soon!

周围的空白应该被删除。

htmlWhitespaceSensitivity

的配置可能会令人困惑：

• ignore

  - HTML 空格无关紧要，所以删除它

• strict

  - HTML 空格非常重要，所以忽略它

因此你实际上想使用

strict

。如下所示配置 ESLint（如果使用 VS Code，请重新启动 IDE）：

// .eslintrc.js
module.exports = {
  rules: {
    'prettier/prettier': {
      htmlWhitespaceSensitivity: 'strict',
    },
  },
}

请注意，htmlWhitespaceSensitivity

配置似乎在

.prettierrc

中没有效果。

Answer 2

就我而言，在 vue 中

使用

<!-- 
* xx
-->

更换

/* 
* xx
*/