有没有办法在 nuxt / vue 环境中更漂亮地修复此错误

Question

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

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

我不太确定这里发生了什么，但看起来是格式问题让我添加反引号。错误出现在甚至没有引号的 HTML 标记上。字面意思是 <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 中似乎没有效果。

有没有办法在 nuxt / vue 环境中更漂亮地修复此错误

Is there a way to fix this error in prettier, in nuxt / vue environment

eslint

vue.js

nuxt.js

prettier