Как настроить Visual Studio Code для работы с JavaScript

Установка необходимых расширений

Начните с установки расширений, чтобы повысить комфорт разработки. Откройте панель расширений (клавиши Ctrl+Shift+X) и найдите ESLint. Установите его, чтобы автоматически выявлять ошибки в коде. Затем добавьте Prettier — Code formatter для автоматического форматирования и повышения читаемости кода. Для работы с Git установите расширение GitLens.

Настройка редактора для эффективной работы

Откройте настройки, нажав Ctrl+,. В поле поиска найдите formatOnSave и активируйте его, чтобы форматировать файлы при сохранении. Убедитесь, что выбран правильный форматтер – в нашем случае Prettier. Для этого откройте файл настроек (settings.json) и добавьте:

{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": ["javascript"],
"files.autoSave": "onFocusChange"
}

Настройка рабочего окружения

Создайте файл jsconfig.json в корне проекта для определения настроек JavaScript. Введите следующее содержание:

{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"jsx": "preserve",
"checkJs": false,
"baseUrl": ".",
"paths": {}
},
"exclude": ["node_modules"]
}

Это упростит навигацию по проекту и повысит стабильность работы редактора с большим количеством файлов.

Настройка отладки

Для отладки JavaScript-кода установите расширение Debugger for Chrome. Перейдите в раздел «Отладка» (иконка жучка), нажмите Создать конфигурацию и выбрать «Chrome». В файле launch.json добавьте следующую конфигурацию:

{
"version": "0.2.0",
"configurations": [
{
"name": "Запуск Chrome с текущим файлом",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}

Запускайте локальный сервер с помощью Live Server или другого сервиса и используйте выбранную конфигурацию для отладки.

Итог

Следуя этим рекомендациям, вы настроите Visual Studio Code так, чтобы максимально комфортно писать и проверять JavaScript-код. Регулярное использование расширений, автоматическое форматирование и настройка отладки ускорят работу и снизят количество ошибок.