# Setting up a linter

As a developer, it's a good idea to make your development process as streamlined as possible. Installing and utilizing the right tools is an essential part of any project you're working on. Although it's not required, installing a linter will help you greatly.

# Installing a code editor

First, you will need a proper code editor. Using Notepad and Notepad++ is discouraged, as they're inefficient for projects like these. If you are using either, it is highly recommended to switch in order to save everyone lots of headaches and unnecessary syntax error questions.

• Visual Studio Code is a very popular choice known for being fast and powerful. It supports a broad range of languages and comes with its own terminal, as well as built-in intellisense and autocomplete for both JavaScript and TypeScript. This is the recommended choice.
• Atom is user-friendly, being concise and easy to navigate. This is what many developers use to get started.
• Sublime Text is another powerful editor known for looking sleek and performing speedily and efficiently.

# Installing a linter

One of the major advantages proper code editors have over Notepad and Notepad++ is their ability to use linters. Linters check syntax and help you produce consistent code that follows certain style rules that you can define yourself, if you choose to do so. They help form good habits if you stick to a single configuration. When you start using a linter, you might be bombarded with errors at first. This is normal and perfectly fine. It might be a pain to get through during the initial process, but it's most definitely worth it.

First, be sure to install the ESLint package so that you have it available in your project.

# locally
npm install eslint

# globally
npm install --global eslint

Afterwards, install the appropriate plugin(s) for your editor of choice.

• ESLint for Visual Studio Code
• Linter-ESLint for Atom (requires Linter for Atom)
• ESLint for Sublime Text

# Setting up ESLint rules

ESLint may display a lot of warnings and errors about your code when you start using it, but don't let this startle you. In order to get started, follow these steps:

1. Create a file in your root directory named .eslintrc.json (where your main project file is located).
2. Copy the code below into the file.

{
	"extends": "eslint:recommended",
	"env": {
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 2017
	},
	"rules": {

	}
}

This is the base of what an ESLint file will look like. The rules object is where you'll define what rules you want to apply to ESLint. For example, if you want to make sure you never miss a semicolon, the "semi": ["error", "always"] rule is what you'll want to add inside that object.

You can find a list of all of ESLint's rules on their site, located here. There are indeed many rules and it may be overwhelming at first, but you'll only need to go through the list and define your file once.

Alternatively, if you don't want to go through everything one-by-one on your own, you can use the ESLint file we use for this guide.

{
	"extends": "eslint:recommended",
	"env": {
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 2017
	},
	"rules": {
		"brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
		"comma-dangle": ["error", "always-multiline"],
		"comma-spacing": "error",
		"comma-style": "error",
		"curly": ["error", "multi-line", "consistent"],
		"dot-location": ["error", "property"],
		"handle-callback-err": "off",
		"indent": ["error", "tab"],
		"max-nested-callbacks": ["error", { "max": 4 }],
		"max-statements-per-line": ["error", { "max": 2 }],
		"no-console": "off",
		"no-empty-function": "error",
		"no-floating-decimal": "error",
		"no-inline-comments": "error",
		"no-lonely-if": "error",
		"no-multi-spaces": "error",
		"no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1, "maxBOF": 0 }],
		"no-shadow": ["error", { "allow": ["err", "resolve", "reject"] }],
		"no-trailing-spaces": ["error"],
		"no-var": "error",
		"object-curly-spacing": ["error", "always"],
		"prefer-const": "error",
		"quotes": ["error", "single"],
		"semi": ["error", "always"],
		"space-before-blocks": "error",
		"space-before-function-paren": ["error", {
			"anonymous": "never",
			"named": "never",
			"asyncArrow": "always"
		}],
		"space-in-parens": "error",
		"space-infix-ops": "error",
		"space-unary-ops": "error",
		"spaced-comment": "error",
		"yoda": "error"
	}
}

The major points of this setup would be:

• Allowing you to debug with console.log();
• Prefer using const over let or var, as well as disallow var;
• Disapproving of variables with the same name in callbacks;
• Requiring single quotes over double quotes;
• Requiring semicolons. While it's not required in JavaScript, it's considered one of the most common best practices to follow;
• Requiring accessing properties to be on the same line;
• Requiring indenting to be done with tabs;
• Limiting nested callbacks to 4. If you hit this error, it is a good idea to consider refactoring your code.

If your current code style is a bit different or you simply don't like a few of these rules, that's perfectly fine! Just head over to the ESLint docs, find the rule(s) you want to modify, and change them accordingly.