Javascript打开花括号样式更改答案

【问题标题】：Javascript opening curly brace style changeJavascript打开花括号样式更改
【发布时间】：2021-07-03 03:46:41
【问题描述】：

我有这样的 JavaScript 代码。此代码适用于 Vue。我知道将左大括号放在语句的行尾是 JS 世界中的一种常见做法。

<script>
export default
{
  name: 'newUser',
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

这并没有错。然而，作为个人喜好，我发现这种风格很烦人。我更喜欢以下风格：

<script>
export default
{
  name: 'newUser',
  data () 
  {
    return 
    {
      message: 'Hello World'
    }
  }
}
</script>

但是，如果我更改样式，Vue 会抱怨“左大括号不会与控制语句出现在同一行”。所以我的问题是，第一种风格是 javascript 还是 Vue 强制要求的？有没有办法绕过它，让我使用我喜欢的风格？我猜不仅是 Vue，其他 JS 前端框架（例如 React）也不喜欢第二种风格。

【问题讨论】：

您的return 在您展示的两段代码中做了不同的事情。 Javascript function fails to return object when there is a line-break between the return statement and the object? | Why doesn't a Javascript return statement work when the return value is on a new line? | What are the rules for JavaScript's automatic semicolon insertion (ASI)?
如果有的话，可能是一些使用默认规则设置的 linter 抱怨这个，而不是“Vue”。
你知道我在哪里可以找到这个神秘的 linter 及其配置，以便我可以禁用它吗？
您是如何设置项目的？ Vue CLI？然后从这里开始：cli.vuejs.org/guide/…
您在第二个sn-p代码中所做的与JavaScript相反。在 JavaScript 中，您返回的任何内容都必须与 return 语句位于同一行。即使你必须这样写，将你想要返回的对象的左大括号移到与return语句相同的行

标签： javascript vue.js

【解决方案1】：

是的，第一种样式是 JavaScript 规定的。

您的代码不会按预期运行。 JavaScript 有Automatic semicolon insertion

看这个例子：Vue SFC Playgorund

<template>
  <div>
    {{func1 == undefined ? 'undefined' : func1.string}}
  </div>
    <div>
    {{func2 == undefined ? 'undefined' : func2.string}}
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  computed: {
    func1() {
      return {
        string: "hello"
      }
    },
    func2() {
      return
      {
        string: "hello"
      }
    }
  }
});
</script>

【讨论】：