Tools to keep a consistent coding style in JavaScript
“Code formatting is important. It is too important to ignore and it is important to treat religiously. Code formatting is about communication, and communication is the professional developer’s first order of business.”
— Robert C. Martin. Clean code: A handbook of Agile software craftmanship
Update: I now use ESLint and Prettier to keep a consistent coding style. You can find more information in this article.
EditorConfig is the first tool I used to make sure people in the team used the same basic settings, such as trailing whitespace & indent style/size, mainly to simplify git merging. Nevertheless, I was looking for tools more focused on JavaScript, in addition to EditorConfig, in order to share the same coding style.
In JavaScript there are plenty of tools to help you to keep your code clean. Like JSHint, JSCS, fixmyjs, JS Beautifier, and other that I haven’t tested yet.
I chose to use ESLint to lint my JavaScript code and esformatter to format it. The main reason I chose these ones is the customisability: they are pluggable and they have a large range of settings to really fit my coding style.
ESLint
ESLint detects errors or problems in your code, as well as JSHint. For instance it raises an error if a variable in not declared. Moreover it also checks the coding style based on rules. It will warm you in case you missed a space after if for example.
You specify the rules in a configuration file .eslinrc. It could be globally, saved in your $HOME, or locally at the root of your project. Here is my .eslintrc as an example, and you can find more information about the configuration in the project documentation.
You can use it in different way, either with the command line, or your favourite tasks runner or directly in your text editor. (See the official plugins list.) I prefer to use it in my code editor (in Vim through syntastic), thereby I get direct feedback and it helps me to avoid errors while coding.
So far I really like it, it’s in between JSHint and JSCS (which is only focused on the coding style). The list of rules cover almost everything. So if you like JSHint, I definitively recommend you to give a try to ESLint.
esformatter
esformatter beautifies your code based on a set of rules. As ESLint, you define the rules in a .esformatter file, which could be global ($HOME) or local (project’s root). I recommend you to try out esformatter-visualize that will help you out to configure your settings.
You can use esformatter through command line interface, tasks runner (Gulp, Grunt and Brunch) and text editor (Vim, Sublime Text and Atom).
Like ESLint, I prefer to use esformatter inside Vim. It lets me code quickly without worrying too much about code formatting and I trigger the command (<leader>es) to beautify it.
It is still “work in progress” but it does a pretty great job so far. It starts to have more and more plugins to fit specific needs, like using one var or multiple var statement. I look forward to be able to use one configuration file for both ESLint and esformatter as they are almost using the same rules.
If you are interested, here is my .esformatter file.
ES6 & JSX
If you are using ES6 and/or JSX, ESLint already supports JSX and partially ES6. The team of esformatter is working to support ES6 features and there are plugins that fill the gap for JSX. I use esformatter-jsx-ignore that “ignore JSX blocks so the rest of the javascript code could be formatted”.
Feel free to share your experience or tools you like to use to maintain your coding style.