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 文件的 "indent" 规则。这里也有为 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'
    }
}

eslint 坚持不缩进 <script> 标签

eslint insists on not indenting <script> tag

eslint

eslintrc