Prettier & ESLint in Visual Studio Code: The Ultimate Guide

Published: 01 September 2024
on channel: The Common Coder
18,971
421

Learn how to set up Prettier and ESLint in Visual Studio Code to keep your code looking sharp and error-free!

Prettier and ESLint each have their own role: Prettier ensures your code style is clean and consistent, while ESLint catches errors and enforces JavaScript best practices. However, they don’t always work seamlessly together. In this video, we'll show you how to configure Prettier and ESLint to play nicely and how to optimize Visual Studio Code to get the best out of both tools.

Do you already use Prettier or ESLint in your projects? Let me know in the comments!

📺 SUBSCRIBE FOR MORE!
   / @thecommoncoder  
--------------------------------------------------------------------------
✅ PREREQUISITES
Install Node.js: ➡️    • How To Use Git In VS Code Like A Pro!  
Install VS Code: ➡️    • Installing Visual Studio Code on Mac and W...  
Install ESLint: ➡️    • How to Set Up ESLint in 2026! (Beginner's ...  
Using ESLint in VS Code: ➡️    • ESLint and Visual Studio Code: The Ultimat...  
Install & Configure Prettier in VS Code: ➡️    • How to Use Prettier with VS Code! (2026 Fu...  
--------------------------------------------------------------------------
📚 ADDITIONAL RESOURCES
Download Node.js: https://www.nodejs.org
Download VS Code: https://code.visualstudio.com
Prettier: https://www.prettier.io
ESLint: https://eslint.org
--------------------------------------------------------------------------
⏱️ TIMESTAMPS
00:00 - Introduction
00:13 - Prerequisites
00:47 - The End Goal
01:17 - Project Overview
03:58 - Installing the Prettier & ESLint Plugin
06:22 - Demo 1
06:46 - Fixing ESLint Errors on Save
09:08 - Demo 2
09:25 - Final Thoughts
10:02 - Outro
--------------------------------------------------------------------------
🌎 CONNECT WITH ME!
YouTube:    / @thecommoncoder  
Facebook: https://www.facebook.com/profile.php?...
Instagram:   / the.common.coder  
X:   / the_common_codr  
LinkedIn:   / the-common-coder  
Reddit:   / thecommoncoder  
GitHub: https://github.com/the-common-coder
--------------------------------------------------------------------------
💰 AFFILIATE DISCLAIMER
Some links in this description are affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you. Your support helps keep this channel running. Thank you!

#eslint #prettier #thecommoncoder


On this page of the site you can watch the video online Prettier & ESLint in Visual Studio Code: The Ultimate Guide with a duration of hours minute second in good quality, which was uploaded by the user The Common Coder 01 September 2024, share the link with friends and acquaintances, this video has already been watched 18,971 times on youtube and it was liked by 421 viewers. Enjoy your viewing!