DEV Community

loading...
Cover image for How To Set Up ESLint & Prettier In VS Code

How To Set Up ESLint & Prettier In VS Code

Rahul Shaw
Hey Guys, I'm Rahul Shaw and I am currently learning frontend web development.
Updated on ・4 min read

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

ESLint is a tool used for identifying bugs and errors in your typescript/javascript code to make code more consistent and easy to read. It is also known as linters. ESLint statically analyzes your code to quickly find problems. Many problems ESLint finds can be automatically fixed. And the best part is you can customize ESLint to work exactly the way you need it for your project.

What is Prettier

Prettier is a tool that helps you to format your code. It supports many languages. It saves you time and energy since you don't have to format code on your own.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: {},
}
Enter fullscreen mode Exit fullscreen mode

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

{
  "semi": false,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

Collapse
charlenebx profile image
Charlène Bonnardeaux

Thanks for this little introduction ;)

Collapse
rahulshawdev profile image
Rahul Shaw Author

Your Welcome

Collapse
jjablonskiit profile image
Jakub Jabłoński

What do I set a default formatter to in vscode with this setup?

Collapse
rahulshawdev profile image
Rahul Shaw Author • Edited

Prettier as your default formatter