# 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

• 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"
}
 
        Copied!
    

• 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": {
    }
}
 
        Copied!
    

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

# 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

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

• 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"
    }
}
 
        Copied!
    

• 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"],
 
        Copied!
    

• ESLint now also works on embedded scripts inside HTML pages

# Enable jQuery $

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

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

# 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"
    } 
     
            Copied!
        

    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 }]
    } 
     
            Copied!
        

    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