In recent years, the code I have written has been mostly solo work, so I have not had to conform to any coding style guide. This can lead to some bad habits. Recently, however, I began contributing some code as part of the Kinvey team and needed to conform to their style guide.
Here’s the thing though - writing code according to a style guide isn’t easy. Taking the AirBnB JavaScrpt style guide as an example (which Kinvey’s is largely based on), I understand all the rules but following them means breaking a lot of old habits and learning new ones.
For those of you already on teams that follow best practices, these tips may seem obvious. But for those of us making the transition, hopefully this is useful.
Fortunately, tools like ESLint will tell me where I messed up and didn’t follow the style guide. This lets me write code as I normally would, but then clean it up to follow the style guide. Running
eslint --init will even allow you to configure ESLint to follow some popular style guides beyond the default ESLint recommended styles.
The nice thing is that ESLint let’s you share configurations, allowing the team to all easily abide by the same standard. A lot of teams post their rules publicly including:
This is great, and once installed, using
eslint --fix can even automatically fix many problems, but wouldn’t it be nice if this just worked in your code editor to let you fix style issues as you code?
Prettier is Easier
Prettier has default styling rules but is configurable. However, since I already have rules defined for ESLint that I want to follow, I can just configure it to use those.
To do this, first click the little gear in the lower-left corner of the editor and choose “Settings”.
cmd/ctrl+shift+p and search for “Open user settings”.
All of the Prettier default settings are prefixed by
prettier. if you want to see what they are. However, in this case, I just want to configure a user setting for this project by adding the following line to my Workspace Settings.
So that it looks like so (assuming you don’t have any other workspace settings).
You can change your user settings if you want this setting to be used across the board in your projects, but this seems more like a project by project type of setting to me.
Now that this is set, I use