ESLint 显示 EditorConfig 配置错误

Posted 2023-02-22

【中文标题】ESLint 显示 EditorConfig 配置错误

【英文标题】：ESLint shows error with EditorConfig configuration

【发布时间】：2019-06-07 01:55:44

【问题描述】：

我已经创建了一个默认的 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.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。

【参考方案1】：

您可以看到哪些错误？是关于 <style> 和 <script> 中的代码向右移动而不是与标签对齐吗？这是一个已知问题，由于缺少.vue 文件的专用代码样式设置；它的跟踪地址为WEB-30382。

作为一种解决方法，请尝试将 script 和 style 条目添加到 设置 |编辑 |代码风格 | HTML |其他，不要缩进列表

的子级

【讨论】：

谢谢！我绝对不会想到这一点。