Visual studio code текст по ширине экрана
The Visual Studio editor provides many features that make it easier for you to write and manage your code and text. You can expand and collapse different blocks of code by using outlining. You can learn more about the code by using IntelliSense, the Object Browser, and the Call Hierarchy. You can find code by using features such as Go To, Go To Definition, and Find All References. You can insert blocks of code with code snippets, and you can generate code by using features such as Generate From Usage. If you have never used the Visual Studio editor before, see Learn to use the code editor.
This topic applies to Visual Studio on Windows. For Visual Studio for Mac, see Source editor (Visual Studio for Mac).
You can view your code in a number of different ways. By default, Solution Explorer shows your code organized by files. You can click on the Class View tab at the bottom of the window to view your code organized by classes.
You can search and replace text in single or multiple files. For more information, see Find and replace text. You can use regular expressions to find and replace text. For more information, see Use regular expressions in Visual Studio.
The different Visual Studio languages offer different sets of features, and in some cases the features behave differently in different languages. Many of these differences are specified in the descriptions of the features, but for more information you can see the sections on specific Visual Studio languages.
Editor features
Advanced editing features
You can find a number of advanced features on the Edit > Advanced menu on the toolbar. Not all of these features are available for all types of code files.
Feature | Description |
---|---|
Format Document | Sets the proper indentation of lines of code and moves curly braces to separate lines in the document. |
Format Selection | Sets the proper indentation of lines of code and moves curly braces to separate lines in the selection. |
Tabify Selected Lines | Changes leading spaces to tabs where appropriate. |
Untabify Selected Lines | Changes leading tabs to spaces. If you want to convert all the spaces in your file to tabs (or all the tabs to spaces), you can use the Edit.ConvertSpacesToTabs and Edit.ConvertTabsToSpaces commands. These commands do not appear in Visual Studio menus, but you can call them from the Quick Access window or the command window. |
Make Uppercase | Changes all characters in the selection to uppercase, or if there is no selection, changes the character at the insertion point to uppercase. Shortcut: Ctrl+Shift+U. |
Make Lowercase | Changes all characters in the selection to lowercase, or if there is no selection, changes the character at the insertion point to lowercase. Shortcut: Ctrl+U. |
Move selected Lines Up | Moves the selected line up one line. Shortcut: Alt+Up Arrow. |
Move Selected Lines Down | Moves the selected line down one line. Shortcut: Alt+Down Arrow. |
Delete Horizontal White Space | Deletes tabs or spaces at the end of the current line. Shortcut: Ctrl+K, Ctrl+\ |
View White Space | Displays spaces as raised dots, and tabs as arrows. The end of a file is displayed as a rectangular glyph. If Tools > Options > Text Editor > All Languages > Word Wrap > Show visible glyphs for word wrap is selected, that glyph is also displayed. |
Word Wrap | Causes all the lines in a document to be visible in the code window. You can turn word wrap off and on in the Text Editor All Languages settings (Tools > Options > Text Editor > All Languages). |
Comment Selection | Adds comment characters to the selection or the current line. Shortcut: Ctrl+K, Ctrl+C |
Uncomment Selection | Removes comment characters from the selection or the current line. Shortcut: Ctrl+K, Ctrl+U |
Increase Line Indent | Adds a tab (or the equivalent spaces) to the selected lines or the current line. |
Decrease Line Indent | Removes a tab (or the equivalent spaces) from the selected lines or the current line. |
Select Tag | In a document that contains tags (for example, XML or HTML), selects the tag. |
Select Tag Content | In a document that contains tags (for example, XML or HTML), selects the content. |
Navigate and find code
You can move around in the code editor in several different ways, including navigating backwards and forwards to previous insertion points, viewing the definition of a type or member, and jumping to a specific method using the navigation bar. For more information see Navigate code.
Find references in your code base
To find where particular code elements are referenced throughout your codebase, you can use the Find All References command or press Shift+F12. Also, when you click on a type or member, the reference highlighting feature automatically highlights all references to that type or member. For more information, see Find references in your code.
Generate, fix, or refactor code
There are numerous ways that Visual Studio can help you generate, fix, and refactor code.
You can use code snippets to insert a template such as a switch block or an enum declaration.
You can use Quick Actions to generate code such as classes and properties, or to introduce a local variable. You can also use Quick Actions to improve code, for example to remove unnecessary casts and unused variables, or to add null checks before accessing variables.
You can refactor code to rename a variable, re-order method parameters, or synchronize a type with its filename, to name a few.
Customize the editor
You can share your Visual Studio settings with another developer, have your settings conform to a standard, or return to Visual Studio default settings by using the Import and Export Settings Wizard command on the Tools menu. In the Import and Export Settings Wizard, you can change selected general settings or language and project-specific settings.
To define new hotkeys or redefine existing hotkeys, go to Tools > Options > Environment > Keyboard. For more information about hotkeys, see Default keyboard shortcuts.
VSCode — самый популярный редактор кода среди веб-разработчиков. Вы можете использовать его с нуля, однако со временем его базовых функций станет недостаточно. Рассказываю, как сам докрутил этот редактор под свои потребности.
Статья дорабатывается по вашим замечаниям. Спасибо всем за комментарии.
Вводная часть
История появления редактора
VSCode разрабатывается в Microsoft и унаследовал имя от их тяжеловесного IDE — Visual Studio. Первый релиз был аж в апреле 2015 года. В 2016 году редактор стал доступен для всех желающих.
Особенности
Сделан с помощью Electron.js, то есть под капотом у него HTML + CSS + JS
Поддерживает разработку на разных языках: Java, JavaScript, Go, Node.js, Python, C++ и так далее (см. Расширения)
Имеет ОГРОМНОЕ количество настроек, которыми удобно управлять
Многие фичи скрыты из графического интерфейса, но их можно найти через Command Pallete ( cmd/win + shift + P )
Возможности редактора могут быть дополнены с помощью расширений
Удобный и быстрый магазин расширений внутри редактора и через браузер
Собирает данные и шлёт их в Microsoft, но телеметрию можно отключить в настройках
В среднем скорость отклика медленнее, чем у нативных конкурентов
Преимущества
Быстрее, чем типичное приложение на Electron.js
Плотная интеграция с Github
Плотная интеграция с TypeScript
Низкий порог входа
Можно настроить под себя почти что угодно
Настройки
Настройки — это моя любимая часть VSCode. За пять лет я потратил на них десятки часов (если не сотни).
JSON vs UI
У настроек есть два режима просмотра/управления:
Стандартный просмотр через UI с категориями и поиском
Использую для поиска по настройкам или для просмотра возможных значений
Просмотр большого JSON со всеми изменёнными настройками
Использую во всех остальных случаях, к тому же чаще
Забавно, что шоткат для настроек cmd/win + , по умолчанию вызывает именно JSON-режим. А для GUI-режима нужно нажать более длинный cmd/win + shift + , . Наверное, это исторически так сложилось 🤷♂️
Синхронизация настроек
VSCode сам научился синхронизировать настройки между устройствами. До этого требовалось расширение и пара гистов на Гитхабе.
Кажется, тут нечего добавить, потому что синхронизация легко настраивается через меню «Шестерёнка» (требует логина через Github).
Сортировка и поиск настроек через JSON
В режиме JSON мы видим только те параметры, которые отличаются от настроек по умолчанию. Если вы открыли VSCode впервые, то в файле будет только <> . Со временем, по мере подстройки редактора, он наполнится — в моём сейчас 370 строк.
Чтобы было удобнее ориентироваться, я использую автосортировку по алфавиту (с помощью расширения JSON-sort) и пользуюсь поиском по ключевым словам в файле.
VSCode сам линтит этот JSON: предупреждает об ошибках, подсказывает имена настроек и делает тусклыми неиспользуемые опции.
Полезные настройки
Некоторые из моих любимых! Их можно просто скопировать себе в JSON с настройками.
Доводка редактора
Улучшение JS
Эти настройки позволяют делать статическую типизацию в JS без использования TypeScript.
Прочее
Расширения
Я часто ищу новые расширения и отключаю бесполезные. Для того чтобы накопить несколько десятков любимых расширений, мне потребовалось 5 лет. Ищи favorite list ниже ;)
Featured
VSCode помимо хорошего поиска и удобных категорий имеет тэг с отборными расширениями, которые меняются примерно раз в месяц. Рекомендую иногда в него заглядывать, чтобы находить свежие и интересные штуки.
Любимые расширения
Улучшает подсветку ошибок, ворнингов и прочей информации
Быстрая замена регистра и стиля написания выделенного текста: CONSTANT_CASE, snake_case, etc.
Material Icon Theme
Иконки в стиле Material Design, но главное что их очень много и они гармоничнее прочих. По-моему лучшие.
Лёгкий способ переключать проекты в редакторе
Quit Control for VSCode
Для тех, кто периодически всё проклинает из-за случайно нажатого CMD + Q . Спасительная штука.
GitLens — Git supercharged
Git GUI на стероидах прямо в VSCode. Тот случай, когда 80% проблем легче решить из графического интерфейса, чем в терминале.
New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review
Единый интерфейс для отправки, ревью и приёма ваших PR и MR в VSCode с удобным интерфейсом. Можно даже не заходить на сайт бесплатного и устаревшего self-hosted GitLab вашей конторы вашего хостинга для Гита
Markdown All in One
Всё, что вам надо для написания Markdown (keyboard shortcuts, table of contents, auto preview and more)
Open in browser
Автокомплит для путей до файлов
Prettier - Code formatter
Автоматическое форматирование кода почти без настроек
JS/TS интерактивная среда исполнения кода прямо в VSCode
Как Postman, но в виде файлов в вашем проекте
Нейросетевые подсказки кода экономящие вам время
Turbo Console Log
console.log по шоткату с генерацией подписей. Всё.
Штука, которая считает время написания кода, а не просто время открытого тикета или редактора. Есть подробная статистика.
Auto Rename Tag
Автоматическое переименование парных тэгов в HTML и JSX
Улучшенное комментирование кода с помощью аннотаций с предупреждениями, информацией, TODO и многим другим!
Интегрирует ESLint JavaScript в VS Code.
Продвинутая подсветка для новейшего стандарта JS
Указание цвета с колорпикером рядом с цветовыми кодами.
Draw.io внутри VSCode
EditorConfig for VS Code
Визуализация ветвления в Git
GitHub Pull Requests and Issues
Работа с Github PRs и Issues внутри VSCode
Управление репозиториями на Github через VSCode
HTML CSS Support
Продвинутые возможности по авто-рефакторингу кода (как у IntelliJ IDEA)
IntelliSense for CSS class names in HTML
Автодополнение названий стилевых классов в HTML
Возможность поиска, проверки и подтверждения задач из LeetCode не выходя из VS Code
Совместное редактирование кода в реальном времени
Поддержка NPM для VS Code
Sort JSON objects
Умная сортировка JSON
Space Block Jumper
Для быстрого перемещения по блокам кода
🚀 Если у вас есть свои хитрости и находки, поделитесь в комментариях. Обсудим вместе!
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.
Быстро добавить комментарий
Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.
Перейти к строке под номером
Windows — Ctrl + G
Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.
Поменять строку местами с соседними
Alt и стрелки меняют текущую строку местами с соседними.
Дублировать строку
Windows — Shift + Alt + ↓ / ↑
Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.
Перейти к парной скобке
Windows — Ctrl + Shift + \
Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.
Переименовать переменную
Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.
Отформатировать документ
Windows — Shift + Alt + F
VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.
Перейти к объявлению переменной
Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.
Включить/выключить перенос слов
Windows — Alt + Z
Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.
Включить дзен-режим
Windows — Ctrl + K Z
Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.
Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.
Редактор поможет в работе веб-разработчикам и верстальщикам всех уровней. С одной стороны он подходит новичкам, потому что его интерфейс интуитивно прост и понятен. С другой стороны в VS Code встроены много возможностей, которые интересны опытным разработчикам.
Полезные материалы
Первый запуск
При запуске редактора в первый раз открывается стартовая страница, на которой описаны все возможности редактора. Все ссылки интерактивные и открывают нужную часть интерфейса или страницу в браузере.
Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно установить различные сочетания клавиш и цветовые схемы.
Посмотрим интерфейс редактора на примере одного из проектов.
Основную часть экрана занимает окно с текстовым содержимым файла. В левой части экрана находятся вкладки активного меню, в котором находятся главные функции редактора. Вкладка проводника открывается по умолчанию при запуске программы. В неё выводятся список открытых файлов и каталог открытой папки.
Поиск
Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких местах оно находится. При желании можно поменять значение через поле замены.
VS Code из коробки поддерживает работу с системой контроля версий Git. Можно выполнить базовые операции и посмотреть, как изменились файлы с момента последнего коммита.
Настройка Git в Visual Studio Code подробна описана в официальной документации.
Отладчик
Расширения
Последний пункт активного меню позволяет устанавливать расширения. В VS Code есть расширения для большинства языков программирования. Верстальщики тоже не обделены — например, мы собрали подборку из 9 полезных плагинов VS Code.
Главное меню
File. В пункте File находятся команды, которые отвечают за работу с файлами рабочей папки. Через неё можно сохранять и открывать файлы, выбирать папки и выполнять другие действия.
Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.
Selection. В пункте Selection можно найти команды для выделения нужного участка кода.
View. Открывать различные приложения, встроенные в редактор кода, можно через пункт View. Здесь дублируются пункты активного меню, а ещё здесь можно открыть терминал, настроить элементы интерфейса и другое.
Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.
Debug. Здесь собраны команды для отладки скриптов.
Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.
Help. В этом пункте собраны справочные материалы по работе редактора, его основным функциями и общая информация о программе.
VS Code используется разработчиками в компаниях разного размера, а также очень удобен при обучении на профессиональных курсах в HTML Academy. В нём есть все функции, с помощью которых можно написать, протестировать и успешно защитить выпускной проект.
VS Code — инструмент фронтендера
Пройдите обучение в HTML Academy, чтобы работать с редактором кода и другими инструментами как профессионал.
Редактор Visual Studio предоставляет множество возможностей, облегчающих написание кода и текста, а также управление им. Используя структуру, вы можете разворачивать и сворачивать различные блоки кода. Получить дополнительные сведения о коде можно с помощью технологии IntelliSense, окна Обозреватель объектов и иерархии вызовов. Для поиска в коде можно использовать такие функции, как Перейти, Перейти к определению и Найти все ссылки. Вставлять блоки кода можно с помощью фрагментов кода. Код также можно создавать с помощью функций, таких как Создание в результате использования. Если вы ранее не работали в редакторе Visual Studio, см. статью со сведениями об использовании редактора кода.
Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Редактор исходного кода (Visual Studio для Mac).
Код можно просматривать различными способами. По умолчанию в обозревателе решений код упорядочен по файлам. Чтобы просмотреть код, упорядоченный по классам, можно выбрать вкладку Представление классов в нижней части окна.
Можно выполнять поиск и замену текста в одном или нескольких файлах. Дополнительные сведения см. в статье Поиск и замена текста. Регулярные выражения платформы используются для поиска и замены текста. Дополнительные сведения см. в статье Использование регулярных выражений в Visual Studio.
Разные языки Visual Studio предоставляют разные наборы функций, а в некоторых случаях одни и те же функции ведут себя по-разному в разных языках. Многие из этих отличий указаны в описаниях функций. Дополнительные сведения можно найти в разделах, посвященных конкретным языкам Visual Studio.
Возможности редактора
Дополнительные возможности редактирования
В меню Правка > Дополнительно на панели инструментов есть набор дополнительных функций. Не все они доступны для каждого типа файлов кода.
Функция | Описание |
---|---|
Форматировать документ | Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в документе. |
Форматировать выделенный фрагмент | Установка правильного отступа строк кода и перемещение фигурных скобок для разделения строк в выделенном фрагменте. |
Преобразовать пробелы в знаки табуляции в выделенных строках | Замена начальных пробелов на знаки табуляции там, где это уместно. |
Преобразовать знаки табуляции в пробелы в выделенных строках | Замена начальных знаков табуляции на пробелы. Если требуется преобразовать все пробелы в знаки табуляции в файле (или все знаки табуляции в пробелы), можно использовать команды Edit.ConvertSpacesToTabs и Edit.ConvertTabsToSpaces . Эти команды не включены в меню Visual Studio, но их можно вызывать из окна быстрого доступа или окна командной строки. |
Все прописные | Перевод всех символов в выделенном фрагменте в верхний регистр или, если ничего не выбрано, перевод символа в позиции курсора в верхний регистр. Ярлык. CTRL+SHIFT+U. |
Все строчные | Перевод всех символов в выделенном фрагменте в нижний регистр или, если ничего не выбрано, перевод символа в позиции курсора в нижний регистр. Ярлык. CTRL+U. |
Переместить выбранные строки вверх | Перемещение выбранной строки вверх на одну строку. Ярлык. ALT+СТРЕЛКА ВВЕРХ. |
Переместить выбранные строки вниз | Перемещение выбранной строки вниз на одну строку. Ярлык. ALT+ВНИЗ. |
Удалить пустое пространство по горизонтали | Удаление символов табуляции и пробелов в конце текущей строки. Ярлык. CTRL+K, CTRL+ \ |
Показать пустое пространство | Отображение пробелов в виде приподнятых точек, а символов табуляции — в виде стрелок. Конец файла отображается как прямоугольный глиф. Если с помощью меню выбран вариант Сервис > Параметры > Текстовый редактор > Все языки > Перенос по словам > Показывать графические метки в местах переноса слов, этот глиф также будет отображаться. |
Перенос по словам | В этом режиме все строки документа отображаются полностью в окне кода. Перенос по словам можно включить или отключить в разделе Все языки для текстового редактора (Сервис > Параметры > Текстовый редактор > Все языки). |
Закомментировать выделенный фрагмент | Добавление символов комментария к выбранному фрагменту или текущей строке. Ярлык. CTRL+K, CTRL+C |
Раскомментировать выделенный фрагмент | Удаление символов комментария из выбранного фрагмента или текущей строки. Ярлык. CTRL+K, CTRL+U |
Увеличить отступ строки | Добавление символа табуляции (или эквивалентных пробелов) к выбранным строкам или текущей строке. |
Уменьшить отступ строки | Удаление символа табуляции (или эквивалентных пробелов) из выбранных строк или текущей строки. |
Выбрать тег | Выбор тега в документе, содержащем теги (например, XML или HTML). |
Выделить содержимое тега | Выбор содержимого в документе, содержащем теги (например, XML или HTML). |
Перемещение по коду и поиск
Перемещаться по редактору кода можно несколькими способами, включая переход назад и вперед к точкам вставки, просмотр определения типа или члена и переход к определенному методу с помощью панели навигации. Дополнительные сведения см. в статье Навигация по коду.
Поиск ссылок в базе коде
Чтобы найти, где именно в базе кода используются ссылки на элементы кода, можно использовать команду Найти все ссылки или нажать SHIFT+F12. Кроме того, когда вы щелкаете тип или член, функция выделения ссылок автоматически выделяет все ссылки на него. Дополнительные сведения см. в разделе Поиск ссылок в коде.
Создание, исправление или рефакторинг кода
Visual Studio помогает создавать, исправлять код и выполнять его рефакторинг самыми разными способами.
Вы можете использовать фрагменты кода для вставки шаблона, такого как блок switch или объявление enum.
Вы можете использовать быстрые действия для создания кода, например классов и свойств, или для введения локальной переменной. Кроме того, быстрые действия можно использовать для улучшения кода, например для удаления ненужных приведений и переменных либо для добавления проверок значений NULL перед обращением к переменным.
Вы можете выполнять рефакторинг кода, например чтобы переименовывать переменные, изменять порядок параметров метода или синхронизировать тип с его именем файла.
Настройка редактора
Вы можете использовать свои параметры Visual Studio совместно с другим разработчиком, привести параметры в соответствие со стандартом или вернуться к настройкам, заданным по умолчанию в Visual Studio, с помощью команды Мастер импорта и экспорта параметров в меню Сервис. В мастере импорта и экспорта параметров можно изменить выбранные общие параметры, а также зависящие от языка и проекта параметры.
Чтобы определить новые или переопределить существующие сочетания клавиш, выберите Сервис > Параметры > Среда > Клавиатура. Дополнительные сведения о сочетаниях клавиш см. в статье Сочетания клавиш по умолчанию в Visual Studio.
Параметры редактора для JavaScript см. в статье о параметрах редактора JavaScript.
Читайте также: