How To Enable JavaScript Standard Style Linter

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 semicolonsIt’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 == – but obj == null is allowed to check null || 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-dev

If you want to have this installed locally (recommended) use –global parameter:

npm install standard --global

Ok so we have JavaScript Standard Style installed, let’s check our code with the linter:

standard "src/js/modules/*.js"
standard "src/js/modules/*.js" console result

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" --fix

As you can see, after the fix I have only 30 issues to fix:

isuues 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.

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-js

Possible 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

Useful resources

Chris Lojniewski

CEO at Pagepro - React & React Native software house specialising in building tailor-made web applications for clients around the world. Chris is currently spearheading a mission close to his heart: making development frictionless. His philosophy transcends the conventional, recognising that while modern tech, especially React & React Native, is a game-changer, the real revolution lies in combining cutting-edge technology with effective processes, creative exploration, and strategic foresight.

Article link copied

Close button