A long time ago frontend developers have been using JS Lint, but after few months, we’ve been using JS Hint, and about one year ago we’ve switched to ES Lint.
Using ES Lint was very fun and easy, but when we finally found a “trendy” linter we had to start looking for a good configuration for it.
That’s why JavaScript Standard Style is pretty interesting to me.
Why JavaScript Standard Style?
- easy to install and work with
- no configuration needed
- the same rules for every project
General rules
- 2 spaces – for indentation
- Single quotes for strings – except to avoid escaping
- No unused variables – this one catches tons of bugs!
- No semicolons – It’s fine. Really!
- Never start a line with
(,[, or`- This is the only gotcha with omitting semicolons – automatically checked for you!
- More details
- Space after keywords
if (condition) { ... } - Space after function name
function name (arg) { ... } - Always use
===instead of==– butobj == nullis allowed to checknull || undefined.
Enabling JavaScript Standard Style in the project
As always when you are doing some major change it’s good to start with creating a new branch:
git checkout -b 'feature/standard-js'Okay and now we can install JavaScript Standard Style:
npm install standard --save-devIf you want to have this installed locally (recommended) use –global parameter:
npm install standard --globalOk so we have JavaScript Standard Style installed, let’s check our code with the linter:
standard "src/js/modules/*.js"
JavaScript Standard Style first usage about 300 issues found
In my case, there were about 300 issues found 😉
Good first step of improving quality of the code is to let JavaScript Standard Style fix the code by itself, to do that you need to use –fix parameter:
standard "src/js/modules/*.js" --fixAs you can see, after the fix I have only 30 issues to fix:
JavaScript Standard Style after automatic fix
Issues number decreased from 300 to 30.
The rest of warnings I need to fix manually, so I’m opening code editor, Sublime Text 3 in this scenario.
I highly recommend to install standard extension for Sublime Text, it will help a lot by pointing things to fix:
Sublime Text JavaScript Standard Style linter Lines with errors are marked red, on the bottom you can see the error message.
JavaScript Standard Style another run
Empty response === all issues resolved
Using Package Control (CMD + SHIFT + P, Install packages), install SublimeLinter and SublimeLinter-contrib-standard.
After fixing the warnings another run of JavaScript Standard Style should return empty response:
Ok, so we have the code compliant with JavaScript Standard Style linter.
Now I can commit my changes:
git commit -am 'JavaScript Standard Style applied';
git push;And if I’m happy about my changes I can merge them with develop branch:
git checkout develop;
git merge feature/standard-jsPossible problems?
My configuration of Sublime Texts forces to use 4 spaces instead of 2 as Tab width
If you need to change editor configuration only for specyfic type of files, go to the example file (JavaScript file) and go to Preferences > Settings – Syntax Specific.
In opened window update or add the configuration options:
{
"tab_size": 2,
"translate_tabs_to_spaces": true
}
