eslint

Sophie Andriamahenintsoa
2 min readMay 25, 2021
eslint logo

ESLint is a tool which make code more consistent to follow common code style.
There is another tool called TSLint, but since 2019 it has been deprecated, and it's recommended to use ESLint.
- In order to avoid bifurcating the linting tool space for TypeScript, we therefore plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support.

Concept

  • ESLint uses Espree for JavaScript parsing.
  • ESLint uses an AST (Abstract Syntax Tree) to evaluate patterns in code.
  • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

Installation and usage

We need Node.js from12.0.0

- You can install ESLint with npm or yarn

npm install eslint — save-dev

or

yarn add eslint — dev

  • run eslint — init and you’ll have .eslintrc.{js,yml,json} file in directory, where some rules configured as :
{
"rules": {
"indent": ["error", 2],
"no-multi-spaces": "error",
"space-in-parens": ["error", "never"],
"no-multiple-empty-lines": "error",
"prefer-const": "error",
"no-console": "error",
"no-unused-vars": ["error", {"vars": all}, "args": "after-used", "ignoreRestSiblings": false}],
"@typescript-eslint/prefer-readonly": ["error", {"onlyInlineLambdas": truej}]
}
}

space-in-parens, indent … are the names of `rules` in ESLint. The first value is the error level of the rule and can be one of these values:

  • “off” or 0 — turn the rule off
  • “warn” or 1 — turn the rule on as a warning (doesn’t affect exit code)
  • “error” or 2 — turn the rule on as an error (exit code will be 1)

You can see more configuration details on https://eslint.org/docs/user-guide/configuring.

We can use existing rules by `extends`, and this rules will be applied on.

module.exports = {
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
};
  • “off” or 0 — turn the rule off
  • “warn” or 1 — turn the rule on as a warning (doesn’t affect exit code)
  • “error” or 2 — turn the rule on as an error (exit code will be 1) You can see more configuration details on configuration docs We can use existing rules byextends, and this rules will be applied on.

.eslintrc.json configuration example

{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"no-var": "error",
"indent": ["error", 2],
"no-multi-spaces": "error",
"space-in-parens": ["error", "never"],
"no-multiple-empty-lines": "error",
"prefer-const": "error",
"no-use-before-define": "error",
"no-console": "error",
"quotes": [1, "single", { "avoidEscape": true }]
}
}

Then, you can run eslint on any file or directory like this

./node_modules/.bin/eslint yourfile.js

Originally published at http://github.com.

Connect with me on Medium https://medium.com/@sophieelsa

--

--

Sophie Andriamahenintsoa

Front-end dev, focused on UI/UX(+responsive design, accessibility), JS/TS and their frameworks, animations