用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
