Airbnb JavaScript Convention

Like what I mentioned in the previous post, my team will use Airbnb convention for writing JavaScript code. I looked on their Github, they provide so many guides to write JavaScript especially in ES6 syntax. Yep, my team will follow the guides there. But of course, we can’t remember all the rules at once, so we use the linter config provided by Airbnb. There will be a warning (or an error) message on every lines of our code that break the rules.

Well, I will tell you how to configure the linter on JetBrains editor especially on RubyMine since my team use that editor for writing our code.

1. Install the eslint-config-airbnb node package

npm info "eslint-config-airbnb@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "eslint-config-airbnb@latest"

2. Add .eslintrc file on the root project directory which contains,

{
  "extends": "airbnb",
  "env": {
    "amd": true,
    "browser": true,
    "es6": true,
    "jquery": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "func-names": ["error", "never"],
    "react/prefer-stateless-function": [0, { "ignorePureComponents": true }]
  }
}

3. On RubyMine, go to File > Settings

4. Search “eslint” in the search box

5. Check the “enable” box

6. Make sure “Node interpreter” field contains path to executable Node, such as /usr/local/bin/node

7. Make sure “ESLint package” filled with /node_modules/eslint

8. Choose “Automatic search” in “Configuration file” panel

9. Click “Apply” then “OK”

Anddd, TADA! The IDE now is connected with linter using Airbnb convention. If one of team member already did step number 1 and 2, the others just have to follow the step from 3 to last.

Here’s sample of the code that break the rules, an error message will be appeared!

cropped-Screenshot from 2017-03-21 19:25:12
The linter can detect wrong indentation, nice!
cropped-Screenshot from 2017-03-21 19:27:14
The linter can also detect unused variable, so our codes will be cleaner! 😀
cropped-Screenshot from 2017-03-21 19:26:22
Not only that, the linter also insists us to follow best practice, awesome!

Those three above just few examples ESlint can do! Of course there are others bunch of things that ESlint can do and help us to write JavaScript codes in a clean way and also following the best practice provided by Airbnb. Now my team doesn’t have to be worried about different styles when writing JavaScript code, isn’t it nice?

Bye! 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s