解決eslint與webstorm關於script標簽的縮進問題

2018年12月29日 23:16:29 tozeroblog 閱讀數 752

 

問題重現
在vue-cli中，使用eslint時會對代碼進行校驗，其在.vue文件中支持的是不縮進，如下所示：
而在webstorm中使用格式化代碼會將代碼格式化為：

這樣子就不符合eslint的要求了，如果想支持webstorm的編碼格式，應該進行如下設置：

• 打開項目根下的.eslintrc.js文件，將rules節點添加如下配置項：

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

其中，數字2表示統一縮進2個空格，數字1表示1倍縮進
此外，還需要添加以下內容：

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

具體內容如下：