Setup and use ESLint to create clean Javascript

This tools you should not miss when writing javascript (or typescript) for browsers.

ES stands for "ecmascript" -- the official name of the JavaScript standard.

Here is a compehensive setup guide and some options explained as you will have to repeat these steps in every project.

Setup ESlint

You have to setup a npm project in the root folder using npm init and answer some questions on your project or just hit return several times and edit package.json later.

Setup of the ESlint tool is a simple as:

>npm init @eslint/config

The you have to answer some questions and then you go.

>npm init @eslint/config

  Need to install the following packages:
  @eslint/create-config@0.4.1
  Ok to proceed? (y) y
  √ How would you like to use ESLint? · style
  √ What type of modules does your project use? · esm
  √ Which framework does your project use? · none
  √ Does your project use TypeScript? · No / Yes
  √ Where does your code run? · browser, node
  √ How would you like to define a style for your project? · guide
  √ Which style guide do you want to follow? · standard-with-typescript
  √ What format do you want your config file to be in? · JavaScript
  ... setup

As a result the required packages are now as dev dependencies in your package.json file a configuration file named .eslintrc.js and all dependencies are also installed in the node_modules folder.

package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "mnimal browser script linting",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.46.0",
    "eslint": "^8.29.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.6.0",
    "eslint-plugin-promise": "^6.1.1",
    "typescript": "^4.9.4"
  }
}
    

.eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard-with-typescript',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
  }
}
    

The project is now ready to be analyzed using the eslint command:

>eslint *.js

In case you use a development environment like visual studio you can install a extension and the errors will also be shown in the Problems window.

Script in HTML files

To support scanning html files with script tags inside a html plugin can be installed:

>npm i --save-dev eslint-plugin-html

you also have to add the plugin to the .eslintrc.js configuration:

plugins: ['html'],

Using npm docs eslint-plugin-html you can find more information about this plugin as you also have options to lint the html itself.

Options...

so many, just look into the docs using npm docs eslint. My personal settings for this project you can find in the .eslint.js file in github at: https://github.com/mathertel/advent2022/blob/main/.eslint.js

See Also

• https://eslint.org/
• https://devblogs.microsoft.com/visualstudio/building-a-new-javascript-linting-experience-in-visual-studio/
• https://typescript-eslint.io/getting-started

Tags