TABLE OF CONTENTS

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