Basic JavaScript CGLs

Define basic Coding Guidelines for JavaScript

Currently we have no guidelines for TYPO3 Core JS files. This result in inconsistency in how code is formatted and makes JS harder to maintain and review new changes.

Unfortunately there is no “One standard to rule them all” in JS world like PSR2 in PHP. Seems that every bigger JS library, or framework creates it’s own standard.

Just to name a few:

CGL discussion can be long and emotional, so if we don’t reach consensus during discussion on which CGL standard to use, I propose to agree on some basic stuff like indentation, spaces after keywords, and leave introduction of some full blown CGL rules for later.

The long term goal should be to be able to setup a JS lint in pre merge tests in Bamboo.

Impact

  • All core JS files should be reformatted to match the CGL
  • CGL Documentation should be updated

Pro

  • consistent look and feel for JS files, easier to read
  • ease mantaining of JS files
  • opens a way to add some linting, syntax checking

Con

  • existing code has to be reformatted
  • docs needs to be written and change need to be communicated

Organizational

Topic Initiator: Tymoteusz Motylewski
Topic Mentor: Tymoteusz Motylewski

2 Likes

All in!

Remember: Having clear CGL and have those being followed is a major prerequisite for any (functional) safety appliance getting certified.
Generally, what is being considered “safe” in that regard can’t be too bad for us. :wink:

I actually don’t care much about which CGL we use, my criteria for choosing would be:

  • can be configured via editorconf/tslint/… in an IDE via some kind of config file
  • can be auto-formatted

I’d suggest to directly define rules for both typescript and javascript.

There is (based on the airbnb guide) https://github.com/excelmicro/typescript for typescript.

I think we never found a good standard, because there was none (that was in v7 development times) - I do propose to go with airbnb coding guidelines, looks like this is the most-used CGL doc (from looking at other systems in the last months)

While I agree on finally having a standard for JavaScript files, we should think about adopting the standard we will use to TypeScript as well.
In the long run my vision is that we write TypeScript only and JavaScript is built “somewhere else”.

I agree with Susi that the standard must be configurable and also verifiable by Bamboo.

In my personal opinion, the airbnb standard “looks” the best and also “feels” familiar.

I’m not too much into TypeScript, but it’s a very valid point to have CGL which apply to TypeScript too.
So the proposal would be to use aribnb cgl for JS and https://github.com/excelmicro/typescript for TypeScript.
Or do you have other ideas?

+1 for Tymoteusz vote, the airbnb cgl is the most used CGL in the JS / TypeScript area.

I opt for apply the rules to TypeScript only, because the JS output is generated by the TypeScript compiler.
I would more force the TypeScript migration instead of define rules for JavaScrip.

With current pace, we will not have all scripts migrated to TypeScript before v9 release. And it’s really a annoying right now, when some JS files have tabs and other have spaces and you need to patch sth in JS.

I expect that it would be possible to configure TypeScript compiler to return code which sticks to the Airbnb rules?

I think, at some point the TypeScript compiler should produce minified code, rendering configuration to produce airbnb-like JavaScript useless.

1 Like

Couldn’t we say:

  • JavaScript code written manually should follow Airbnb rules
  • TypeScript code written manually should follow ExcelMicro rules (based on airbnb)

Auto-generated code will not be touched / formatted by us. (At least I don’t care what the auto-generated code “looks like” because we don’t edit it anyway.

2 Likes

sounds like a plan for me :slight_smile:

BTW just found https://forge.typo3.org/issues/55579 in the issue tracker :wink: let’s finally do it.

2 Likes

I like this solution, I vote for

Why not minify the TypeScript result, this would prevent manual editing of this file and solves another issue: Changes made in the compiled file, but not in the TypeScript file.
The rules will then apply to all non minified files.

+1, fine for me. I would also agree with Frank to minify all autogenerated code.

Looks like there is a general consensus. So let’s start voting phase Results: Define Coding Guidelines for JavaScript