How To Set Up ESLint & Prettier In VS Code

INTRODUCTION

ESLint and prettier are the most popular tools which are used almost everywhere so today we will be talking about what eslint and prettier are and we will see how easy it is to set it up in vs code without getting any errors.

What is ESLint

What is Prettier

Difference between Prettier & ESLint

Many people think eslint & prettier work same but there is a huge difference. Prettier is a code formatter. In the below case, you can see that the code, before prettier, is pretty messy and very hard to read as compared to after prettier.

Before Prettier

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
  </head>
        <body>
        <div id="app"></div>
              <script type="module" src="/main.js"></script>
  </body>
</html>

After Prettier

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

And, eslint is a linter. As in the case below you can see eslint is giving us an error that 'hello' is declared but its value is never read.

import './style.css'

const hello = 'WASSUP GUYS' // 'hello' is declared but its value is never read

As you can see it will make our project free of unused variables or functions which we create but don't use it and forget to remove them.

Setup ESLint & Prettier with Vite

We are going to use to vite to create our project if you don't know what vite is then read my previous blog. To create a vite project open your terminal and navigate to your specific directory and paste the following command.

npm init @vitejs/app

Give the name of your project and choose vanilla js as it is a tutorial project. And then change your directory to that folder and install all the modules.

cd *your project name*
npm install
npm run dev

Now, copy the below code and paste it into your terminal. Make sure you are in your project folder.

npm install -D eslint prettier eslint-config-prettier

After downloading it you can see in the package.json file all your dependencies. Install eslint and prettier extensions from vs code.

{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "vite": "^2.3.8"
  }
}

After that run npx eslint --init on the terminal. And follow the following steps.

How would you like to use ESLint? · To check syntax and find problems 
√ What type of modules does your project use? · JavaScript modules (import/export)
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript

Then, you will notice that a .eslintrc.js file has been created in your project directory. Open it and add prettier in the extends property.

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {},
}

After that create a .prettierrc file in your project directory and for testing, we will add these two rules.

{
  "semi": false,
  "singleQuote": true
}

There are lots of rules that you can add in your prettier file as well as in eslint check out the documentation for it. After that when you try to add a double quote in your javascript file it will automatically change to a single quote.

import './style.css'

const hello = 'WASSUP GUYS'

CONCLUSION

So, we talked about how to set up eslint and prettier in vs code without getting any errors. If you have any problems regarding eslint & prettier feel free to ask in the comment section. This is a pretty basic setup for prettier and eslint and I will highly recommend you to follow the documentation. You can also use the Airbnb config which most people use.