Set up es-lint, prettier, husky, lint-staged in vs-code for vanilla JS

As a beginner developer I ran to different problem while setting up the es-lint ,prettier,husky and lint-staged. This is the beginners guide to setting up the es-lint with prettier by using husk with lint-staged.I have compiled the knowledge from different docs,blogs,videos and hints while writing this blog and the reference are at the bottom of the page

In this blog I have assumed that the user knows the basics of JavaScript,npm(package-manager),git and this will be simple procedural guide to make the configuration approach easy.

Installing

At first we install node,git and vs-code in the computer or your computing device. The instruction are present on their official website and the links are given below

Initializing git

After installing the above things first open vs code then we initialize the git through its terminal or the shell of your device in the given directory that

git init

We also create .gitignore file in the same directory to make sure the file we don't want to track will not to committed in the staging area. For this project we write /node_modules in the .gigignore file as we don't want to track it as it consist most many files to track and occupy lots of space.We write the following text in the .gitignore file

/node_modules

Downloading Extension

We download the prettier and es-lint extension from the given vs code extension panel or you can also use web or command in the terminal to download and operate the extension

Installing packages

Now we open the project directory that you want to configure in VS-code and first we initialize npm so that the packege.json command will be created.The command is given below.

npm init -y

npm init -y will simply generate an empty npm project without going through an interactive,so now we install required packages with the following command.

npm i -D eslint prettier husky lint-staged eslint-config-prettier

The -D flag will install the packages as the "devDependencies"(i.e Devlopment Dependinces).

"devDependencies": Packages that are only needed for local development and testing.

Configuring es-lint

The eslint can be configured with the following command given below:

npx eslint --init

After execution of the command es-lint will ask some commnd in the terminal and you can configur your project as per your needs.

My configuration

As my project is just a basica vanilla JS I have configured the es-lint in the following way:

1. How would you like to use ESLint?

To check syntax, find problems, and enforce code style

2. How would you like to use ESLint? 

JavaScript modules (import/export)

3. Which framework does your project use?

None of these

4.Does your project use TypeScript? 

No

5. Where does your code run?

Browser

6. How would you like to define a style for your project?

Use a popular style guide

7. Which style guide do you want to follow?

Airbnb: https://github.com/airbnb/javascript

8. What format do you want your config file to be in? 

JSON

9. Would you like to install them now with npm? 

Yes

You can always configure the eslint as per your needs after the q&a is finished it will install the additional dependencies and create .eslintrc.json file or can be in diffrent file format as per your choice before

Configuring Prettier

We create .prettierrc file in the same directory so that the we can enforce the prettier rules. Some of the enforced prettier rules are given below:

{
  "semi": flase,
  "printWidth": 120,
  "singleQuote": true,
  "arrowParens": "always",
  "proseWrap": "preserve"
}

After this process we add the "prettier" in the .eslintrc.json file so that the conflicting rules between prettier and eslint will be handeled be eslint-config-prettier.After adding the give code the file will be as shown below.

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

Configuring husky and lint-staged

The fastest way to start using lint-staged is to run the following command in your terminal:

npx mrm@2 lint-staged

This command will install and configure husky and lint-staged depending on the code quality tools from your project's package.json dependencies, so please make sure you install (npm install --save-dev) and configure all code quality tools like Prettier and ESLint prior to that.

Don't forget to commit changes to package.json and .husky to share this setup with your team!

Now change a few files, git add or git add --patch some of them to your commit, and try to git commit them.

After this the code of the package.json will look as given below:

{
    "name": "canvas_tutorial",
    "version": "1.0.0",
    "description": "",
    "main": "script.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "prepare": "husky install"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "eslint": "^8.3.0",
        "eslint-config-airbnb-base": "^15.0.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.25.3",
        "husky": "^7.0.4",
        "lint-staged": "^12.1.2",
        "prettier": "^2.5.0"
    },
    "lint-staged": {
        "*.js": "eslint --cache --fix",
        "*.{js,css,md}": "prettier --write",
        "*": "git add"
    }
}

Testing

Please test your project to know if the all the process is working well. If your project is linted and well formatted and will only be staged when there is no linting or formatting error then every thing is working well.

Further more

This is just a stepping stone and you can do a lot with eslint,prettier,husky etc.I would be very glad for to your recommendation for further improvement of the blog