Краткое руководство по VS Code

Node.js внешний интерфейс JavaScript Visual Studio Code
Краткое руководство по VS Code

предисловие

В последнее время, чтобы поддерживать лучший стандарт разработки интерфейса, команда призывает всех использовать один и тот же редактор.Мы выбрали vscode, потому что большая часть команды использует его, и это очень круто использовать. Для того, чтобы студенты, которые не используют vscode, быстро поняли его, я собрал некоторую информацию в Интернете и написал эту вводную статью на основе собственного повседневного опыта.

Введение в использование vscode

Visual Studio Code (сокращенно VS Code) — это бесплатный кроссплатформенный редактор текста (кода) с открытым исходным кодом, разработанный Microsoft.

Мы узнаем о vscode из следующих частей

  • базовая конфигурация
  • интегрированный
  • контроль версий
  • отладка кода

1 Базовая конфигурация

  • Скачать прямо с официального сайтаcode.visualstudio.com/
  • Настройки, как показано на рисунке ниже, через настройки мы можем установить базовую конфигурацию vscode, а также сочетания клавиш, пользовательские темы и т. д.

Как показано на рисунке ниже, базовая конфигурация на самом деле представляет собой файл json со своей собственной конфигурацией по умолчанию. Кроме того, каждый раз, когда мы устанавливаем плагин, будет генерироваться новый json. Мы вводим пользовательскую конфигурацию json с правой стороны, вы может переопределить элементы конфигурации по умолчанию

  • Клавиши быстрого доступа, нажмите клавиши быстрого доступа под настройками, чтобы просмотреть и изменить все конфигурации клавиш быстрого доступа.
    ...

2 Интеграция

vscode интегрирует большое количество сторонних плагинов, которые могут значительно повысить эффективность нашей разработки с помощью сторонних плагинов.

Рекомендуемые плагины

  • vuetr плагин форматирования vue
  • vscode-fileheader автоматически сохраняет создателей и модификаторов файлов
  • Auto Close Tag автоматически закрывает HTML-тег
  • Dark Dark — улучшенная тема Cat Brother, модифицированная по сравнению с темной темой по умолчанию.
  • EditorConfig for VS Code — для поддержки спецификации конфигурации .editorconfig.
  • ESLint — используется для поддержки проверки синтаксиса JavaScript в реальном времени.
  • Git History — просмотр git-журнала файлов и сравнение
  • Фрагменты HTML — исправлены некоторые проблемы с HTML Emmet по умолчанию.
  • Material Icon Theme — тема значков для левой панели навигации по файлам.
  • Синхронизация настроек — для синхронизации конфигураций VS Code с личными репозиториями gist.

Для получения дополнительной поддержки плагинов вы можете прочитать эту статью «Мощный код VS» https://juejin.cn/post/6844903624162672648.

Это все, вы можете узнать сами...

3 Контроль версий

vscode интегрируется с git Переключитесь на панель Git, мы можем выполнять команды git напрямую через графический интерфейс, Например, щелкните измененный файл слева, чтобы сравнить версии. в то же время

Для студентов, которые привыкли правильно управлять операциями, вы также можете напрямую выполнить команду git в терминале или ctrl + P, чтобы быстро выбрать команду напрямую.

4 кода отладки

Одной из ключевых особенностей визуального студийного кода является его поддержка отладки. Как и отладка в отладке, VSCode поддерживает отладку кода Nodejs по умолчанию, мы можем установить сторонние плагины для отладки в других языках. Для переднего конца очень удобно выполнять отладку кода Nodejs

Мы можем установить плагины для поддержки отладки на таких языках, как python.

Для получения дополнительной информации обратитесь на официальный сайтcode.visual studio.com/docs/editor…

Файл конфигурации отладки launch.json

Если мы отлаживаем код через vscode по умолчанию, будет сгенерирован конфигурационный файл launch.json, подробности в официальной документации.code.visual studio.com/docs/editor…Здесь мы говорим только о местах, которые мы обычно используем.

элемент конфигурации launch.json

  • Обязательное поле
type：调试器类型。这里是 node(内置的调试器)，如果装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 php
request：请求的类型，目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试，attach 就是附加到已经启动的进程开启 debug 模式并调试，跟上一篇提到的用 node -e "process._debugProcess(PID)" 作用一样
name：下拉菜单显示的名字
  • необязательные поля
program：可执行文件或者调试器要运行的文件 (launch)
args：要传递给调试程序的参数 (launch)
env：环境变量 (launch)
cwd：当前执行目录 (launch)
address：ip 地址 (launch & attach)
port：端口号 (launch & attach)
skipFiles：想要忽略的文件，数组类型 (launch & attach)
processId：进程 PID (attach)

В то же время переменная каталога имеет

${workspaceRoot}：当前打开工程的路径
${file}：当前打开文件的路径
${fileBasename}：当前打开文件的名字，包含后缀名
${fileDirname}：当前打开文件所在的文件夹的路径
${fileExtname}：当前打开文件的后缀名
${cwd}：当前执行目录

Обычно стандартная конфигурация launch.json по умолчанию выглядит следующим образом.

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

Эта конфигурация будет напрямую запускать файл index.js в каталоге нашего проекта. Мы можем автоматически определить файлы, которые мы запускаем и запускаем, на основе приведенной выше информации о конфигурации.

Советы по отладке

  • Условные точки останова

1 Выражение: прерываться, когда выражение оценивается как истинное, как можно судить здесь ctx.body.aaa = '1', при выполнении этого условия точка останова будет

2 хита Также, когда выражение оценивается как истинное для входа в точку останова, поддерживаются операторы , >=, %.

  • skipFiles Набор универсальных шаблонов для файлов, которые следует пропускать при отладке.

Обычно мы входим в каталог node_modules при одноэтапной отладке, но обычно мы хотим отладить только код нашего проекта, поэтому это время можно отфильтровать, настроив skipFiles. Подробная официальная ссылка на документациюcode.visual studio.com/docs/node будет...

  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]
  
  "skipFiles": [
     "<node_internals>/**/*.js"
   ]
  • Автоматический перезапуск

Добавляя конфигурацию, измененный код можно автоматически перезапускать и отлаживать после сохранения, что необходимо использовать совместно с nodemon. Сначала установите нодмон

npm i nodemon -g

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug-app",
            "runtimeExecutable": "nodemon",  要使用的运行时。一个绝对路径或路径上可用的运行时名称。如果省略，则假定为“节点”。
            "program": "${workspaceRoot}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}

Параметр Описание

  • runtimeExecutable: какую команду использовать для выполнения app.js, здесь установлено значение nodemon, по умолчанию — узел
  • перезапуск: установите значение true, отладка будет перезапущена автоматически после сохранения измененного кода.
  • консоль: при нажатии кнопки остановки или изменении кода и автоматическом перезапуске отладки, а nodemon все еще работает, эту проблему можно решить, установив для консоли значение IntegratedTerminal. В этот момент терминал VS Code распечатает журнал nodemon.Вы можете вернуться к первому терминалу из раскрывающегося меню в правой части терминала, а затем запустить curl localhost:3000 для отладки

Суммировать

Вышеупомянутое почти место, где мы можем обычно использовать vscode, Лично я считаю, что хорошие вещи в процессе использования в основном заключаются в двух моментах: 1. Использование сторонних плагинов может значительно обогатить наши функции использования 2. Функция отладки действительно удобна в использовании. vscode — очень мощный инструмент IDE Приведенный выше список — это только вершина айсберга. Если вам интересно, вы можете прочитать документацию напрямуюcode.visualstudio.com/docsВы можете обнаружить более интересные вещи.

Эта статья в основном относится (но не ограничивается) к следующим статьям, спасибо за их вклад!

официальная документация vscode

Неполное руководство по интерфейсной отладке в коде Visual Studio

Отладка настройки производительности Node.js (2) — Visual Studio Code

Используйте vscode для отладки скомпилированного кода js

В конце поставим рекламу, команда набирает мидл и сениор фронтенд, координирует Shanghai Zhongan Insurance При необходимости вы можете отправить свое резюме наfanyang@zhongan.com

над

Категории