Linters - brightstudent/backend Wiki

Linters

Linters and formatters are tools for cleaning up your code. This guarantees that your code is consistent and simple to understand (consider indents, single/double quotes, and so on).

Advantages of Linting

  1. Fewer errors in production. The use of linters helps to diagnose and fix technical issues. As a result, fewer defects make their way to production.
  2. Readable, maintainable, and more consistent code. Linters can help teams achieve a more readable and consistent style, through the enforcement of its rules. (This is also called formatting)
  3. Fewer discussions about code style and aesthetic choices during code reviews. Code review discussions shouldn’t be riddled with endless arguments about stylistic preferences. Linters can take those topics out of the way.
  4. Objective measurement of code quality. Discussions about code quality often veer into subjectivity. Linters provide an objective and measurable assessment of code quality.
  5. More secure and performant code. Not all linters analyze source code regarding its performance and safety, but some do.
  6. Education about code quality reaches more developers. Linters can help developers—particularly the most inexperienced ones—to learn about code quality.

My linter options

JSLint

Pros

  • Comes configured and ready to go (if you agree with the rules it enforces)

Cons

  • JSLint doesn’t have a configuration file, which can be problematic if you need to change the settings
  • Limited number of configuration options, many rules cannot be disabled
  • You can’t add custom rules
  • Undocumented features
  • Difficult to know which rule is causing which error

JSHint

Pros

  • Most settings can be configured
  • Supports a configuration file, making it easier to use in larger projects
  • Has support for many libraries out of the box, like jQuery, QUnit, NodeJS, Mocha, etc.
  • Basic ES6 support

Cons

  • Difficult to know which rule is causing an error
  • Has two types of option: enforcing and relaxing (which can be used to make JSHint stricter, or to suppress its warnings). This can make configuration slightly confusing
  • No custom rule support

ESLint

Pros

  • Flexible: any rule can be toggled, and many rules have extra settings that can be tweaked
  • Very extensible and has many plugins available
  • Easy to understand output
  • Includes many rules not available in other linters, making ESLint more useful for detecting problems
  • Best ES6 support, and also the only tool to support JSX
  • Supports custom reporters

Cons

  • Some configuration required
  • Slow, but not a hindrance

My Choice

My choose ESLint over the others. JSLint is strict and not configurable, whereas JSHint is lacking the extension mechanism. ESLint checks your code for bugs and other problems as well. ESLint is also the obvious choice since we are expected to use ES6 (or ES2015). Of all the tools mentioned, it has the widest support for ES6 features.

My configuration

module.exports = {
	"env": {
		"browser": true,
		"commonjs": true,
		"es2021": true
	},
	"extends": "eslint:recommended",
	"parserOptions": {
		"ecmaVersion": "latest"
	},
	"rules": {
		"indent": [
			"error",
			"tab"
		],
		"linebreak-style": [
			"error",
			"unix"
		],
		"quotes": [
			"error",
			"double"
		],
		"semi": [
			"error",
			"always"
		]
	}
};

Source https://www.sitepoint.com/comparison-javascript-linting-tools/#:~:text=JSLint%20is%20strict%20and%20not,and%20other%20problems%20as%20well.