23

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?

Hyyan Abo Fakher
  • 3,497
  • 3
  • 21
  • 35
Babr
  • 1,971
  • 14
  • 33
  • 47
  • Use an IDE like VS Code or WebStorm that doesn't include tabs at all and all tabs will be converted to spaces. – Adrian Brand Sep 11 '18 at 05:14
  • I'm used to sublime text, and don't want to change IDE just because of this stupid error. – Babr Sep 11 '18 at 05:15
  • 2
    Then set Sublime to replace tabs with spaces. – Adrian Brand Sep 11 '18 at 05:16
  • Yeah, this sorted it out: https://www.youtube.com/watch?v=86CMWVXdxDA though really did not respond the question. – Babr Sep 11 '18 at 05:29
  • The lint rules are in there for a reason, I answered how to fix the warnings, not ignore them. – Adrian Brand Sep 11 '18 at 05:49
  • 1
    What's the reason for that? We are not in python, so why the difference should matter? – Babr Sep 11 '18 at 05:59
  • 3
    @Babr *Consistency* of spaces/tabs is a code convention, which is important when sharing a codebase within a team [(1)](http://patrickwalters.net/why-coding-conventions-matter-for-a-team/) [(2)](https://scottdorman.github.io/2007/06/29/Why-Coding-Standards-Are-Important/). If you're swinging it alone (and have no plans otherwise), feel free to disable/enable any rules you want. :-) – tony19 Sep 11 '18 at 06:12
  • for notepad++ users, see the solution: https://stackoverflow.com/a/7471232/7468610 – Daniel Perez Feb 06 '21 at 22:07

3 Answers3

35

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!
tony19
  • 125,647
  • 18
  • 229
  • 307
4

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.

Cosmin Staicu
  • 1,809
  • 2
  • 20
  • 27
Milon Rai
  • 41
  • 2
-1

By fixing those code style issues.

That's an ESLint rule violation. It has no impact on whether your code actually runs, but it warns you that your source code is not ideally formatted.

It means that in your code indentation (which are invisible characters) you are using a mix of tabs and spaces.

It should be either one or the other. So make sure you always use either tabs or spaces but never both.

Most IDE's have options to convert tab to spaces or vice versa, to convert existing code so it complies with this rule.

Otherwise @tony19's answer has you covered.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167