Vue组件脚本缩进规则冲突

时间:2019-06-18 15:19:11

标签: javascript vue.js vue-component eslint lint

我正在尝试为我的新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的情况下完成这项工作。仍在抱怨。

我尝试将其放在此 .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 个答案:

答案 0 :(得分:0)

如果您使用的是VSCode,此设置可能会为您提供帮助:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  // ...
}

在我保存此设置之前的文件时,即使我已经将它们写在.eslintrc.js上,它也使用了我自己未定义的规则。

此设置使其正常工作。

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