Configure ESLint and Prettier for a new Vite project
Following on from my previous article on why having code conventions in a team is so important. I wanted to share how I would approach getting up and running for a new JavaScript project.
This technical exercise will have you use the following technologies on tools
- Vite - Development environment
- NPM - Package manager for Node
- ESLint - JavaScript code analysis tool
- Prettier - Code formatter
- Terminal - I’m working on a Linux based computer so commands will differ for Windows users.
- Visual Studio Code - Desktop or cloud-based code editor
All the documentation linked above for each project is great if you find yourself wanting to learn more and dig deeper into each one. I would recommend doing so there.
01. Setup Vite with ES6 JavaScript support
Let's get started by installing Vite using our terminal and NPM which I have installed globally on my computer.
npm create vite@latest
Vite will now walk you through a number of steps to select what type of project you want. For this exercise I will choose the following:
Project name: vite-eslint-prettier
Select a framework: vanilla
Select a variant: vanilla
Once you have configured Vite using their steps you should be shown the next steps for installing and running your new Vite app locally.
Done. Now run:
cd vite-eslint-prettier
npm install
npm run dev
02. Install and configure ESLint
Now we have our local environment. Let's get ESLint setup. Using ESLint’s @eslint/config package is a great way to do this.
This will do a lot of leg work for us. Like Vite, it will ask us a number of questions about our project. It will then install the correct ESLint core packages and plugins and construct an ESLint configuration file in the project. Let's step through this in our terminal.
npm init @eslint/config
...
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
To check syntax, find problems, and enforce code style
The first question you’re asked is about how you want to use ESLint in your project.
“Syntax only” ****will install and configure ESLint but will have no rules set up. Not really ideal as you want some sensible defaults as a minimum.
“Syntax and find problems” will do the same as above but will also configure ESLint to use the built-in recommended rules call eslint:recommended which is actually a really good starting point.
“Syntax, find problems and enforce code style” ****is what we want for this tutorial. It adds eslint:recommended but will also let you choose between a number of style guides hosted as NPM packages. We will choose Airbnb for this tutorial.
✔ 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
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
What’s also great about using @eslint/config is it installs all the dependencies you need including ESLint itself.
And that's it for ESLint for now.
03. Install and configure Prettier
Now to bring in Prettier for our code formatting. All we need to do here is install two dependencies from the Prettier project and then add a prettier config file.
npm install prettier eslint-config-prettier --save-dev
Lets run through what we are installing here
prettier ****is the core package which we will need to run it.
eslint-config-prettier ****will essentially turn off all formatting rules that ESLint brings along. This is so they can both work together on the same project.
Prettier can now run against your code. It comes with some sensible defaults, but if you want to change these you will need a Prettier config file.
Add a .prettierrc file to your projects root and then add the following
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 80
}
I use this configuration on a lot of my projects. Some of the options here are personal preference, so it's at this point you would discuss and agree on what your conventions will be as a team.
04. Using ESLint and Prettier
Now we have both ESLint and Prettier installed and configured let's use them. When we installed Vite we were given some boilerplate code. Let's use the main.js file provided in the install.
In that file add the following code (a snippet with errors from the ESLint docs).
function addOne(i) {
if (i != NaN) {
return i++;
} else {
return;
}
}
This code has both style and formatting problems which we can test with.
Now in your terminal lets run ESLint and see the output
npx eslint main.js
...
1:10 error 'addOne' is defined but never used no-unused-vars
2:7 error Use the isNaN function to compare with NaN use-isnan
2:9 error Expected '!==' and instead saw '!=' eqeqeq
3:14 error Unary operator '++' used no-plusplus
3:14 error Assignment to function parameter 'i' no-param-reassign
4:10 error Unnecessary 'else' after 'return' no-else-return
5:5 error Function 'addOne' expected a return value consistent-return
5:5 error Unnecessary return statement no-useless-return
Great! We see the errors in our terminal output. You will notice each has a unique name on the far right. These can be used to find the rule in ESLint or in the Style guide you are using and read in detail why it is an error. For example, if we took to top one of no-unused-vars we can see the following on the ESLint website https://eslint.org/docs/rules/no-unused-vars.
Lets to do the same for Prettier.
npx prettier --check main.js
...
Checking formatting...
[warn] main.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
This is working, but unlike ESLint, Prettier is designed to be less noisy and instead just focus on fixing your formatting errors instead of shouting about it. So you will see very little in the terminal output.
Now the best part is that we can fix a lot of these issues in our code automatically. So let's add a couple of flags to our CLI commands.
npx eslint --fix main.js
...
1:10 error Expected to return a value at the end of function 'addOne' consistent-return
1:10 error 'addOne' is defined but never used no-unused-vars
2:7 error Use the isNaN function to compare with NaN use-isnan
2:9 error Expected '!==' and instead saw '!=' eqeqeq
3:14 error Unary operator '++' used no-plusplus
3:14 error Assignment to function parameter 'i' no-param-reassign
Adding --fix to ESLint has fixed 2 of the 8 original errors for us. However, like a lot of errors, we will come across the context that code sits in is really important to how it should be written. So ESLint can’t fix all our errors I’m afraid. So we will have to manually dig into each of those error definitions to understand it and then change the code appropriately.
Doing the same for Prettier
npx prettier --write main.js
As Prettier only cares about formatting things like your quote, spacing or line length the fixes can all be done automatically. So less effort for this one.
Now, to save the hassle of running both commands in the terminal we can wrap them up in NPM Scripts. Plus we can drop the npx at this point as well.
In our package.json file we can add the following two scripts
"scripts": {
"lint:style": "eslint --fix main.js",
"lint:formatting": "prettier --write main.js"
},
We still have to run both npm run lint:style and npm run lint:formatting here so let's add wrapper script.
"scripts": {
"lint:style": "eslint --fix main.js",
"lint:formatting": "prettier --write main.js",
"lint": "npm run lint:style && lint:formatting"
},
This last script will now run both when running npm run lint .
N.B I would recommend at this point to install another dependency called npm-run-all which gives you much better control over running multiple scripts.
05. Integrate ESLint and Prettier into VS Code
Our final optimisation of this setup is we can actually visualise and fix the errors highlighted by ESLint and Prettier in VS Code.
You can install the following extensions
Once both are installed, open up the main.js file in our Vite project and reset to code back to the example code full of errors. You should now see the errors are highlighted with a red underline.
You can now hover your cursor over the code underlined in red and a VS Code popup will give you more information on the error including the list of ESLint rules. From there you can now click on those unique names mentioned before, directly linking you to error documentation. Awesome!
Lastly, with the Prettier extension installed. You can choose it to format your code on saving, or even as you type (but I wouldn’t recommend typing).
To set this up, go to VS Code Settings and type in the setting search format on save. Enable the checkbox.
Then search for default formatter . From the drop-down look for Prettier - Code Formatter . I would restart VS Code to make sure all the settings take hold. But now you can again go to the main.js file. Remove some semi colons or revert the quotes to single. Then hitting save will have them automatically fixed.
And that’s it! You now are set up to enforce good coding conventions as your build out your projects.
Happy coding 👋