0

I have javescript code like this. This code is for Vue. I understand that put the opening curly brace at the line end of a statement is a common practice in JS world.

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

There is nothing wrong with this. However, just as a personal preference I found this style very annoying. I prefer following style:

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

However, if I change the style, Vue complains that "Opening curly brace does not appear on the same line as controlling statement". So my question here is that, is the first style mandated by javascript or just the Vue? Is there a way to bypass it and let me use the style I like? I guess not only Vue, but other JS frontend frameworks (e.g. React) also dislike the second style.

neuron mac
  • 1
  • 4
    Your `return` does different things in the two pieces of code you've shown. [Javascript function fails to return object when there is a line-break between the return statement and the object?](https://stackoverflow.com/q/18221963) | [Why doesn't a Javascript return statement work when the return value is on a new line?](https://stackoverflow.com/q/8528557) | [What are the rules for JavaScript's automatic semicolon insertion (ASI)?](https://stackoverflow.com/q/2846283) – VLAZ Apr 07 '21 at 10:32
  • If anything, likely some linter set up with default rules is complaining about this, not "Vue". – deceze Apr 07 '21 at 10:32
  • Do you have a clue where I can find out this mysterious linter and it's configuration so that I can disable it? – neuron mac Apr 07 '21 at 11:09
  • How did you set up your project? Vue CLI? Then start here: https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config – deceze Apr 07 '21 at 11:12
  • 1
    What you are doing in the second snippet of code is contrary to JavaScript. In JavaScript, whatever you are returning must be on the same line with with the `return` statement. Even if you have to write it that way, move the opening brace of the object you want to return to the same line as the `return` statement – sudo_kaizen Apr 07 '21 at 11:53
  • I am new to JS. So you are saying JS actually forces the opening brace to be at the same line as return? – neuron mac Apr 07 '21 at 12:02
  • Yes. Also: if you're new to a language, try to adapt to its common style, instead of forcing a style from some other language you're used to on it. That's a lot easier in the long run. – deceze Apr 07 '21 at 12:05

1 Answers1

-2

Yes, the first style is mandated by JavaScript.

Your code will not run as expected. JavaScript has Automatic semicolon insertion

Look at this example: 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>
tauzN
  • 1,132
  • 7
  • 9