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

Question

I just ran NPM update on a project that was working fine. Now, I am getting a Prettier "Friendly Error". I'm wondering if ESLint and Prettier are not playing well together in my config.

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

I'm not really sure what is going on here, but it looks like it's a formatting issue telling me to add backticks. The errors are on HTML markup that does not even have qoutes on it. It's literally <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

The error isn't indicating the backticks. It's telling you the whitespace around Coming Soon! should be removed.

The config for htmlWhitespaceSensitivity can be confusing:

• ignore - HTML whitespace is insignificant, so remove it
• strict - HTML whitespace is significant, so ignore it

Thus you actually want to use strict. Configure ESLint as shown below (and restart IDE if using VS Code):

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

Note that htmlWhitespaceSensitivity config doesn't seem to have an effect in .prettierrc.