Как в visual studio code посмотреть результат кода
Недавно мы беседовали с Анной Леоновой о её пути в программировании. Аня пишет код в редакторе Visual Studio Code и сегодня поделится своими настройками. Вы узнаете, как установить программу и подготовить её для комфортной работы.
Статья для тех, кто только знакомится с программированием и ищет мощный бесплатный редактор — такой, чтобы один раз установить и много лет не менять.
Что за Visual Studio Code?
Это популярная бесплатная программа для разработчиков, которая помогает писать код. Например:
- Знает синтаксис разных языков программирования и помогает вам не ошибиться в точке с запятой или скобочке.
- Сама подставляет некоторые распространённые фрагменты кода.
- Помнит названия ваших переменных и подсказывает их, чтобы не было ошибок.
- Умеет загружать ваш код на Гит.
- Помогает отлаживать код.
- Поддерживает плагины, которые превращают её в мегакомбайн для разработчика.
VSCode — один из самых популярных редакторов кода, потому что он бесплатный и открытый, его можно сделать каким угодно под свои задачи. Есть и другие: например, Sublime Text или продукты компании JetBrains.
👉 Помните, что не редактор делает ваш код крутым, а ваши собственные знания алгоритмов, типов данных и возможностей языка. Хороший программист напишет хороший код хоть на салфетке, а плохому не поможет даже самый навороченный софт.
Установка
Приветственное окно Visual Studio Code после установки
Перед знакомством с интерфейсом вернитесь на официальный сайт и добавьте в закладки страницу с документацией — Docs. Документацию рекомендуем изучить всю сразу до начала работы с проектом. Если не получится — постепенно в свободное время. Документация — это инструкция к инструменту. Если вы хорошо изучите возможности VS Code, то сможете его полностью настроить и оформить под себя.
❌ Новички часто выбирают редактор методом тыка: скачивают несколько программ, визуально оценивают их интерфейс и начинают работать там, где им кажется удобнее или красивее. Редко бывает так, что программиста устраивает стандартный интерфейс и настройки — новички в этом случае прыгают между разными редакторами, сравнивают их базовые возможности и теряют время.
✅ Выбирайте редактор, который можно как угодно изменять и настраивать. Нравится внешний вид Sublime Text, но не хватает мощи VS Code — нет проблем: находите тему, меняете шрифт, добавляете пару расширений и готово. Чтобы быстро освоить VS Code, изучайте интерфейс по документации.
Настройка
VS Code готов к работе сразу после установки — в него по умолчанию добавлено большинство плагинов для веб-разработки. Можно сразу загрузить проект или начать программировать в новом файле. Нужно только привыкнуть к интерфейсу.
Если вы раньше пользовались другим редактором и не удалили его с компьютера, то VS Code автоматически предложит перенести сохранённые настройки. Для переноса вам достаточно кликнуть на всплывающую подсказку и перезагрузить VS Code — переносятся плагины, расширения и установленные горячие клавиши.
Если у вас ещё не было кодового редактора, то ниже мы рассмотрим несколько базовых настроек, которые помогут персонализировать интерфейс VS Code.
Устанавливаем русский язык. На левой боковой панели нажмите Extensios и в строке поиска напишите Russian Language Pack — это языковой пакет, который адаптирует VS Code под русский язык. Выберите расширения, кликните Install и перезапустите редактор. У вас должен открыться русифицированный интерфейс.
Языковой пакет Russian Language Pack
Если после перезагрузки язык не изменился — на левой боковой панели нажмите значок шестерёнки и выберите раздел Command Palette. Появится строка поиска: напишите Display, выберите команду Configure Display Language и нажмите Enter. Смените язык с английского на русский и повторно перезагрузите редактор.
Приветственное окно Visual Studio Code после установки языкового пакета
Меняем цветовую тему. В левой боковой панели нажмите на значок шестерёнки, перейдите в раздел «Цветовая тема» и выберите тему, встроенную в редактор.
Если ничего не нравится — установите любую внешнюю тему, которую получится найти в интернете. Если тема совместима с VS Code, то после скачивания она сама откроется в редакторе и вам достаточно нажать «Установить». Начать поиск рекомендуем с официального маркетплейса, где собраны тысячи бесплатных тем.
Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста
Добавляем любимый шрифт. В боковой панели нажмите на шестерёнку, выберите раздел «Параметры» → «Текстовый редактор» → «Шрифт». Перед вами будет вкладка Font Family, в которую нужно вписать название выбранного шрифта — если этот шрифт скачан или сохранён в операционной системе, то он сразу отобразится в редакторе. Здесь же можно изменить размер и жирность шрифта.
Меняем стандартный шрифт Visual Studio Code на Courier New
Включаем автосохранение. В боковой панели выберите шестерёнку, перейдите в «Параметры» → «Текстовый редактор» → «Файлы». Вы увидите вкладку Auto Save, в которой нужно указать период сохранения файлов. Мы рекомендуем режим afterDelay с задержкой в одну секунду — так вы будете сразу сохранять всё, что запишете. Если вы выберете режим onFocusChange, то изменения в рабочем файле будут сохраняться каждый раз, когда вы будете открывать другие вкладки редактора. В режиме onWindowChange изменения происходят сразу после того, когда вы сворачиваете VS Code и открываете окна других программ.
Включаем режим автосохранения и делаем так, чтобы файлы сохранялись ежесекундно
Горячие клавиши
Горячие клавиши — это помощник программиста и инструмент для быстрого выполнения рутинных задач. Предположим, нам нужно создать новый HTML-файл и написать его структуру. Без горячих клавиш этот процесс выглядит так:
- Переходим в меню и открываем вкладку «Файл».
- Выбираем команду «Новый файл».
- Возвращаемся в меню и повторно открываем вкладку «Файл».
- Находим команду «Сохранить как».
- Пишем название файла, выбираем место хранение, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
- Вручную прописываем скелет HTML-документа или тратим время, чтобы найти и скопировать структуру из интернета.
Мы превратили простую задачу в многоэтапный процесс, где нужно постоянно отрывать руки от клавиатуры, хвататься за мышку и искать нужные команды в выпадающем списке. Теперь посмотрим, как это же действие можно выполнить с помощью горячих клавиш. Для примера мы используем Mac OS — в других системах горячие клавиши будут немного отличаться, но сути это не меняет:
- Command + N — создаём новый файл.
- Shift + Command + S — включаем команду «Сохранить как».
- Пишем название файла, выбираем место хранения, указываем расширение (HTML) и нажимаем кнопку «Сохранить».
- ! + tab — создаём структуру HTML-документа и можем работать.
С горячими клавишами мы сократили количество рутинных действий и быстро выполнили простую задачу — создали HTML-файл и написали структуру. В случае с объёмными проектами горячие клавиши помогают сэкономить часы работы.
В VS Code под горячие клавиши запрограммированы все команды. За один раз их не выучить, да и не нужно — понаблюдайте за своим рабочим процессом и выберите одну команду, которую вы выполняете чаще остальных. Посмотрите, какие горячие клавиши помогают автоматизировать процесс — выпишите эти клавиши и попробуйте применить. Когда привыкнете — выберите другую команду, и так до тех пор, пока не научитесь выполнять большинство действий без мышки и меню.
Для просмотра всех горячих клавиш нажмите в боковой панели на шестерёнку и выберите раздел «Сочетания клавиш». Или воспользуйтесь горячими клавишами и нажмите Command + K + Command + S. Перед вами появится длинный список с названием команд и комбинацией кнопок, которые установлены по умолчанию — любую команду можно перепрограммировать или найти с помощью поисковика.
Что дальше
А дальше прочитайте нашу статью про Vim и подключите его к своему VSCode 🙂
С помощью отладчика Visual Studio можно переходить по коду для проверки состояния приложения и просмотра последовательности выполнения. Для быстрого перехода к коду, который необходимо изучить, можно использовать сочетания клавиш, команды отладки, точки останова и другие функции. Если вы знакомы с командами и сочетаниями клавиш для навигации по отладчику, вы можете быстро и с легкостью находить и устранять проблемы в работе приложений.
Если вы не знакомы с процессом отладки кода, перед выполнением задач в этой статье рекомендуется прочесть документ, посвященный отладке для начинающих, и статью Методы и инструменты отладки.
В режиме приостановки выполнения выполнение приложения приостанавливается, но функции, переменные и объекты при этом остаются в памяти. Когда отладчик находится в режиме приостановки выполнения, можно перемещаться по коду. Существует два стандартных способа быстрого перехода в режим приостановки выполнения:
Начните пошаговое выполнение кода, нажав клавишу F10 или F11. Это позволит быстро найти точку входа приложения. После этого можно продолжать нажимать команды перехода для перемещения по коду.
Например, в редакторе кода в Visual Studio можно использовать команду Выполнить до текущей позиции, чтобы запустить приложение, присоединить отладчик и перейти в режим приостановки выполнения, а затем нажать клавишу F11 для перехода по коду:
В режиме приостановки выполнения можно переходить по коду, используя различные команды. Можно выполнять поиск ошибок и нарушений целостности данных, проверяя значения переменных. Для некоторых типов проектов можно также вносить корректировки в приложение.
Большинство окон отладчика, таких как Модули и Контрольные значения, доступны только тогда, когда отладчик присоединен к приложению. Некоторые возможности отладчика, такие как просмотр значений переменных в окне локальных переменных или вычисление выражений в окне контрольных значений, доступны только при приостановке отладчика (то есть в режиме приостановки выполнения).
Если во время приостановки выполнения кода не загружены исходные файлы или файлы символов (PDB), отладчик отображает страницу Исходный файл не найден или Символы не найдены, которая поможет найти и загрузить файлы. См. статью Указание файлов символов (.pdb) и файлов с исходным кодом в отладчике Visual Studio. Если вы не можете загрузить исходные файлы или файлы символов, можно выполнить отладку инструкций на языке ассемблера в окне Дизассемблирование.
Пошаговое прохождение кода
С помощью команд пошагового выполнения отладчика можно проверять состояние приложения или изучать его последовательность выполнения.
Построчное выполнение кода
Для остановки выполнения на каждом операторе во время отладки используйте команду Отладка > Шаг с заходом или нажмите клавишу F11.
Отладчик осуществляет пошаговое выполнение операторов кода, а не физических строк. Например, предложение if может быть записано в одной строке:
Но при пошаговом выполнении этой строки отладчик рассматривает условие как один шаг, а результат — как другой шаг. В предыдущем примере условие выполняется.
При вызове вложенных функций команда Шаг с заходом позволяет попасть в самую глубокую вложенную функцию. Например, если использовать Шаг с заходом на вызове Func1(Func2()) , отладчик заходит в функцию Func2 .
При выполнении каждой строки кода можно наводить указатель мыши на переменные, чтобы просматривать их значения, или использовать окна Локальные переменные и Контрольные значения для наблюдения за изменением значений. Кроме того, можно визуально отслеживать стек вызовов при выполнении шагов с заходом в функции. (Сведения, касающиеся только Visual Studio Enterprise, см. в статье Сопоставление методов в визуализации стека вызовов при отладке.)
Пошаговое прохождение кода и пропуск некоторых функций
При отладке можно пропустить функцию. Или, возможно, вы знаете, что некоторый код работает, например, хорошо протестированный код библиотеки. Чтобы пропустить код во время пошагового выполнения, можно использовать приведенные ниже команды. Функции по-прежнему выполняются, но отладчик пропускает их.
Команда с клавиатуры | Команда меню «Отладка» | Описание |
---|---|---|
F10 | Шаг с обходом | Если текущая строка содержит вызов функции, команда Шаг с обходом выполняет код, а затем останавливает выполнение в первой строке кода после возврата управления вызываемой функцией. |
SHIFT+F11 | Шаг с выходом | Команда Шаг с выходом возобновляет выполнение кода и приостанавливает выполнение, когда текущая функция возвращает управление. Отладчик пропускает текущую функцию. |
Выполнение до указанного места или функции
Вам может потребоваться выполнить код непосредственно до определенного места или функции, если вы точно знаете, какой код нужно проверить или с какого места следует начать отладку.
Выполнение до точки останова в коде
Чтобы задать простую точку останова в коде, щелкните в левом поле напротив строки кода, в которой нужно приостановить выполнение. Можно также выбрать строку и нажать клавишу F9, выбрать команду Отладка > Переключить точку останова или щелкнуть правой кнопкой мыши и выбрать команду Точка останова > Вставить точку останова. Точка останова отображается как красный кружок в левом поле рядом со строкой кода. Отладчик приостанавливает выполнение непосредственно перед выполнением строки.
Точки останова в Visual Studio предоставляют широкий набор функций, таких как условные точки останова и точки трассировки. Дополнительные сведения см. в статье Использование точек останова.
Выполнение до точки останова функции
Можно дать отладчику команду на выполнение до тех пор, пока не будет достигнута определенная функция. Можно задать функцию по имени или выбрать ее из стека вызовов.
Указание точки останова функции по имени
Выберите команду Отладка > Создать точку останова > Точка останова функции.
В диалоговом окне Новая точка останова функции введите имя функции и выберите ее язык:
Щелкните ОК.
Если функция перегружается или находится в нескольких пространствах имен, нужную функцию можно выбрать в окне Точки останова:
Выбор точки останова функции из стека вызовов
Во время отладки откройте окно Стек вызовов, выбрав пункт Отладка > Окна > Стек вызовов.
В окне Стек вызовов щелкните правой кнопкой мыши имя функции и выберите команду Выполнить до текущей позиции или нажмите клавиши CTRL+F10.
Сведения о визуальном отслеживании стека вызовов см. в статье Сопоставление методов в визуализации стека вызовов при отладке.
Выполнение до расположения курсора
Чтобы выполнить код до позиции курсора, в окне исходного кода или в окне Стек вызовов выберите строку, в которой нужно прервать выполнение, а затем щелкните ее правой кнопкой мыши и выберите команду Выполнить до текущей позиции или нажмите клавиши CTRL+F10. Выбор команды Выполнить до текущей позиции аналогичен заданию временной точки останова.
Принудительное выполнение до расположения курсора
Чтобы выполнить код до позиции курсора, в окне исходного кода или в окне Стек вызовов выберите строку, в которой нужно прервать выполнение, а затем щелкните ее правой кнопкой мыши и выберите элемент Force Run To Cursor (Принудительное выполнение до расположения курсора). Если выбрать параметр Force Run To Cursor (Принудительное выполнение до расположения курсора), все точки останова и первичные исключения будут пропускаться, пока отладчик не достигнет строки кода, где находится курсор.
Выполнение до щелкнутого
Во время приостановки работы отладчика можно навести указатель мыши на оператор в исходном коде или в окне Дизассемблирование и щелкнуть значок с зеленой стрелкой Выполнить до этого места. Если используется команда Выполнение до щелкнутого позволяет не устанавливать временную точку останова.
Команда Выполнение до щелкнутого доступна начиная с версии Visual Studio 2017.
Принудительное выполнение до щелчка
Когда работа отладчика приостановлена, вы можете навести указатель на оператор в исходном коде, удерживая нажатой клавишу SHIFT, и выбрать элемент Принудительное выполнение до текущей позиции (значок с двумя зелеными стрелками). При выборе этого параметра приложение присоединяет отладчик Visual Studio и приостанавливает выполнение в положении курсора. Все точки останова и первичные исключения, обнаруженные во время выполнения, временно отключаются.
Параметр Force Run to Click (Принудительное выполнение до отмеченного щелчком расположения) доступен, начиная с версии Visual Studio 2022.
Приостановка выполнения кода вручную
Чтобы приостановить выполнение в следующей доступной строке кода в выполняющемся приложении, выберите команду Отладка > Прервать все или нажмите клавиши CTRL+ALT+BREAK.
Перемещение указателя для изменения потока выполнения
Когда работа отладчика приостановлена, желтая стрелка в поле исходного кода или в окне Дизассемблированный код отмечает расположение оператора, который должен быть выполнен следующим. Вы можете изменить следующий оператор, который будет выполняться, переместив эту стрелку. Можно пропустить код или вернуться к предыдущей строке. Перемещение указателя полезно при возникновении таких ситуаций, как пропуск кода, содержащего известную ошибку.
Для изменения оператора, который будет выполнен следующим, отладчик должен находиться в режиме приостановки выполнения. В окне исходного кода или окне Дизассемблированный код перетащите желтую стрелку в другую строку или щелкните правой кнопкой мыши строку, которую нужно выполнить следующей, и выберите команду Задать следующий оператор.
Счетчик программы переходит непосредственно к новому расположению. Инструкции между старой и новой точками не выполняются. Однако при перемещении точки выполнения обратно промежуточные инструкции не отменяются.
Отладка кода, не являющегося пользовательским
По умолчанию отладчик пытается выполнить отладку только кода вашего приложения, так как включена функция Только мой код. Подробнее о том, как эта функция работает с проектами различных типов и на разных языках, а также о том, как настроить ее, см. в статье Только мой код.
Для просмотра кода платформы, кода сторонней библиотеки или системных вызовов во время отладки можно отключить функцию "Только мой код". В меню Сервис (или Отладка) выберите пункты Параметры > Отладка и снимите флажок Включить только мой код. Когда функция "Только мой код" отключена, в окнах отладчика отображается код, не являющийся пользовательским, и отладчик может выполнять его по шагам.
Режим "Только мой код" не поддерживается для проектов устройств.
Отладка системного кода
Если вы загрузили отладочные символы для системного кода Майкрософт и отключили режим "Только мой код", можно производить шаг с заходом в системный вызов так же, как в любой другой вызов.
Чтобы загрузить символы для определенного системного компонента, выполните указанные ниже действия.
Во время отладки откройте окно Модули, выбрав пункт Отладка > Окна > Модули или нажав клавиши CTRL+ALT+U.
Определить, для каких модулей символы загружены, можно по значению в столбце Состояние символов в окне Модули. Щелкните правой кнопкой мыши модуль, для которого требуется загрузить символы, и выберите команду Загрузить символы.
Шаг с заходом в свойства и операторы в управляемом коде
По умолчанию отладчик обходит свойства и операторы при пошаговом выполнении в управляемом коде. В большинстве случаев это повышает удобство и эффективность отладки. Чтобы отключить пошаговое выполнение свойств и операторов, выберите пункт Отладка > Параметры. На странице Отладка > Общие снимите флажок Обход свойств и операторов (только управляемый код) .
Сочетания клавиш позволяют получать доступ к различным командам и окнам Visual Studio. В этом разделе перечислены сочетания клавиш по умолчанию для команд в профиле обычных параметров, который мог быть выбран при установке Visual Studio. Независимо от выбранного профиля сочетание клавиш для той или иной команды можно определить, открыв диалоговое окно Параметры, развернув узел Среда и выбрав элемент Клавиатура. Кроме того, сочетания клавиш можно настраивать, назначая командам другие сочетания клавиш.
Список распространенных сочетаний клавиш и другие сведения о средствах повышения производительности см. в следующих статьях:
Памятка по быстрым клавишам для печати
Популярные сочетания клавиш в Visual Studio
Все сочетания клавиш в этом разделе применяются глобально, если не указано иное. Глобальный контекст означает, что сочетание применяется в любом окне инструментов в Visual Studio.
Сочетание клавиш для той или иной команды можно определить, открыв диалоговое окно Параметры, развернув узел Среда и выбрав элемент Клавиатура.
Сборка: популярные сочетания клавиш
Отладка: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Прерывание на функции | CTRL+B | Debug.BreakatFunction |
Приостановить все | CTRL+ALT+BREAK | Debug.BreakAll |
Удаление всех точек останова | CTRL+SHIFT+F9 | Debug.DeleteAllBreakpoints |
Исключения | CTRL+ALT+E | Debug.Exceptions |
Быстрая проверка | CTRL+ALT+Q |
Редактирование: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Разрыв строки | ВВОД [текстовый редактор, конструктор отчетов, конструктор Windows Forms] |
или CTRL+ПРОБЕЛ [текстовый редактор, конструктор рабочих процессов]
или CTRL+K, W [конструктор рабочих процессов]
или SHIFT+DELETE [схема последовательностей, схема действий UML, схема слоев]
или CTRL+K, CTRL+L [конструктор рабочих процессов]
или CTRL+K, CTRL+P [конструктор рабочих процессов]
или SHIFT + ALT + BACKSPACE
Файл: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Выход | ALT+F4 | File.Exit |
Создание файла | CTRL+N | File.NewFile |
Новый проект | CTRL+SHIFT+N | File.NewProject |
Новый веб-сайт | SHIFT+ALT+N | File.NewWebSite |
Открывает файл | CTRL+O | File.OpenFile |
Открытие проекта | CTRL+SHIFT+O | File.OpenProject |
Открыть веб-сайт | Shift+Alt+O | File.OpenWebSite |
Переименовать | F2 [Team Explorer] | File.Rename |
Сохранить все | CTRL+SHIFT+S | File.SaveAll |
Сохранить выбранные элементы | CTRL+S | File.SaveSelectedItems |
Просмотр в браузере | CTRL+SHIFT+W | File.ViewinBrowser |
Проект: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Добавить существующий элемент | SHIFT+ALT+A | Project.AddExistingItem |
Добавление нового элемента | CTRL+SHIFT+A | Project.AddNewItem |
Рефакторинг: популярные сочетания клавиш
Команда | Сочетание клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Извлечение метода | CTRL+R, CTRL+M | Refactor.ExtractMethod |
Средства: популярные сочетания клавиш
Команда | Сочетание клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Присоединение к процессу | CTRL+ALT+P | Tools.AttachtoProcess |
Представление: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Окно классов | CTRL+SHIFT+C | View.ClassView |
Изменить метку | F2 | View.EditLabel |
Список ошибок | CTRL+\, CTRL+E |
Окно: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Активировать окно документа | ESC | Window.ActivateDocumentWindow |
Закрыть окно документа | CTRL+F4 | Window.CloseDocumentWindow |
Следующее окно документа | CTRL+F6 | Window.NextDocumentWindow |
Следующая панель навигации окна документа | CTRL+TAB | Window.NextDocumentWindowNav |
Следующая область разделения | F6 | Window.NextSplitPane |
Глобальные сочетания клавиш
Следующие сочетания клавиш являются глобальными. Это означает, что их можно использовать в любом окне Visual Studio, которое находится в фокусе.
Анализ: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти назад | SHIFT+ALT+3 | Analyze.NavigateBackward |
Перейти вперед | SHIFT+ALT+4 | Analyze.NavigateForward |
Архитектура: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Создать схему | CTRL+\, CTRL+N | Architecture.NewDiagram |
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Повторить операцию скрипта мобильной службы | CTRL+NUM *, CTRL+R | WindowsAzure.RetryMobileServiceScriptOperation |
Показать сведения об ошибке скрипта мобильной службы | CTRL+NUM *, CTRL+D | WindowsAzure.ShowMobileServiceScriptErrorDetails |
Сборка: глобальные сочетания клавиш
Контекстные меню представления классов: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Свойства | ALT+ВВОД | ClassViewContextMenus.ClassViewMultiselectProjectreferencesItems.Properties |
Отладка: глобальные сочетания клавиш
Контекстные меню отладчика: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Удалить | ALT+F9, D | DebuggerContextMenus.BreakpointsWindow.Delete |
Перейти к дизассемблированию | ALT+F9, A | DebuggerContextMenus.BreakpointsWindow.GoToDisassembly |
Перейти к исходному коду | ALT+F9, S | DebuggerContextMenus.BreakpointsWindow.GoToSourceCode |
Центр диагностики: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Остановка сбора | CTRL+ALT+F2 | DiagnosticsHub.StopCollection |
Редактирование: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Копировать | CTRL+C |
CTRL+SHIFT+Z
Контекстные меню редактора: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Условия точки останова | ALT+F9, C | EditorContextMenus.CodeWindow.Breakpoint.BreakpointConditions |
Метки изменения точки останова | ALT+F9, L | EditorContextMenus.CodeWindow.Breakpoint.BreakpointEditlabels |
Вставка временной точки останова | SHIFT+ALT+F9, T | EditorContextMenus.CodeWindow.Breakpoint.InsertTemporaryBreakpoint |
Показать элемент | CTRL+` | EditorContextMenus.CodeWindow.CodeMap.ShowItem |
Execute | CTRL+ALT+F5 | EditorContextMenus.CodeWindow.Execute |
Перейти к представлению | CTRL+M, CTRL+G | EditorContextMenus.CodeWindow.GoToView |
Переключить файл заголовков кода | CTRL+K, CTRL+O (латинская буква O) | EditorContextMenus.CodeWindow.ToggleHeaderCodeFile |
Просмотр иерархии вызовов | CTRL+K, CTRL+T |
Файл: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Выход | ALT+F4 | File.Exit |
Создание файла | CTRL+N | File.NewFile |
Новый проект | CTRL+SHIFT+N | File.NewProject |
Новый веб-сайт | SHIFT+ALT+N | File.NewWebSite |
Открывает файл | CTRL+O (латинская буква O) | File.OpenFile |
Открытие проекта | CTRL+SHIFT+O (латинская буква O) | File.OpenProject |
Открыть веб-сайт | SHIFT+ALT+O (латинская буква O) | File.OpenWebSite |
Печать | CTRL+P | File.Print |
Сохранить все | CTRL+SHIFT+S | File.SaveAll |
Сохранить выбранные элементы | CTRL+S | File.SaveSelectedItems |
Просмотр в браузере | CTRL+SHIFT+W | File.ViewinBrowser |
Справка: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Добавить и удалить содержимое справки | CTRL+ALT+F1 | Help.AddandRemoveHelpContent |
Справка F1 | F1 | Help.F1Help |
Посмотреть справку | CTRL+F1 | Help.ViewHelp |
Справка окна | SHIFT+F1 | Help.WindowHelp |
Нагрузочный тест: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Перейти в область счетчиков | CTRL+R, Q | LoadTest.JumpToCounterPane |
Другие контекстные меню: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Добавить новую диаграмму | Вставить | OtherContextMenus.MicrosoftDataEntityDesignContext.AddNewDiagram |
Проект: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Добавить существующий элемент | SHIFT+ALT+A | Project.AddExistingItem |
Добавление нового элемента | CTRL+SHIFT+A | Project.AddNewItem |
Мастер классов | CTRL+SHIFT+X | Project.ClassWizard |
Переопределение | CTRL+ALT+INS | Project.Override |
Предварительный просмотр изменений | ALT+; затем ALT+C | Project.Previewchanges |
Опубликовать выбранные файлы | ALT+; затем ALT+P | Project.Publishselectedfiles |
Заменить выбранные файлы с сервера | ALT+; затем ALT+R | Project.Replaceselectedfilesfromserver |
Контекстные меню проекта и решения: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Переместить вниз | ALT+СТРЕЛКА ВНИЗ | ProjectandSolutionContextMenus.Item.MoveDown |
Переместить вверх | ALT+СТРЕЛКА ВВЕРХ | ProjectandSolutionContextMenus.Item.MoveUp |
Рефакторинг: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Инкапсуляция поля | CTRL+R, CTRL+E | Refactor.EncapsulateField |
Извлечение интерфейса | CTRL+R, CTRL+I | Refactor.ExtractInterface |
Извлечение метода | CTRL+R, CTRL+M | Refactor.ExtractMethod |
Удалить параметры | CTRL+R, CTRL+V | Refactor.RemoveParameters |
Переименовать | CTRL+R, CTRL+R | Refactor.Rename |
Упорядочить параметры | CTRL+R, CTRL+O (латинская буква O) | Refactor.ReorderParameters |
Обозреватель решений: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Открыть фильтр файлов | CTRL+[ , O (латинская буква O) |
Команда: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти к веткам Git | CTRL+0 (ноль), CTRL+N |
Контекстные меню Team Foundation: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти к сборкам | CTRL+0 (ноль), CTRL+B |
Тестирование: глобальные сочетания клавиш
Обозреватель тестов: глобальные сочетания клавиш
Средства: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Присоединение к процессу | CTRL+ALT+P | Tools.AttachtoProcess |
Диспетчер фрагментов кода | CTRL+K, CTRL+B | Tools.CodeSnippetsManager |
Принудительная сборка мусора | CTRL+SHIFT+ALT+F12, CTRL+SHIFT+ALT+F12 | Tools.ForceGC |
Представление: глобальные сочетания клавиш
Окно: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Активировать окно документа | ESC | Window.ActivateDocumentWindow |
Добавить вкладку в выделенный фрагмент | CTRL+SHIFT+ALT+ПРОБЕЛ | Window.AddTabtoSelection |
Закрыть окно документа | CTRL+F4 | Window.CloseDocumentWindow |
Закрыть окно инструментов | SHIFT+ESC | Window.CloseToolWindow |
Не закрывать вкладку | CTRL+ALT+HOME | Window.KeepTabOpen |
Перейти к панели навигации | CTRL+F2 | Window.MovetoNavigationBar |
Следующее окно документа | CTRL+F6 | Window.NextDocumentWindow |
Следующая панель навигации окна документа | CTRL+TAB | Window.NextDocumentWindowNav |
Следующая область | ALT+F6 | Window.NextPane |
Следующая область разделения | F6 | Window.NextSplitPane |
Следующая вкладка | CTRL+ALT+PGDN |
Сочетания клавиш, зависящие от контекста
Эти сочетания клавиш зависят от контекста. Это означает, что вы можете использовать их с меню и элементами в Visual Studio, которые относятся к типу проекта, языку программирования или платформе.
Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?
Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.
Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.
Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.
Visual Studio Code
Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.
VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.
Вот самые интересные возможности VS Code.
Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:
Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.
Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.
Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках
Найденные одинаковые слова и команды можно тут же заменить на другие
Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.
WebStorm
Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.
Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:
Встроенная система задач. Полезно, когда в работе много проектов и нужно по каждому помнить, что ты хотел в нём сделать. Здесь это реализовано сразу и доступно для любого файла:
Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:
Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:
Sublime Text 3
Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.
Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.
Пример разметки HTML-кода в Sublime Text
Вот что ещё умеет программа сразу после установки:
- показывать разными цветами команды и переменные в популярных языках программирования;
- автоматически завершать команды;
- выделять сразу все одинаковые слова;
- сворачивать код для удобства чтения;
- использовать любые горячие клавиши, какие только понадобятся;
- разделять рабочую область на несколько окон, в каждой из которых можно редактировать свой код.
Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.
Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода
JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet
SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.
Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.
Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.
После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.
В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.
Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.
Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.
Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Как можно увидеть результат выполнения метода `Console.Write("Hello Word")` в Visual Studio Code?
В стандартных средствах этого я не нашел , может есть какие-то плагины ?
Как просмотреть мой HTML-код в браузере с помощью Visual Studio Code?
Как просмотреть мой HTML-код в браузере с новым кодом Microsoft Visual Studio?
с Notepad++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с кодом Visual Studio?
использовать ctrl + shift + p (или F1 ), чтобы открыть палитру команд.
тип Настройка Task Runner. Выбрав его откроется элемент задач.json. Удалите отображаемый скрипт и замените его следующим:
Не забудьте изменить раздел" args " задач.json-файл с именем вашего файла. Это всегда будет открывать этот конкретный файл, когда вы нажмете F5.
вы также можете установить это, чтобы открыть любой файл, который вы открыли в то время с помощью ["$ "] как значение для "args". Обратите внимание, что $ выходит за пределы <. >, Так что [""] is неправильный.
вернитесь к своему html-файлу (в этом примере это "текст.html"), и нажмите ctrl + shift + b для просмотра страницы в веб-браузере.
@InvisibleDev-чтобы получить эту работу на mac пытается использовать это:
Если у вас уже открыт chrome, он запустит ваш html-файл на новой вкладке.
открыть командную строку (cmd) и введите
npm install —save-dev gulp-webserver
введите Ctrl + Shift+P в VS код и тип Настройка Task Runner. Выбрать ее и нажмите enter. Это откроет задачи.файл JSON для вас. Удалить все из него конец введите только следующий код
- в корневой каталог вашего проекта добавьте gulpfile.JS и введите следующий код:
- теперь в VS код введите Ctrl + Shift+P и введите "выполнить задачу" , когда вы введете его, вы увидите свою задачу "webserver" выбран и нажмите enter.
- запуск одним щелчком мыши из строки состояния
- Live Reload
- поддержка приложения отладки Chrome
теперь вы можете установить расширение Просмотр В Браузере. Я тестировал его на windows с chrome, и он работает.
версия vscode: 1.10.2
в Linux, вы можете использовать xdg-open команда для открытия файла в браузере по умолчанию:
вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:
tasks.json
keybindings.json :
если вы просто на Mac это tasks.json file:
. это все, что вам нужно, чтобы открыть текущий файл в Safari, предполагая, что его расширение ".формат HTML."
создать tasks.json как описано выше, и запустите его с ⌘ + shift + b .
если вы хотите, чтобы он открылся в Chrome, то:
это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.
открытие файлов в браузере Opera (на 64 битах Windows). Просто добавьте эти строки:
обратите внимание на формат пути на "команды": линии. Не используйте "C:\path_to_exe\runme.формат exe".
чтобы запустить эту задачу, откройте html-файл, который вы хотите просмотреть, нажмите F1, введите task opera и нажмите enter
мой скрипт бегуна выглядит так:
и это просто открыть мой проводник, когда я нажимаю ctrl shift b в моем индексе.html файл
вот как вы можете запустить его в нескольких браузерах для Windows
обратите внимание, что я ничего не набирал в args для edge, потому что Edge-это мой браузер по умолчанию, просто дал ему имя файла.
EDIT: также вам не нужно-инкогнито и -private-window. it ‘ это только мне нравится, чтобы посмотреть его в частном окне
- использовать команда + shift + p чтобы открыть палитру команд.
введите Configure Task Runner, в первый раз, когда вы это сделаете, VS Code даст вам меню прокрутки вниз, если он выберет "другое."Если вы делали это раньше, VS Code просто отправит вас прямо в задачи.формат JSON.
один раз в задачах.файл json. Удалите отображаемый скрипт и замените его следующим:
- вернитесь к html-файлу и нажмите команда + Shift + b для просмотра страницы в Chrome.
один клик решение просто установить открыть в браузере расширения из Visual Studio marketplace.
Ctrl + F1 откроет браузер по умолчанию. кроме того, вы можете нажать Ctrl + shift + P, чтобы открыть командное окно и выбрать "просмотр в браузере". Html код должен быть сохранен в файл (несохраненный код в редакторе — без расширения, не работает)
недавно наткнулся на эту функцию в одном из учебников кода visual studio в www.lynda.com
нажмите Ctrl + K, а затем M, он откроет "выберите режим языка" (или нажмите на правый нижний угол, который говорит HTML перед этим смайликом), введите markdown и нажмите enter
Теперь нажмите Ctrl + K, а затем V, он откроет ваш html в соседней вкладке.
Tadaaa .
теперь команды emmet не работали в этом режим в моем html-файле, поэтому я вернулся в исходное состояние (Примечание — html-тег tellisense работал отлично )
чтобы перейти в исходное состояние-нажмите Ctrl + K, затем M, выберите автоопределение. команды Эммета начали работать. Если вы довольны только HTML viewer, то вам не нужно возвращаться в исходное состояние.
интересно, почему vscode не имеет опции просмотра html по умолчанию, когда он может отображать html-файл в markdown режим.
в любом случае это круто. Счастливый vscoding 🙂
вы не можете. Visual Studio не предназначалась для веб-дизайна или разработки. Вы должны закодировать некоторые строки, чтобы заставить его работать.
Как писать код и сразу видеть результат
Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?
Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.
Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.
Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.
Visual Studio Code
Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.
VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.
Вот самые интересные возможности VS Code.
Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:
Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.
Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.
Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках
Найденные одинаковые слова и команды можно тут же заменить на другие
Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.
WebStorm
Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.
Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:
Встроенная система задач. Полезно, когда в работе много проектов и нужно по каждому помнить, что ты хотел в нём сделать. Здесь это реализовано сразу и доступно для любого файла:
Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:
Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:
Sublime Text 3
Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.
Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.
Пример разметки HTML-кода в Sublime Text
Вот что ещё умеет программа сразу после установки:
- показывать разными цветами команды и переменные в популярных языках программирования;
- автоматически завершать команды;
- выделять сразу все одинаковые слова;
- сворачивать код для удобства чтения;
- использовать любые горячие клавиши, какие только понадобятся;
- разделять рабочую область на несколько окон, в каждой из которых можно редактировать свой код.
Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.
Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода
JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet
SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.
Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.
Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.
После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.
В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.
Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.
Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.
Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.
Читайте также: