Question

我创建了一个默认的Nuxt项目，并为该项目选择了ESLint和Prettier。我已经打开了应用程序，然后按了用于重新格式化代码的快捷键。当我运行nuxt项目时，ESLint在index.vue页面上显示缩进的错误。

这是ESLint，EditorConfig和index.vue代码。

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>

因此错误是针对<script>...</script>和<style>...</style>部分的。有人可以指导我如何让ESLint与EditorConfig缩进一起使用吗？如果有帮助，我正在使用Webstorm作为IDE。

Answer 1

您可以看到哪些错误？是否与<style>和<script>中的代码向右移动而不是与标签对齐有关？这是一个已知问题，原因是缺少.vue文件的专用代码样式设置；在WEB-30382进行了跟踪。

作为一种解决方法，尝试将script和style条目添加到设置|编辑器代码样式| HTML |其他，请勿缩进列表的子代

ESLint显示EditorConfig配置错误

1 个答案: