解决eslint与webstorm关于script标签的缩进问题

问题重现：

在vue-cli中，使用eslint时会对代码进行校验，其在.vue文件中支持的是不缩进，如下所示：在这里插入图片描述
而在webstorm中使用格式化代码会将代码格式化为：

这样子就不符合eslint的要求了，如果想支持webstorm的编码格式，应该进行如下设置：

第一种解决方案，只支持全员webstorm编辑器（不支持vscode与webstorm并行）

打开项目根下的.eslintrc.js文件，将rules节点添加如下配置项：

rules: {
     
  'vue/script-indent': ['error', 2, {
     'baseIndent': 1}]
}

其中，数字2表示统一缩进2个空格，数字1表示1倍缩进
此外，还需要添加以下内容：

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

具体内容如下：

第二种方式：调整webstroem设置

WebStrom 默认格式化规则，会将 html 文件中的

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
     
        name: 'app',
        components: {
     
            HelloWorld
        }
    }
</script>

<style>
    #app {
     
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

但是 Eslint+Prettier 的默认规则，子元素不进行缩进。两者在搭配使用时，在格式化时产生冲突。
可以在 WebStorm 的 Settings > Editor > Code Style > HTML > Other > Do not indent children of 选项中添加 script 与 style 解决冲突。