--- title: How to Integrate Prettier and ESLint in VSCode and React description: Best practices for installing Prettier and ESLint to avoid bugs and improve styling. image: https://blog.avenuecode.com/hubfs/puzzle-g620e1102f_1920.jpg --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu* - Technology [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) - [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) # [How to Integrate Prettier and ESLint in VSCode and React](https://blog.avenuecode.com/how-to-integrate-prettier-and-eslint-in-vscode-and-react) - [Tweet](https://twitter.com/share) *perm\_identity* [João Vitor Zaniolo de Oliveira](https://blog.avenuecode.com/how-to-integrate-prettier-and-eslint-in-vscode-and-react/author/jo%C3%A3o-vitor-zaniolo-de-oliveira?hsLang=en-us) *schedule* 12/8/21 2:00 PM In today's article, we will present a step-by-step guide to integrating Prettier with ESLint in VSCode, following the best practices that each tool presents in its documentation. ##### Prettier Prettier is an opinionated code formatter that supports many languages and integrates with most editors. This tool enforces a consistent code style based on its own rules, which can be customized if necessary. ##### ESLint ESLint is a static code analysis tool that identifies and reports patterns found in ECMAScript/JavaScript code to help you make your code more consistent and to assist you in avoiding bugs. ##### Dependencies Make sure you have these tools installed on your computer before you follow the installation steps below: - [VSCode](https://code.visualstudio.com/) - [Node.js](https://nodejs.org/en/) (type `node -v` and `npm -v` - [Yarn (optional)](https://yarnpkg.com/) And some VSCode extensions: - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) ##### Installation Inside a React project, install the following dependencies as dev dependencies: ``` $ npm install -D eslint prettier eslint-config-prettier# or$ yarn add -D eslint prettier eslint-config-prettier ``` Now, run the ESLint init script to initialize the linter in your project with custom configurations. ``` $ npx eslint --init# or$ yarn eslint --init ``` These are the options you need to select: ``` ? How would you like to use ESLint?> To check syntax, find problems, and enforce code style? What type of modules does your project use?> JavaScript modules (import/export)? Which framework does your project use?> React? Does your project use TypeScript?> Optional, choose which best suits your project? Where does your code run?> Browser? How would you like to define a style for your project?> Use a popular style guide? Which style guide do you want to follow?> Optional, choose which best suits your style? What format do you want your config file to be in?> JSON (if you want IntelliSense when configuring eslint file) ``` At this point, we are using the `prettier` and `eslint` dependencies that we added before. If you close and re-open your VSCode, you'll see some red squiggly lines in your editor, and that's why we also installed the `eslint-config-prettier` dependency. So let's use it! It's super simple. Just add `"prettier"` to the `"extends"` array in your `.eslintrc.*` file. Make sure to put it **last** to override other configurations, like so: ``` { "extends": [ "..some-other-config-you-use", "prettier" ]} ``` Now you need to set up Prettier so you can choose if you want semicolons, single or double quotation marks, etc. Create a `.prettierrc.json` file at the root of your project and add some configurations to it. Feel free to customize it with your preferences. ``` { "semi": true, "singleQuote": true, "trailingComma": "es5", "arrowParens": "avoid", "endOfLine": "lf"} ``` You can search for [more options here](https://prettier.io/docs/en/options.html). The last thing you need to do is to tell VSCode to choose Prettier as your default formatter so Prettier can take care of the styling for you. Edit your configuration file by pressing `Cmd + Shift + P` or `Ctrl + Shift + P` and typing *"Preferences: Open Settings (JSON)"*. Now add the following lines: ``` { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"} ``` ##### Conclusion And that's it. Now you have a linter to help you reduce bugs in your code, as well as a super customized styling tool that helps you and your team ensure you're following the pattern that was created in your project. ##### Bonus There is another plugin that you can use with ESLint to help you with the dependencies array that React Hooks have. This plugin will help  control UI updates. It will read your code and point out if you're missing any dependencies. To set it up, install the plugin in your project: ``` $ npm install -D eslint-plugin-react-hooks# or$ yarn add -D eslint-plugin-react-hooks ``` And add the following before `"prettier"` in the `"extends"` array in your `.eslintrc.json` file: ``` { "extends": [ "..some-other-config-you-use", "plugin:react-hooks/recommended", "prettier" ]} ``` --- ### Author # João Vitor Zaniolo de Oliveira João Vitor is a UI Engineer at Avenue Code. He is a proactive developer and a tech enthusiast who likes to teach and share knowledge with others. When he's not working, he likes running, watching movies, listening to music, and eating pizza. --- ### Related Posts ### New Horizons for Solution Architects [READ MORE](https://blog.avenuecode.com/new-horizons-for-solution-architects?hsLang=en-us) ### How to Use Circuit Breaker Resilience in Your API Integration [READ MORE](https://blog.avenuecode.com/how-to-use-circuit-breaker-resilience-in-your-api-integration?hsLang=en-us) ### How to Run Rust from Python [READ MORE](https://blog.avenuecode.com/how-to-run-rust-from-python?hsLang=en-us) ### Deep Dive into MuleSoft Internals - API Tracking [READ MORE](https://blog.avenuecode.com/what-you-need-to-know-about-api-tracking-in-mulesoft?hsLang=en-us) ### Leave a Comment! ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenuecode/) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Avenue Code-primary versions_logo white avenue code endorsement 2](https://blog.avenuecode.com/hs-fs/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png?width=1180&name=Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png "Avenue Code-primary versions_logo white avenue code endorsement 2") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript) © 2026 Avenue Code ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "João Vitor Zaniolo de Oliveira", "url" : "https://blog.avenuecode.com/author/joão-vitor-zaniolo-de-oliveira" }, "dateModified" : "2022-10-12T19:45:07.043Z", "datePublished" : "2021-12-08T17:00:00.000Z", "headline" : "How to Integrate Prettier and ESLint in VSCode and React", "image" : [ "https://blog.avenuecode.com/hubfs/puzzle-g620e1102f_1920.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.avenuecode.com/how-to-integrate-prettier-and-eslint-in-vscode-and-react", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png" }, "name" : "Avenue Code" } } ```