title | date | tags | draft | summary | ||||
---|---|---|---|---|---|---|---|---|
Set up ESLint and Prettier for Your JavaScript Project |
2023-08-06 |
|
false |
A good developer experience will help you produce better code and ship better product. ESLint and Prettier will help you with that. |
Developer experience is really important when you are working on a project. A good developer experience is going to help you and your team be more productive, and eventually, produce better code which leads to better product.
One of the easiest thing that you can do to improve your developer experience is to enforce the same code-styling rules. If you are working in a team, everyone's coding style might be different, especially if they are used to different programming languages. This is where ESLint and Prettier came into the scene.
ESLint is a highly configurable JavaScript linting tool which can be used to find and fix problems and issues with your code. You and your team can choose which rules to enable or disable.
Prettier, unlike ESLint, is focused purely on code formatting. It can be used for other programming languages other than JavaScript such as HTML, CSS, Markdown, JSON, etc. And unlike ESLint, there are not many configuration that you can do.
In a new workspace, use npm init
to generate a new package.json
file.
{
"name": "a-very-cool-project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Run the following command from your CLI:
npm install --save-dev eslint prettier eslint-config-prettier
What this command do is that it will install eslint
, prettier
and eslint-config-prettier
to your project,
and add it to your devDependencies
.
To configure ESLint, you need to add a configuration file to your project. Run the following command from your CLI:
npm init @eslint/config
When prompted, choose To check syntax and find problems
and output the file as JSON for now.
Your generated configuration should look like this (more or less, depending on other options):
{
"env": {
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {}
}
In the root of your project, create .prettierrc
file and add the following config:
{
"printWidth": 80,
"tabWidth": 2
}
This configuration tells Prettier to wrap lines that are more than 80 characters and to use 2 spaces for indentation.
Let's create a .prettierignore
file in our root project to tell Prettier which know
which files/directories that we don't want to format.
# Ignore artifacts:
package-lock.json
build
coverage
Since we installed eslint-config-prettier
, we are going to use it to automatically
turn off ESLint rules that Prettier should handle. In the .eslintrc.json
file, we
should add Prettier to the extends array - making sure that it goes last so that it
has the chance to override other configs.
{
"env": {
...
},
"extends": ["eslint:recommended", "prettier"],
"parserOptions": {
...
},
"rules": {
...
}
}
To test our configuration, add the below scripts to your package.json
:
{
...
"scripts": {
"prettier:check": "npx prettier --check .",
"prettier:fix": "npx prettier --write .",
"lint": "npx eslint ."
...
},
}
Now you can run
npm run lint // run ESLint on all files
npm run prettier:check // Prettier check all files
npm run prettier:fix // Prettier check all files and fix automatically
And we're done! Enjoy your freshly formatted code!