SZJX

SZJX

When programming Javascript files with Emacs/Vim etc. a linter like ESLint is likely enabled. In my case it seems that the default airbnb style configuration is not very compatible with default Javascript files generated by Phoenix. For example, airbnb standard insists on using singlequotes for strings while Phoenix generates double-quoted ones. Also it insists on appending semicolons which are by default not there. This results in the linter showing a lot of errors in a JS file.

I would like to know, is there any kind of standard followed by Phoenix when generating its Javascript files, or is there any convention/consensus in the community? Ideally I would be able to set the default options of ESLint to report much fewer errors.

Or is it the case that this really varies a lot from person to person and since the Javascript files generated by default are relatively few, the user should just modify the default files to their own taste and follow their own standard when writing new JS files?

Showing Posts 1 to 10

chrisalley

chrisalley

If Phoenix is going to follow a style guide for generated JavaScript files, Standard should be considered. In at least one respect Standard is closer to Elixir’s syntax than the Airbnb style guide since it gets rid of those noisy semicolons.

sotojuan

sotojuan

Agreed. I actually find Phoenix’ default JavaScript strange and ugly lol. I get it that they tried to make it look like Elixir, but it’s a different language.

Most people use single quotes in JavaScript, so most pre-configured linters will prefer them. I also use Standard for all my JavaScript stuff. I recommend that Phoenix at least generate JavaScript that conforms to most people’s uses (Airbnb or Standard).

peerreynders

peerreynders

[quote=“SZJX, post:1, topic:1745”]the user should just modify the default files to their own taste and follow their own standard when writing new JS files?
[/quote]
This would be my assumption - (unless there is re-generated JS in Phoenix which I haven’t come across yet). Obviously the Phoenix project has made some of it’s own choices (for whatever reason) but that shouldn’t override your needs (i.e. your custom eslint configuration).

So I’d basically “clean up” the initial JS assets placed by mix in web/static/js to conform with my chosen standard and move forward from there.

Probably a lost cause given how divisive just the semicolon issue is (e.g. hence the existence of semistandard).

sotojuan

sotojuan

Well, it’s been a while and no one’s complained about the lack of semis in the default JavaScript, so maybe we can get away without them. That said, any modern styleguide is fine. I just think it looks weird at the moment.

@SZJX with ESLint you can do eslint --fix to attempt to format any JS files to your configuration. Works for standard as well (standard --fix.)

ibgib

ibgib

I had to change mine to use semi-colons at the end of lines, but I figured it was just a starter “example” app js. That said, if it’s at all possible, at the very least explicit semi-colons would be proper since javascript has odd rules for the implicit semi-colons (i.e. it isn’t just a style thing).

sotojuan

sotojuan

Sure, but the standard linter lints against the gotchas of no semis. But yes, without it you’ll be in danger!

peerreynders

peerreynders

ES5 automatic colon insertion (ASI) - have to admit it feels bolted on after the fact. If they were serious they should have designed the language without semicolons in the first place (Clojure even downgraded commas to whitespace in many places).

Even as an explicit semicolon author you may want to defensively prefix your IIFEs with a semicolon if there is any possibility of your script being included in/concatenated to another “non-semi” script:

;(function () {
  /* */
}());
ibgib

ibgib

;(function () {
  /* */
}());

Ouch. Yeah. Apparently there are a ton of gotchas with implicit semi-colons, and that is yet another new one to me. I would think that is all the more reason to have it in the learning material for beginners, as I’m not sure I agree with that particular video’s quote of “I mean really, who does that?” Because new learners specifically don’t know what to do, and his example of bear is trivial. If the return value is a long function that would possibly wrap, such as:

return 
    myLongJavaScriptName.someArrayProperty.forEach(function(i) { return isFoo(i) })

So this would be a mistake that would not be caught until the beginner was farther down the line and had no idea about this implicit semi-colon problem, etc. etc., yada yada yada. So me personally, I can’t remember all the little rules because my memory is horrible, so it is far easier to just say “use semi-colons” explicitly. Then if I forget one, probably no biggie (and a linter will catch it).

chrisalley

chrisalley

The Standard linter will pick up on lines that begin with a character that should be prefixed with a semicolon for safety purposes. From the Standard rules:

Never start a line with (, [, or `. This is the only gotcha with omitting semicolons, and standard protects you from this potential issue.

peerreynders

peerreynders

… which is covered via the /*eslint semi: ["error", "never"]*/ rule.

My most recent point was that /*eslint semi: ["error", "always"]*/ really needs an option to flag non-prefixed IIFEs as well - because as it stands the “implicit semicolon” authors are forcing the “explicit semicolon” authors to defensively prefix their IIFEs with an extra semicolon - not to satisfy the ECMA spec per se but to guard against a blind-spot in ASI that is exposed when merging or concatenating scripts authored against divergent linting rule sets.

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
Onor.io
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
New
jaybe78
Hello, I’m developing a online persistent chat system (what’s app) like using elixir/dynamodb/aws for a mobile app(flutter). The diffic...
New
Trolleger
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
New
widianto
I think I’ve found a small improvement I could contribute to <%= web_namespace %>.CoreComponents (installer/templates/phx_web/compo...
New

Other Trending Topics Top

garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New
webofbits
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews