JavaScript Style Guide.

If you’re like me, you earn your bread by writing JavaScript; Sometimes really good JavaScript and sometimes, JavaScript full of codesmell.
Folks, it’s about time we make use of something called as a style guide for our JavaScript (and React if you’re into React/Vue or other big guns).

But first things first.

WHY THE HELL DO WE EVEN NEED THIS?

• Your code will look amazing and will be readable by you even years down the line.

• Your code will have very less non idiomatic parts. It’ll automatically be somewhat good practice if you follow this style guide.
For example, it will highlight an error in your IDE or your favourite text editor if you declared a useless function or a redundant variable.
So by implementing a style guide, your IDE or editor will automatically tell you when you’re writing bad JS and not just syntactically wrong JS even before you run a single line of code.

• Two people won’t be auto aligning the same file with different formatting so as to form an unending cycle and countless git merge conflict cycles. (Trust me, that’s something that has happened to me at my office)

• Chances of messing up while writing code decrease exponentially.

• Trust me, you’ll be proud! :)

Ummm alright - But what’s a style guide? It’s a guide that recommends you on how to format and structure your code. Lint basically means to hint beforehand a bad practice or an error in your code. A style guide in JS can be implemented using eslint. Eslint is by far the most popular tool for code hinting in JS. (There’s JSHint too but it isn’t as popular)

In eslint, there is a .eslintrc file we should use. It’s basically a json file with a fancy name and it lives inside the root folder of our project.
(alongside .babelrc and package.json)

Touch this file and install the following dev packages to set up eslint in your next JS project.

$ touch .eslintrc
$ npm i eslint eslint-{config-airbnb,plugin-import} -D

If it’s React or ReactNative. Add another line.

$ npm i eslint-{plugin-jsx-a11y,plugin-react} -D

Let’s use an .eslintrc file that I generally use which looks like this:

{
  "extends": "airbnb",
  "rules": {
    "arrow-parens": "off",
    "global-require": "off",
    "indent": [
      "error",
      4
    ],
    "no-console": "off",
    "comma-dangle": "off",
    "no-underscore-dangle": "off",
    "func-names": "off",
    "no-use-before-define": "off",
    "react/jsx-indent": [
      "error",
      4
    ],
    "react/jsx-indent-props": [
      "error",
      4
    ],
    "react/jsx-filename-extension": [1, { "extensions":   [".js", ".jsx"] }]
  }
}

Sidenote - There’s an alternate way to configure eslint without the .eslintrc file. You can place a key called eslintConfig inside your package.json with a value same as that of the json that’s inside your .eslintrc. This will however make your package.json file fat and it comes down to personal preference whichever technique you want to use. If my override rules are short, I prefer the package.json way where as if it’s long, I’m quite fine with the addition of the .eslintrc file.

• For Atom - https://hackernoon.com/what-is-eslint-how-do-i-set-it-up-on-atom-70f270f57296.
• For WebStorm - https://www.jetbrains.com/help/webstorm/eslint.html.
• For Sublime - https://github.com/roadhump/SublimeLinter-eslint.

There’s google for others!

<img src=“https://raw.githubusercontent.com/MustansirZia/mustansir.dev/master/static/images/lint.png"

<img src=“https://raw.githubusercontent.com/MustansirZia/mustansir.dev/master/static/images/lint_jsx.png"

And profit!

Clap for this article on medium?