Lesson 13 / 25

Integration with Editor / IDE

Use ESLint and Prettier extensions in your development environment.

Real-time feedback

Editor extensions show ESLint warnings/errors inline as you type, and Prettier can format your file on save—instant feedback without running commands.

VS Code setup

Install extensions and configure VS Code settings for automatic linting and formatting.

# Extensions to install:
# 1. ESLint (Dirk Baeumer)
# 2. Prettier - Code Formatter (Prettier)

# VS Code settings.json:
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.run": "onSave"
}

Output:

VS Code configured for ESLint and Prettier

Workspace settings

Add .vscode/settings.json to your repo root so all team members get the same editor configuration automatically.

Quick check

Quick check: What does formatOnSave do?

  • Formats the file automatically when you save it.
  • Prevents saving if there are linting errors.
  • Uploads the file to the cloud.
Answer

Formats the file automatically when you save it. — 'formatOnSave' is convenient for developers who want Prettier to run without manual commands.