有没有办法在 nuxt / vue 环境中更漂亮地修复这个错误答案

【问题标题】：Is there a way to fix this error in prettier, in nuxt / vue environment有没有办法在 nuxt / vue 环境中更漂亮地修复这个错误
【发布时间】：2021-01-25 23:34:03
【问题描述】：

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

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

我不太确定这里发生了什么，但看起来这是一个格式问题，告诉我要添加反引号。错误出现在甚至没有 qoutes 的 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"
}

【问题讨论】：

标签： vue.js nuxt.js eslint prettier

【解决方案1】：

错误并不表示反引号。它告诉您应该删除 Coming Soon! 周围的空格。

htmlWhitespaceSensitivity 的配置可能令人困惑：

ignore - HTML 空白无意义，所以删除它
strict - HTML 空白是重要的，所以忽略它

因此，您实际上想使用 strict。如下图配置 ESLint（如果使用 VS Code 则重启 IDE）：

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

请注意，htmlWhitespaceSensitivity 配置似乎对 .prettierrc 没有影响。

【讨论】：