ESLint shows error with EditorConfig configuration

Question

I have created a default Nuxt project, and have selected ESLint and Prettier for the project. I have opened the app, and pressed the shortcut key for reformatting of the code. When I run the nuxt project, ESLint is showing errors on the index.vue page, for the indentations.

Here are the ESLint, EditorConfig and index.vue code.

ESLint:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
    'prettier'
  ],
  // add your custom rules here
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

EditorConfig:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

index.vue:

<template>
  <section class="container">
    ...
  </section>
</template>

<script>
  import Logo from '~/components/Logo.vue'

  export default {
    components: {
      Logo
    }
  }
</script>

<style>
  .container {
    min-height: 100vh;
    ...
  }
  ...
</style>

So the errors are for the <script>...</script> and <style>...</style> section. Can someone please guide me how to let ESLint work with the EditorConfig indentation? If it helps, I am using Webstorm as the IDE.

Answer 1

What errors can you see namely? Is it about the code in <style> and <script> being shifted to the right instead of being aligned with tags? This is a known problem, caused by the lack of dedicated code style settings for .vue files; it's tracked at WEB-30382.

As a workaround, try adding script and style entries into Settings | Editor | Code Style | HTML | Other, Do not indent children of list