Полная настройка Visual Studio Code под JavaScript

Расширенные примеры конфигураций и кода

1. Многопроцессная отладка Node.js и клиентской части

Для одновременной отладки сервера и клиента (например, React + Express) требуется комбинированная конфигурация в launch.json:

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server/index.js",
        "cwd": "${workspaceFolder}/server",
        "skipFiles": ["/**"]
      },
      {
        "type": "chrome",
        "request": "launch",
        "name": "Client",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}/client/src",
        "userDataDir": false
      }
    ],
    "compounds": [
      {
        "name": "Full Stack",
        "configurations": ["Server", "Client"]
      }
    ]
  }

После этого можно запустить оба отладчика одновременно, выбрав в выпадающем списке “Full Stack”.

  Результат: отладчик ловит точки останова как на серверном коде (Node.js), так и в React компонентах (Chrome DevTools).

2. Пользовательские сниппеты (snippets) для JavaScript

Сниппеты ускоряют написание повторяющихся конструкций. Пример создания фрагмента для функционального компонента React с хуками в файле .vscode/javascript.code-snippets:

  {
    "React Function Component": {
      "prefix": "rfc",
      "body": [
        "import React, { useState, useEffect } from 'react';",
        "",
        "const ${1:ComponentName} = () => {",
        "  const [${2:state}, set${2:State}] = useState(${3:initialValue});",
        "  ",
        "  useEffect(() => {",
        "    ${4:// side effect}",
        "  }, [${5}]);",
        "  ",
        "  return (",
        "    
${6}
",
        "  );",
        "};",
        "",
        "export default ${1:ComponentName};",
        ""
      ],
      "description": "React functional component with useState and useEffect"
    }
  }

После сохранения файла в проекте при вводе “rfc” в редакторе появится предложение автодополнения.

3. Настройка линтинга для TypeScript с JavaScript

При смешанном проекте (JS и TS) необходимо расширить конфигурацию ESLint:

  // .eslintrc.json
  {
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier"
    ],
    "overrides": [
      {
        "files": ["*.js", "*.jsx"],
        "rules": {
          "@typescript-eslint/no-var-requires": "off"
        }
      }
    ],
    "env": { "browser": true, "es2021": true, "node": true },
    "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }
  }

Для диагностики проблем добавлены файлы .vscode/settings.json с явным указанием форматера для TypeScript:

  {
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.format.enable": true
  }

4. Удалённая разработка по SSH (Remote SSH)

Расширение Remote SSH (ms-vscode-remote.remote-ssh) позволяет открывать папки на удалённом сервере как локальный проект. Пример настройки файла конфигурации SSH (~/.ssh/config):

  Host dev-server
      HostName 192.168.1.100
      User developer
      Port 22
      IdentityFile ~/.ssh/id_rsa

После подключения через палитру (Remote-SSH: Connect to Host) в VS Code отображаются все расширения и терминал сервера. Удалённые настройки сохраняются отдельно в папке .vscode-server.

  Результат: полноценная разработка JavaScript на удалённом Linux сервере с локальным интерфейсом VS Code.

5. Автоматический запуск тестов при сохранении (Jest)

Для выполнения тестов Jest при каждом сохранении используется расширение Jest Runner или настройка tasks.json с watcher:

  // .vscode/tasks.json (часть)
  {
    "label": "Run Jest in watch mode",
    "type": "npm",
    "script": "test:watch",
    "group": "test",
    "presentation": {
      "reveal": "always",
      "panel": "new"
    },
    "problemMatcher": ["$jest"]
  }

В package.json добавляется скрипт:

  "scripts": {
    "test:watch": "jest --watchAll"
  }

После запуска задачи тесты перезапускаются при каждом изменении.

  Пример вывода в терминале:
  PASS  src/__tests__/App.test.js
    ✓ renders learn react link (12 ms)
  Test Suites: 1 passed, 1 total
  Tests:       1 passed, 1 total

6. Интеграция с Git: отображение изменений и линтинг перед коммитом

Расширение GitLens (eamodio.gitlens) добавляет аннотации и историю. Однако для автоматического запуска ESLint перед коммитом используется husky и lint-staged. Пример настройки в package.json:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write", "git add"]
  }

В VS Code при коммите через встроенные инструменты Git будет выполняться линтинг и форматирование.