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.