# ESLint

A linter (opens new window) is a static analysis tool that analyzes your source code WITHOUT executing it
ESLint (opens new window) is an open source JavaScript/TypeScript linter
ESlint analyzes your code and:
- finds programming errors, bugs and suspicious constructs (e.g. infinite loops)
- proposes "best practice" programming patterns
- prevents formatting issues (e.g. spacing, punctuations, linefeeds, ...)

# ESLint vs Prettier

Do we still need Prettier if we already use ESLint? YES!
- Both packages have some common settings like single or double quotes and semicolons but ESLint is ONLY for JavaScript
- Prettier is also for other filetypes like .html, .css, .scss, .json, ...
Later on we integrate Prettier into ESLint to avoid conflicts between both packages

# Install and configure ESLint

DEFAULT STYLE GUIDE

ESLint can check 100+ settings!
Most developers don't write their own style guide because it is very time-consuming
That's why we start from a pre-made (Airbnb) style guide and customize it to our needs
The Airbnb JavaScript Style Guide (opens new window) is very well documented and has a lot of examples of good vs bad coding

Open the terminal and install eslint as a devDependency: npm i -D eslint @eslint/create-config
Set up a configuration file with npm init @eslint/config and answer the questions:
- How would you like to use ESLint?:
  To check syntax, find problems, and enforce code style
- What type of modules does your project use?:
  JavaScript modules (import/export)
- Which framework does your project use?:
  None of these
- Does your project use TypeScript?:
  No
- Where does your code run?:
  Browser and Node (click a to select both options)
- How would you like to define a style for your project?:
  Use a popular style guide
- Which style guide do you want to follow?:
  Airbnb: https://github.com/airbnb/javascript (opens new window)
- What format do you want your config file to be in?:
  JSON
- Would you like to install them now with npm?:
  Yes
- Which package manager do you want to use?
  npm
This configuration installed two extra devDependencies and added them to the package.json file:

 "devDependencies": {
    "@eslint/create-config": "^0.4.2",
    "eslint": "^8.34.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "prettier": "^2.8.4"
}

1
2
3
4
5
6
7

The configuration can be found in .eslintrc.json:
- env: adds knowledge for browser, node global variables and for ES2021 (EcmaScript 2021 (opens new window)) features
- extends: a list of starter rules (we start from the Airbnb (opens new window) set of rules)
- parserOptions:
  - "ecmaVersion": "latest": stands for ES2021
  - "sourceType": "module": use ES6's imports and exports functionality
- rules: here you can override the Airbnb rules if you want

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "airbnb-base",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Answer 'Yes' when PhpStorm asks you to apply the Code Style settings from ESLint:

Code Style

# Enable ESLint in your project

ESLint is already integrated in PhpStorm, you only have to enable it
Open File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
Check Automatic ESLint configuration

Enable ESLint

With the Airbnb settings, almost the entire app.js document colors red!

Airbnd errors

Hover over the problems (errors and warnings) and look at the description:
- ESLint: Unexpected var, use let or const instead.(no-var)
- ESLint: Expected linebreaks to be 'LF' but found 'CRLF'.(linebreak-style)
- ESLint: 'c' is assigned a value but never used.(no-unused-vars)
- ESLint: 'name' is never reassigned. Use 'const' instead.(prefer-const)
- ESLint: Identifier 'sur_name' is not in camel case.(camelcase)
- ESLint: Unexpected console statement.(no-console)
- ESLint: Unexpected string concatenation.(prefer-template)
The last part of the problem description refers to the violated rule:
- You can fix the problem right away (by clicking on ESLint fix '...' or by manually adjusting your code if the problem cannot be fixed automatically)
  OR
- You can override the corresponding rule in your personal config file
  - Which rule you need to override is indicated between brackets (no-var, linebreak-style, ...)

# ESLint configuration and plugins

ESLint is very extendable and there are a lot (more than 2000!) plugins (opens new window) available
We have to add a few extras to our project:
- Prettier and ESLint have a few common rules that (may) conflict with each other
- In the index page, ESLint doesn't work inside the <style> tag
- ESLint doesn't recognize the jQuery $ selector

# eslint-config-prettier and eslint-plugin-prettier

We follow this guide (opens new window) to turn off all ESLint rules that are unnecessary or might conflict with Prettier
We follow this guide (opens new window) to run Prettier as an ESLint rule and report differences as individual ESLint issues
Run npm i -D eslint-config-prettier eslint-plugin-prettier
Update .eslintrc.json
- Update extends to an array and add prettier as the LAST item to the extends key
- Create a new plugins key and add prettier to this plugins key
- Add "prettier/prettier": "error" to the rules key

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": ["airbnb-base", "prettier"],
    "plugins": ["prettier"],
    "overrides": [],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "prettier/prettier": "error"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

On the app.js page, the errors about the linebreaks are gone

# eslint-plugin-html

Follow this guide (opens new window) to lint inline scripts in HTML files
Run npm i -D eslint-plugin-html
Update .eslintrc.json
- Add html to the plugins key

"plugins": ["prettier", "html"],

ESLint now also works on embedded scripts inside HTML pages

eslint-plugin-html

# Enable jQuery $

Update .eslintrc.json
- Add jquery to your environment variables

"env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jquery": true
},

1
2
3
4
5
6

# Override Airbnb linting rules

When you don't like some Airbnb linting rules (opens new window), you can override them in the rules key inside .eslintrc.json
Search the ESLint rules (opens new window) for a full description of every rule with examples
A rule configuration can be a string or a string with options
- string example
  - off or 0: turns the rule off
  - warn or 1: turns the rule on as a warning (rule is recommended, not required)
  - error or 2: turns the rule on as an error (rule is required)
  - For example: disallow object constructors (no-new-object (opens new window))
```
"rules": {
    "prettier/prettier": "error",
    "no-new-object": "error"
} 
```
  1
  2
  3
  4
- string with options example
  - The first argument is always off, warn or error
  - The next argument(s) fine-tune(s) the first argument
  - For example: enforce consistent line breaks inside braces (object-curly-newline (opens new window))
```
"rules": {
    "prettier/prettier": "error",
    "no-new-object": "error",
    "object-curly-newline": ["error", { "multiline": true }]
} 
```
  1
  2
  3
  4
  5

# Autofix ESLint problems

Only violations of ESLint rules (opens new window) with a icon can be fixed automatically
There are three ways to automatically fix ESLint problems
- Click on ESLint: fix '....' (or ALT + SHIFT + ENTER) when hovering the problem
- Right click on the page and select Fix ESLint Problems to fix all problems on this page
- Open File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint and check the Run eslint --fix on save option

# Suspend problems on page

Use special comments to (temporarily) disable ESLint rules (opens new window) in your file
Some examples:
- /* eslint-disable */ disables all ESLint rules
- /* eslint-enable */ enables all ESLint rules
- /* eslint-disable <rule1> <rule2> */ disables <rule1> and <rule2> on the entire page
- // eslint-disable-next-line <rule1> <rule2> disables <rule1> and <rule2> on the following line only

READING/WATCHING TIPS