eslint坚持不缩进<script>标签

Question

我的eslintrc规则中有'indent': ['warn', 2, { 'SwitchCase' : 1 }]。

但是，它提示在Vue模板中此代码的缩进是错误的:

<script>
  export default {
    name: 'Sausage',
  }
</script>

相反，它想要这样:

<script>
export default {
  name: 'Sausage',
}
</script>

我发现它更加丑陋且难以阅读-并且与同一模板中的 <template>和 <style>标签不一致。

如何告诉eslint <script>标记的内容应缩进一层？

Answer 1

在您的.eslintrc.js中，为"vue/script-indent"添加一条规则，然后为.vue文件关闭“缩进”规则。这里也有为switch语句配置缩进的选项。

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "indent": ["error", 4],
        "vue/script-indent": ["error", 4, {
            "baseIndent": 1,
            "switchCase": 1,
            "ignores": []
        }],
        "space-before-function-paren": ["error", "never"],
    },
    overrides: [
        {
            "files": ["*.vue"],
            "rules": {
                "indent": "off"
            }
        }
    ],
    parserOptions: {
        parser: 'babel-eslint'
    }
}