Vue组件脚本缩进规则冲突

Posted 2023-02-22

【中文标题】Vue组件脚本缩进规则冲突

【英文标题】：Vue component script indent rules conflicting

【发布时间】：2019-11-01 06:54:05

【问题描述】：

我正在尝试为我的新 Vue 项目设置一些 ESLint 规则，以扩展 eslint-plugin-vue 和 airbnb。除了 Vue 组件中的 标记之外，我可以将所有内容都设置好。

接受的默认值如下：

<script>
export default 
    name: 'Login',
;
</script>

但是我试图让这种代码风格被接受：

<script>
    export default 
        name: 'Login',
    ;
</script>

使用规则 vue/script-indent (https://eslint.vuejs.org/rules/script-indent.html) 我可以将 baseIndent 设置为 1。但是，lint 规则仍然是抱怨它。

我尝试将它放在这个 .eslintrc.json 文件中：

"overrides": [
    
        "files": [",*.vue"],
        "rules": 
            "indent": "off"
        
    
]

还尝试使用缩进规则 (https://eslint.org/docs/rules/indent) 中的 ignoredNodes 但我认为我无法正确使用 AST 选择器。

这是我当前的 .eslintrc.json 文件：

    "extends": [
        "plugin:vue/recommended",
        "@vue/airbnb"
    ],
    "rules": 
        "indent": [2, 4],
        "vue/html-indent": [2, 4],
        "vue/script-indent": [2, 4, 
            "baseIndent": 1
        ],

        "vue/singleline-html-element-content-newline": 0,

        "vue/eqeqeq": 2
    ,
    "plugins": [
        "html"
    ]

运行 lint 时出现这些错误：

   8:1  error  Expected indentation of 0 spaces but found 4  indent
   9:1  error  Expected indentation of 4 spaces but found 8  indent
  10:1  error  Expected indentation of 0 spaces but found 4  indent

【参考方案1】：

如果您使用的是 VSCode，此设置可能会对您有所帮助：

// settings.json

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  // ...

当我在此设置之前保存文件时，它带有我未定义的规则，即使我已将它们写在 .eslintrc.js 上。

这个设置让它工作得很好。

还要检查一下 eslint-plugin-html 和 eslint-plugin-vue 之间的冲突。