Setting up ESLint & Prettier for React Development in VSCode
Struggling with this whole ESLint & Prettier thing, eh?
Let me guess. Spent hours trying to set up the project, when you should’ve had pushed your first commit already? I feel you. That’s why I won’t be torturing you with long paragraphs filled with stories about depressed developers and their unborn projects.
Let’s dive in!
But first, some quick info.
What is Prettier? An opinionated code formatter; Supports many languages; Integrates with most editors; Has few options [source]
Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux and macOS. [source]
0. Create your app using CRA (create-react-app)
… if you haven’t already. If you have, you can skip this step.
> npx create-react-app my-project
I named the project
my-project.You can use the name of your project instead.
1. Install required dependencies:
> npm i -D firstname.lastname@example.org prettier babel-eslint eslint-plugin-react eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-prettier
-D flag will make dependencies appear under “devDependencies” in
2. Install VSCode extensions for ESLint and Prettier:
Launch VS Code Quick Open (
Ctrl+P), paste the following commands, and press enter.
ext install dbaeumer.vscode-eslint
ext install esbenp.prettier-vscode
Search for extensions directly in VSCode by navigating to
Extensions section of activity bar and install using
.eslintrc.js file in a root folder of your project with the following content:
.prettierrc.js file in a root folder of your project with the following content:
That’s it. We did it!
Here are some notes though.
- You may need to reload VSCode window for changes to take place. To do so press
Ctrl+Shift+Pto open command palette, and type
Reload Windowor just press
- Some of the rules in both config files are optional, because I’ve adjusted them according to my needs. You can modify them as you wish.
- This article is missing details, because the initial aim was to provide fast and straightforward solution for the task of setting up the project. You can find additional info about installed packages and specified rules on the world wide web.
PS. I’ve got a gift for you.
Here’s a link to the github repo with the project already setup. Feel free to use it for your own needs.