Eslint-plugin-vue: script-indent make me crazy!!!!!!!

[wengpengfeijava]

Tell us about your environment

• ESLint Version: ^4.15.0
• eslint-plugin-vue Version: ^4.0.0
• Node Version: ^8.9.0
• IDE: webstorm 2017.2.5

Please show your full configuration:

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // // 没找到解决方案， 一格式化webstorm script标签下面就会缩进，一缩进，eslint就报警。
    // // 只能从根源把他且了。
    // 'indent': ['off'],
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

What did you do? Please include the actual source code causing the issue.

<template>
  <div id="app">

  </div>
</template>

<script>
 export default {
   name: 'App'
 }
</script>

What did you expect to happen?

<template>
  <div id="app">

  </div>
</template>

<script>
  // attension here. it is about 2 indent before javascript code
   export default {
     name: 'App'
   }
</script>

What actually happened? Please include the actual, raw output from ESLint.

This happend when i command in npm run dev

  ✘  http://eslint.org/docs/rules/indent  Expected indentation of 0 spaces but found 2  
  src\App.vue:10:1
    export default {
   ^

  ✘  http://eslint.org/docs/rules/indent  Expected indentation of 2 spaces but found 4  
  src\App.vue:11:1
      name: 'App'
   ^

  ✘  http://eslint.org/docs/rules/indent  Expected indentation of 0 spaces but found 2  
  src\App.vue:12:1
    }
   ^

As you can see above. This is not my expect things. Does any config to avoid these happen?

Otherwise, i may closing the indent config.although it is not a good experience.

[mysticatea]

Thank you for the report.

But it looks to be the errors of core indent rule rather than our vue/script-indent rule.

If you use vue/script-indent rule with baseIndent is 1, it would let you use one indentation in the <script> tags.

Note the vue/script-indent rule in the current version has a bug around property shorthand.

[wengpengfeijava]

J just try to configuring rules as

'vue/script-indent': ['warn', 2, {
  'baseIndent': 1
}]

<script>
   // attension here. it is about 2 indent before javascript code
  export default {
     name: 'App'
   }
</script>

It still show the error

  ✘  http://eslint.org/docs/rules/indent  Expected indentation of 0 spaces but found 2  
  src\App.vue:10:1
    export default {
   ^
  ...

Instead, I did removed the indent before the javascript code.

It showed warnings below

  ⚠  https://google.com/#q=vue%2Fscript-indent  Expected indentation of 2 spaces but found 0 spaces  
  src\App.vue:10:1
  export default {
   ^

  ⚠  https://google.com/#q=vue%2Fscript-indent  Expected indentation of 4 spaces but found 2 spaces  
  src\App.vue:11:1
    name: 'App'
   ^

I do really have no ideas about these , please help me! (⊙o⊙)

[mysticatea]

'indent': 'off',
'vue/script-indent': ['warn', 2, {
  'baseIndent': 1
}]

[wengpengfeijava]

All right! It seems to be possible. thank you very much .

[wengpengfeijava]

I spent much time to know why dose these code warned me

const router = [];

new Vue({
     router
})

I awake to know that you've said

Note the vue/script-indent rule in the current version has a bug around property shorthand.

So , i am still perplexed.Forgive me! I am still have no idea... (⊙o⊙)

[mysticatea]

That bug has been fixed in #346, but we have not released it yet. Please wait for the next release...

Closing since it's fixed on master branch.

[michalsnik]

Sorry for late release.. Enjoy :) https://github.com/vuejs/eslint-plugin-vue/releases/tag/v4.2.1

[wengpengfeijava]

Thank you for your bug fixed.

[BarryZhan]

If you are using webstorm, you can File => Setting => Editor => Code Style => HTML add Do not indent children of rule to script

[leeuwd]

When working with *.vue files, this seems a better option to me: to disable the indent rule only for Vue files and set a base indent:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  'extends': [
    'plugin:vue/strongly-recommended'
  ],
  rules: {
    'indent': ['error', 2],
    'vue/script-indent': [
      'error',
      2,
      { 'baseIndent': 1 }
    ],
  },
  'overrides': [
    {
      'files': ['*.vue'],
      'rules': {
        'indent': 'off'
      }
    }
  ]
};

[Grawl]

Just faced this problem

changed this:

        "vue/script-indent": [
            "error",
            "tab",
            {
                "baseIndent": 1
            }
        ]

to this:

        "vue": {
            "script-indent": [
                "error",
                "tab",
                {
                    "baseIndent": 1
                }
            ]
        }

and problem solved

[begueradj]

@mysticatea
I want to get indentation errors instead of warnings, I did this but I am still getting warnings instead:

rules: {                                                                                                                                       
    "vue/script-indent": ["error", 2, {                                                                                                          
      "baseIndent": 0,                                                                                                                           
      "switchCase": 0,                                                                                                                           
      "ignores": []                                                                                                                              
    }]                                                                                                                                           
  }  

What am I missing? Thank you

[apoorvpatne10]

Why not just include /* eslint-disable */ to ignore all warnings? Worked for me.

[Grawl]

this is not best solution

[apoorvpatne10]

I never said it's the best solution. It seems to work well for me, and might work for others too.

[Grawl]

ofcourse it works

[Ezra-Siton-UIX]

Why this issue is closed? Mega bug - still happens.

My solution - remove this plugin and wait for better options (Or fixing this issues - one extra space in your code throw mega error no way to compile ? This does not make sense):

npm remove @vue/cli-plugin-eslint 

[Tofandel]

@apoorvpatne10 Why use eslint in the first place if you need to disable it in all your files :exploding_head:

@begueradj You need to use the indent rule I think

'indent': ['error', 2],

[MaximSemenov]

If you are using WebStorm or PhpStrom by JetBrains open setting by

Cmd + ' , ' (on Mac)

Editor->Code Style -> Javascript

Select checkbox Use tab character'

Do not let ESLint to decide how many tabs should be and keep it simple like so

"indent": [ "error", "tab" ],

ESlint just checks that tabs are used

[SmelayaPanda]

If you are using webstorm, you can File => Setting => Editor => Code Style => HTML add Do not indent children of rule to script
@BarryZhan

For last Webstorm versions File => Setting => Editor => Code Style => Vue add Indent children of top level tag:script, style`