vue/script-indent 配置问题

[ldwqh0]

我尝试 增加如下配置到 rules中

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

在main.js中使用如下代码

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

在components行会报如下错误
[eslint] Expected indentation of 4 spaces but found 2 spaces. (vue/script-indent)

如果使用如下缩进就不会出错

new Vue({
  el: '#app',
  router,
    components: {App},
  template: '<App/>'
})

但这跟standard的配置时相悖的

[ldwqh0]

在我的团队中，一部分人使用webstorm,一部分人使用vscode,
插件的默认配置在vscode中表现良好，但在webstorm中，进行代码格式化时，script内的代码标签会缩进两行。

[mysticatea]

Thank you for this issue.

I can't read Chinese, but I guess this is a duplicate of #344 and #347.
PR #346 has fixed it. Please wait for the next release.

[dsx42]

@ldwqh0 你好，我也遇到了这个问题，请问您解决了这个问题没有？怎么解决的？

[ldwqh0]

没有解决，我现在临时的做发是让大家不用WebStorm的格式化功能。改用webstorm的eslint自动修复功能来格式化代码，但效果不是很好，但最起码不会报错。
其实这个问题的核心就是 <script>里面的代码应该退不退格的问题。个人感觉webstorm的 默认退格模式更好点。
看以后webstorm会不会给出相关的选项吧。
现在vetur虽然提供了这个相关的选项，但格式化之后的代码，有部分细节个standard的默认规范不太搭调。更糟糕的是，html 格式化之后，有些换行配置又和 这个plugin不匹配。
总之这两款工具都不能很完美的解决这些问题。好烧心。相对来说，还是webstorm处理的相对好一点，code需要改的配置太多了，而且还不一定能达到效果。只能期待大神们的插件工具什么的能改快点。

[busyhe]

+1

[wengpengfeijava]

加了这个玩意儿简直是存心让我们前端不好过啊~， script 标签下面不能缩进， 一缩进就跪， 总不能改webstorm的配置吧。都不知道怎么处理了 。

[ldwqh0]

我们再这里讨论的的热火朝天，可惜这个issue closed.
我们来发起另外一场讨论。
你们是希望script标签里面的内容缩进呢还是不缩进呢？

还有，我的E文不太好，你们谁翻译一下，让作者看看。

[busyhe]

我把eslint的缩进给禁了

[ldwqh0]

要用这个配置，在当前版本只能禁用，冲突了。

[wengpengfeijava]

看来只能这么干了， 为什么script下面不能缩进呢，瞎折腾 。

[busyhe]

不是不能缩进，webstorm的缩进规则和eslint的冲突了，
比如

webstorm格式化

<script>
    exports default {
    }
</script>

eslint-vue

<script>
exports default {
}
</script>

这两个的区别

[wengpengfeijava]

我习惯写完代码格式化啊 ，我一格式化，save就警告了。找了一早上的文档试试能不能不这样，没找到。

[ldwqh0]

@busyhe
嗯，是这样。我本身更支持ws的缩进，对es6的支持堪称完美。
vs code在格式化的路上，还有很长的路要走。

[wengpengfeijava]

我怎么觉得是他们的bug呢 。

[wengpengfeijava]

用蹩脚英语问了下，大概这么处理。 #362

[ldwqh0]

这就是我最头上的处理方式，但会有问题，

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

router那一行会报错

[wengpengfeijava]

/* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 

我这么写完美的避开了错误。。。

但是。。好像还是坑 诶

这么写没问题，

/* eslint-disable no-new */
new Vue({
  router: router
})

这么写就会有问题

/* eslint-disable no-new */
new Vue({
  router
})

[wengpengfeijava]

我算是知道这哥们说的这句话的意思了。。

[nocLyt]

所以这个问题解决了吗？
我现在已经是碰到这个问题，提示：

http://eslint.org/docs/rules/indent Expected indentation of 0 spaces but found 2

[ldwqh0]

这是我的配置，在最近的项目中，好像没有什么问题了。

 parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'standard',
    'plugin:vue/strongly-recommended'
  ],
'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'vue/max-attributes-per-line': ['error', {
      'singleline': 3,
      'multiline': {
        'max': 1,
        'allowFirstLine': true
      }
    }],
    'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    'indent': 'off'
  }

我的代码长这样

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
console.log('Created By [email protected]')
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})

[BarryZhan]

@wengpengfeijava 改一下webstorm规则就好了， File => Setting => Editor => Code Style => HTML 找到 add Do not indent children of 的选项，添加 script 标签就完美解决缩进问题。

[Roamin]

@ldwqh0 因为你设置了:

'indent': 'off'

所以没检测

[xumoyan]

"vetur.format.styleInitialIndent": false,
"vetur.format.scriptInitialIndent": false

<style>标签代码缩进 <script>标签代码缩进

[YuFy1314]

Because of you use ESLint to lint your code,The problem is occured.

[wdapp]

@BarryZhan 感谢，完美的解决方案

[mpw0311]

如何在.eslintrc中设置

[kite3]

https://www.jianshu.com/p/deea5446e51e 这篇文章解决了这个问题

[ChenRiliang]

@wengpengfeijava 改一下webstorm规则就好了， File => Setting => Editor => Code Style => HTML 找到 add Do not indent children of 的选项，添加 script 标签就完美解决缩进问题。

[jany3534]

overrides: [
  {
    "files": ["*.vue"],
    "rules": {
      "indent": 0,
    }
  }
],
rules: [
    'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    'indent': 2
]

[jany3534]

overrides: [
  {
    "files": ["*.vue"],
    "rules": {
      "indent": 0,
    }
  }
],
rules: [
    'vue/script-indent': ['error', 2, {'baseIndent': 1}],
    'indent': 2
]

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md