Notes about default styles

[pi0]

Preface

JavaScript is a lean language. Unlike most languages, you have more than one choice to do the same thing. While this is a powerful side of JavaScript, it also makes inconsistencies and arguments across larger code bases. While most languages have a unified code style guide and solid spec including Python PEP8, PHP PSR-1, and GoLang and Rust, Javascript has many variations. Standard JS and Prettier are probably the most widely adopted answers to it and endorsed by large communities.

Code style is a delicate matter for every single developer. In this Article, I tried to write the story and reasonings behind the new code style and the switch to Prettier standard. What you are reading in the rest of the article, is entirely my POV and in no way endorses the recommendations for any ecosystem or community.

StandardJS

Standard JS is one of the oldest code styles for javascript. I had been advocating Standard JS code style for over 5+ years after switching from XO for all of my javascript codebases. I advocated the Standard style for Nuxt Community which finally became our standard defacto and recommended style for Nuxt project via nuxt/eslint-config.

Standard JS provides both code styles, and also linting guidelines. You can see all rules here. Here is a summary of important style specs:

• ..2 space indentation
• Single quotes for 'strings'
• No trailing commas
• No semicolons (unless needed)

If I want to describe the above rules, they are minimal, strict enough, and readable.

Over time many popular projects diverged from StandardJS and chose their custom rules. Including many of the ones currently highlighted on the landing page!

StandardJS is mainly adopted via ESLint formatter even tough it has a dedicated CLI (npm downloads: 2.5M for eslint config vs 300K for standard cli). Meanwhile, ESLint (as recommended by their team) is not designed to be a code formatter!

Prettier

Prettier, a younger player became a superstar in the field of code formatting tools. It has amazing Editor support in addition to CLI, is widely used by over of 83% of developers according to State of JS 2021 Report, supports multi-languages, and most importantly, has few options!

Summary of Prettier default style spec:

• Print width of 80 columns
• Semicolons;
• Quotes for "strings" (smart switch to single: 'Like "this"')
• Trailing commas, (ES5)

If I want to describe the above spec, they are safe, smart, flexible, and also closer to other programming languages when you switch between them.

Prettier's IDE support and speed are AWESOME but it turned out our friends working on StandardJS and Prettier had different opinions about code style. However with the few options, prettier provides it can be semi-compatible with StandardJS, I find customization against any definition of standard and a slippery area that introduces inconsistencies in the first place.

My personal take

As a developer switching between repositories with different code styles, all I care about is that it just formats while I type and I loved the promises of prettier: Do not worry about code formatting. It just works! It automatically adds semicolons, wraps my code, smartly switches between quote and single quote, and takes care of everything besides my code.

The javascript ecosystem is already diverse enough. We can never define "the standard". Yet we can move towards a unified ecosystem by putting aside personal habits and preferences and agreeing on one opinion that is used and accepted most.

Prettier surprisingly kept me productive as I was before with previous code styles and automatically applies an optimal and safe code style which I trust had been well thought to set by bright minds.

While knowing about prettier for a long time, it took me months to research and make a decision and finally apply it to a limited surface and try. During this time I looked at many popular codebases and they all made different decisions and customizations. I couldn't find "the one" answer. I decided to trust the authentic prettier choices. A noticeable number of popular packages use semicolons (including Node.js, Typeform, and Automatic/WordPress). Deno became my main inspiration to finalize the choice, trusting the author of Node.js, not being wrong about making revolutionary changes, and trusting prettier defaults. Bun is also almost in the same boat.

Prettier is an amazing tool that I chose to adopt for the UnJS ecosystem. The default configuration is set to prettier standard defaults but conditions always depend on the project and the involved people working on the code on daily basis. and we can always change decisions thanks to the modern tooling that applies formatting changes almost seamlessly and automatically.

Choose the right tool, then relax and let your code editor worry about the rest. Trying not to be Richard. In the end, the only thing matters is that that you enjoyed coding and wrote a beautiful piece of work. Cheers 🥂