How to supress error: Mixed spaces and tabs?

Question

I get this annoying 'error' message in Vue.js app.

error: Mixed spaces and tabs (no-mixed-spaces-and-tabs) at src/components/Landing.vue:388:2:

I'm wondering how can I suppress it?

Solution 1

That's an ESLint error (no-mixed-spaces-and-tabs), intended to warn against using both space and tab for indenting code. Consistency of spaces/tabs is a code convention, which is important when sharing a codebase within a team (1) (2). If you're swinging it alone (and have no plans otherwise), feel free to disable/enable any rules you want.

Disable rule per project

You can configure ESLint to ignore that error in your entire project. The configuration is usually stored in .eslintrc.js in a Vue CLI generated project. Inside that file, edit the rules object to contain:

// .eslintrc.js
module.exports = {
  "rules": {
    "no-mixed-spaces-and-tabs": 0, // disable rule
  }
}

Disable rule per line

To ignore that error for a single line only, use an inline comment (eslint-disable-line no-mixed-spaces-and-tabs or eslint-disable-next-line no-mixed-spaces-and-tabs) on that line:

⋅⋅const x = 1
⇥⋅⋅const y = 2 // eslint-disable-line no-mixed-spaces-and-tabs

// eslint-disable-next-line no-mixed-spaces-and-tabs
⇥⋅⋅const z = 3

Disable rule per section

To ignore that error for multiple lines of code, surround the code with eslint-disable no-mixed-spaces-and-tabs and eslint-enable no-mixed-spaces-and-tabs multi-line comments:

⋅⋅const x = 1

/* eslint-disable no-mixed-spaces-and-tabs */
⇥⋅⋅const y = 2  // 🙈
⇥⋅⋅const z = 3  // 🙈
/* eslint-enable no-mixed-spaces-and-tabs */

⇥⋅⋅const q = 4  // ❌ error: mixed spaces and tabs!

Solution 2

Go to view option then go to indentation and you will find indent using space. Your problem should be fixed. If it is not fixed then go to convert indention to spaces.