解決eslint與webstorm/hbuildx等關于script标簽的縮進問題

問題重制

在vue-cli中，使用eslint時會對代碼進行校驗，其在.vue檔案中支援的是不縮進，如下所示：

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

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

而在webstorm/hbuildx中使用格式化代碼會将代碼格式化有縮進的,如下所示：

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

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

解決方案

修改ESLint的配置

打開項目根下的.eslintrc.js檔案，将rules節點添加如下配置項：

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

其中，數字2表示統一縮進2個空格，數字1表示1倍縮進

此外，還需要添加以下内容：

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

全部内容如下:

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    rules: {
      'vue/script-indent': ['error', 2, {'baseIndent': 1}]
    }
  },
  overrides:[
  	{
  		'files':['*.vue'],
  		'rules':{
  			'indent':'off'
  		}
  	}
  ]
           

參考文章: https://blog.csdn.net/tozeroblog/article/details/85346166