Using ESLint and Prettier in Visual Studio Code

114Likes

11,071Views

May 92024

Josh shows how you can use ESLint to set rules for your JavaScript/TypeScript code and how you can easily format it. He uses VS Code here, but you can do the same things in Visual Studio. Chapters: 00:00 - Introduction 02:10 - Configuring VS Code to run ESLint and Prettier 03:15 - Running ESLint manually 04:15 - Examples of finding issues with your code 05:20 - Installing and configuring the ESLint extension 06:35 - More examples of finding issues with your code 10:00 - Linting vs formatting 10:45 - Formatting with Prettier 12:00 - Formatting on save or manually 13:30 - Linting and formatting when code is checked in to source control 17:30 - Discussion of using linting and formatting when working in teams 20:45 - Wrap-up Resources: Learn more about using ESLint at https://eslint.org/docs/latest/use/ge... Learn how to use ESLint in Visual Studio at https://learn.microsoft.com/en-us/vis...

Transcript

Follow along using the transcript.

Microsoft Visual Studio

334K subscribers

Using ESLint and Prettier in Visual Studio Code

Chapters View all

Introduction

Introduction

Introduction

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Running ESLint manually

Running ESLint manually

Running ESLint manually

Examples of finding issues with your code

Examples of finding issues with your code

Examples of finding issues with your code

Installing and configuring the ESLint extension

Installing and configuring the ESLint extension

Installing and configuring the ESLint extension

More examples of finding issues with your code

More examples of finding issues with your code

More examples of finding issues with your code

Linting vs formatting

Linting vs formatting

Linting vs formatting

Formatting with Prettier

Formatting with Prettier

Formatting with Prettier

Microsoft Visual Studio

Using ESLint and Prettier in Visual Studio Code

Comments 5

Chapters

Introduction

Introduction

Introduction

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Running ESLint manually

Running ESLint manually

Running ESLint manually

Examples of finding issues with your code

Examples of finding issues with your code

Examples of finding issues with your code

Installing and configuring the ESLint extension

Installing and configuring the ESLint extension

Installing and configuring the ESLint extension

More examples of finding issues with your code

More examples of finding issues with your code

More examples of finding issues with your code

Linting vs formatting

Linting vs formatting

Linting vs formatting

Formatting with Prettier

Formatting with Prettier

Formatting with Prettier

Formatting on save or manually

Formatting on save or manually

Formatting on save or manually

Linting and formatting when code is checked in to source control

Linting and formatting when code is checked in to source control

Linting and formatting when code is checked in to source control

Discussion of using linting and formatting when working in teams

Discussion of using linting and formatting when working in teams

Discussion of using linting and formatting when working in teams

Wrap-up

Wrap-up

Wrap-up

Description

Chapters View all

Introduction

Introduction

Introduction

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Configuring VS Code to run ESLint and Prettier

Running ESLint manually

Running ESLint manually

Running ESLint manually

Examples of finding issues with your code

Examples of finding issues with your code

Examples of finding issues with your code

Chapters

Chapters