Bug 39059 - Do not use "semi: false" for .vue files
Summary: Do not use "semi: false" for .vue files
Status: RESOLVED DUPLICATE of bug 38664
Alias: None
Product: Koha
Classification: Unclassified
Component: Architecture, internals, and plumbing (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Jonathan Druart
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 38664
  Show dependency treegraph
 
Reported: 2025-02-06 20:30 UTC by Jonathan Druart
Modified: 2025-02-10 09:39 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2025-02-06 20:30:52 UTC
.vue files are kept tidy since we introduced them. And the prettier rule "semi: false;" has been used since then.

In JavaScript, the use of semicolons (;) to terminate statements is optional due to a feature called Automatic Semicolon Insertion (ASI). This mechanism allows developers to write code without explicit semicolons: the JS engine automatically inserts them where necessary.

Pro: omitting semicolons leads to cleaner and more readable code by reducing visual clutter. Modern tools catch potential issues arising from ASI, making explicit semicolons redundant.

However, relying only on ASI can introduce subtle bugs.

For instance:
```
function getValue() {
  return
  {
    value: 42
  }
}
```

A semicolon is automatically inserted after the return statement: the function returns undefined instead of the object. This happens because it is interpreted as:
```
function getValue() {
  return;
  {
    value: 42
  }
}
```

Such unintended behavior can be avoided by explicitly using semicolons.

One source: https://github.com/airbnb/javascript?tab=readme-ov-file#semicolons
Comment 1 Jonathan Druart 2025-02-06 20:35:41 UTC
We should decide now (before bug 38664 is pushed) so that we can adjust the .vue files if necessary.

This bug report is for discussion.

CCing people who might be interested in taking part in the discussion.
Comment 2 Jonathan Druart 2025-02-06 20:49:01 UTC
See the 2 following commits

Bug 38664: (re)Tidy the .vue files - 'semi: true'
Bug 38664: Treat .vue files like other JS files

on https://gitlab.com/joubu/Koha/-/commits/bug_38664
Comment 3 Owen Leonard 2025-02-07 15:38:38 UTC
In my opinion omitting semicolons does not make code more readable. I think including them makes it more readable.
Comment 4 David Cook 2025-02-09 22:48:58 UTC
(In reply to Owen Leonard from comment #3)
> In my opinion omitting semicolons does not make code more readable. I think
> including them makes it more readable.

+1
Comment 5 Martin Renvoize (ashimema) 2025-02-10 09:05:47 UTC
Coming from perl, it's second nature to me to add semi-colons and I also agree I find it clearer to read... but I do realise I'm probably a little old fashioned on that front.
Comment 6 Matt Blenkinsop 2025-02-10 09:23:14 UTC
I have no opposition to doing it, it removes dependence on ASI and makes Vue code consistent with the rest of Koha, both in terms of JS and Perl
Comment 7 Michał 2025-02-10 09:27:52 UTC
(In reply to Martin Renvoize (ashimema) from comment #5)
> Coming from perl, it's second nature to me to add semi-colons and I also
> agree I find it clearer to read... but I do realise I'm probably a little
> old fashioned on that front.

I'm the youngest here and I still agree lol.

For posterity, I also want to point out these two examples of perfectly valid code that'd be screwn over without semicolons from the AirBnB examples:

```js
// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// bad - raises exception
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())
```

These are real-life examples of code snippets that'd result in very confusing exceptions (especially if stuff worked while testing, and then a pre-commit hook got rid of the semicolons):

```
Uncaught ReferenceError: can't access lexical declaration 'leia' before initialization
```

```
Uncaught TypeError: "No! That\u2019s impossible!" is not a function
```

Would you glance at these errors, the code, and immediately figure out the lack of semicolons is the cause?
Comment 8 Pedro Amorim 2025-02-10 09:30:59 UTC
Don't have a strong opinion here.
From the explanations provided it seems that using semicolons has no downsides whereas not using them may cause subtle bugs. For that reason I suppose explicitly using semicolons would be preferable.
Comment 9 Jonathan Druart 2025-02-10 09:39:42 UTC
Thanks all.

This will be done on bug 38664 then!

*** This bug has been marked as a duplicate of bug 38664 ***