Moon-0xff / gnome-mpris-label

A music related GNOME extension.
GNU General Public License v3.0
56 stars 11 forks source link

Code formatting #64

Open abisammy opened 1 year ago

abisammy commented 1 year ago

Currently the code has to be styled manually, I would recommend we use a library to format it, such as prettier.

This can automatically format the code to how you like, this would be an example config:

{
    "printWidth":120,
    "useTabs":true,
    "semi":true,
    "singleQuote":true,
    "trailingComma":"all",
    "bracketSpacing":false
}

Prettier can be installed globally using npm, the config would then be placed in the directory of the project, and when running the command prettier --write "*.js", it will automatically format all the files for us!

Moon-0xff commented 1 year ago

I've been thinking of removing the quirks of the style and align more strictly with gnome-shell style guide.

I haven't even mentioned it because:

Moon-0xff commented 1 year ago

I don't know this prettier tool/library, it is a simple indentation/style helper?
I don't want to add IDE config files, or external libraries to the repository.

If prettier is a widely known, stable and easy to set up tool, while also requiring just a short config like the example I don't see any issue of adding the config and explanation to HACKING.md

Moon-0xff commented 1 year ago

Also, I wouldn't trust a format tool to re-style the code, no problem using it as a tool to reformat the code, but it will need to be checked side by side, I expect a few corner cases that we will need to resolve either by coming up with something or searching for a similar code in gnome-shell

Although, the code is just above 1000SLOC so it shouldn't be a difficult task.

Note: This is the gnome-shell style guide, or at least the one I know of Note2: git probably has a way of doing this without messing up the commit history

abisammy commented 1 year ago

Prettier is a code formatter, this means it can format the source code directly to ensure consistency, for example:

Prettier is well known, it has 30 million weekly downloads on NPM It is typically used with NodeJS projects (a javascript runtime, that has sort of become the standard for building websites). Prettier also provides a command line interface to format code however, which is what I propose we do.

Prettier can also be setup with an IDE, for example vscode to format the code whenever saving a file, however it is not neccessary.

Prettier is very stable, and I have used it for a while, and never experienced any problems with it changing the logic of code, it simply reformats it. Prettier also will refuse to format the code if it contains a syntax error (for example missing a closing brackets), so does not break code that has not been completed.

Prettier's customisability can be a bit limited, however this is a test branch I published with the code using an example config that is close to the original. I recommend looking at the final code, in addition to the diff, as you can more easiliy see the final formatted code, with a consistent style.

I understand the diff would be huge, however in the long run it will enforce code readabilty and style, as the same program would use the same config in order to format the code.

I'm not aware of other tools like it, there are some others that can format code, however require a more complicated setup or config, this is the simplest that I know of.

Moon-0xff commented 1 year ago

Well, as mentioned:

abisammy commented 1 year ago

Just to clarify, the config is a config for prettier itself (the command line utility), and not IDE specific. Additionally what do you mean by reviewing the output please, does this mean reviewing the code has not been altered to break it? If so prettier will not change the logic, just the format of the source code?

Moon-0xff commented 1 year ago

Just to clarify, the config is a config for prettier itself (the command line utility), and not IDE specific.

If the IDE uses prettier, then it is.

Additionally what do you mean by reviewing the output please, does this mean reviewing the code has not been altered to break it? If so prettier will not change the logic, just the format of the source code?

I don't expect it to break the code, but might look wrong or not follow the coding style in some places.

abisammy commented 1 year ago

If the IDE uses prettier, then it is.

The config can either be used by the IDE or, the command line tool, its a generic config for prettier.