Visual Studio Code: Setting up ESLint Rules (Beginner's Introduction)

Required Reading

• Official ESLint Demo
• Official ESLint CLI Engine Ruleset

Syntax

This is an example to disable certain error messages when validating JSDoc documentation comments in your JavaScript code, and to disable a rule to match someone else's code style.

"eslint.options": {
	"rules": {
		"valid-jsdoc": [
			"error",
			{
				"requireParamDescription": false,
				"requireReturnDescription": false,
				"requireReturn": false
			}
		],
		"no-extra-parens": 0
	}
}

Explanation

eslint.options is where you specify your user preferences to customize ESLint. This is where you declare the rules object.

In the rules, you declare key-value pairs, where the keys are the rule names, and the values are either arrays or falsy values. For example, no-extra-parens is set with a falsy value, which is 0. This disables all rules under the no-extra-parens umbrella rule.

In the array, you must specify 2 elements. The first element in the array is what warning/error level the following rules apply to, and this is usually assigned to warning or error. The second element in the array is an object where you declare key-value pairs, pairs that are emitted to the Console/Terminal of Visual Studio Code based on the warning/error levels specified in the first element.

The keys in the second element refers to the sub-rules of the main rule. For example, valid-jsdoc is the main rule. There are a few sub-rules under valid-jsdoc, including requireParamDescription, and requireReturn. The values refers to either a truthy or falsy value, to enable or disable the sub-rule respectively. By default, these sub-rules belong in the error level, so we specify the error level, and under that category, we disable certain sub-rules.

This is how you setup the ESLint rules in Visual Studio Code. Happy coding!