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 (also among devs at Pagepro, a React and React Native development company) 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
}
