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

Question

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

\n

error  Replace `\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7Coming\xc2\xb7Soon!\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7` with `Coming\xc2\xb7Soon!`\n

\n

我不太确定这里发生了什么，但看起来这是一个格式问题，告诉我添加反引号。这些错误出现在 HTML 标记上，甚至没有 qoutes。从字面上看就是这样<span>Coming Soon</span>。

\n

.eslintrc.js：

\n

error  Replace `\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7Coming\xc2\xb7Soon!\xe2\x8f\x8e\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7\xc2\xb7` with `Coming\xc2\xb7Soon!`\n

\n

.prettierrc：

\n

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

\n

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.