解决vue代码script标签内容缩进导致eslint报错

用vue cli新建一个项目，IDE格式化，默认script标签内容缩进一级，效果如下：

image

此时eslint默认设置报错。

此时有两种解决方案， 第一种修改IDE设置，不让内容缩进一级。这种解决方案破坏了html页面默认的风格。

于是决定采用第二种方案，修改eslint设置，让其兼容这种代码风格。

查阅相关资料，eslint对vue采用的代码审查规则插件为eslint-plugin-vue，项目和相关文档地址： https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md

其中提到了 **script-indent **属性，可以设置对script标签检查规则。

image

修改eslint配置文件eslintrc.js

 rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "vue/script-indent": ["error", 2, {  // script标签缩进设置
      "baseIndent": 1,
      "switchCase": 0,
      "ignores": []
    }]
  },

其中，type为缩进元素设置，可以设置为空格数或者“tab”，这里设置为2，表示一个缩进为2个空格。

然后将baseIndent设置为1，表示整体移动一个缩进（表示上面设置的2个空格），保存以后效果如下

image.png

问题并没有解决，看到错误提示右边，发现indent这条规则出现了错误，所以需要对vue文件的script标签关闭这条规则，让上面设置的新规则生效
在rules下面增加一个override属性，代码如下

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

回到代码，问题解决

image.png