Как приблизить в visual studio code

Обновлено: 07.07.2024

Недавно мы беседовали с Анной Леоновой о её пути в программировании. Аня пишет код в редакторе 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 🙂

Как сбросить "масштаб" в VS 2010/2012/2013/2015/2017 обратно в нормальное состояние?

CTRL+SCROLL WHEEL позволяет увеличить / уменьшить масштаб с помощью Visual Studio 2010/2012/2013/2015/2017, но я хотел бы вернуться к первоначальному 100%.

для этого в левом нижнем углу окна редактора есть окно выбора-выберите 100%;)

Я не смог найти комбинацию клавиш для него, хотя увеличение и уменьшение масштаба можно сделать с помощью Ctrl +> и Ctrl + .

обратите внимание, что горизонтальная полоса прокрутки должна быть включена, чтобы увидеть уровень масштабирования.

Инструменты / Параметры / Текстовый Редактор / Все Языки / Полосы Прокрутки

другой опция (Visual Studio 2013/2015) - использовать Ctrl с колесиком мыши (до увеличения, вниз, чтобы уменьшить).

в левом нижнем углу редактора кода есть элемент управления масштабированием. Вы можете выбрать 100% оттуда или ввести его вручную.

вы можете попробовать расширение VSCommands из галереи Visual Studio, Он добавляет несколько новых функций вокруг масштабирования в VS2010

на Visual Studio 2015/2017 (легко пропустить, если использовать темную тему):

по умолчанию сочетание клавиш Ctrl+0, Ctrl+0, но может быть изменено, чтобы быть тем, что вам нравится.

перейти к инструментам - > параметры - > Окружающая среда - > клавиатура и найдите представление команды.ZoomReset для изменения сочетания клавиш.

на Visual Studio Ultimate 2013, внизу-слева от экрана:

Если вы используете последнюю версию, вы также можете изменить размер содержимого в visual studio, выбрав

сделать вручную goto

и UserSetting файл будет открыт при изменении редактора.Для увеличения по умолчанию

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в 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.

На интерактивных курсах все клавиши станут горячими

Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.

есть ли способ изменить размер шрифта среды в коде Visual Studio? такие вещи, как intellisense box, панель отладки, имена файлов ..так далее.

Я знаю, как изменить размер шрифта редактора, но я не мог найти, как изменить размер шрифта среды, поэтому мне интересно, можете ли вы его как-то изменить

В настоящее время невозможно изменить семейство шрифтов или размер вне редактора. Однако вы можете увеличить весь пользовательский интерфейс В и из .

обновление для нашей версии VS Code 1.0:

недавно введен параметр window.zoomLevel позволяет сохранить уровень масштабирования навсегда! Он может иметь как отрицательные, так и положительные значения для увеличения или уменьшения масштаба.

просто скопировать "editor.fontSize": 18 в своем setting.json редактора.

клавишей управления + Shift + P а затем набрав "настройки", вы сможете легко найти файл настроек пользователя или рабочего пространства.

в коде Visual Studio, нажав Ctrl + и Ctrl - вы можете изменить общий размер шрифта IDE. Это помогает быстрее, чем изменение настроек в каждом сеансе. Надеюсь, это поможет.

ctrl + shift + p
выберите "Настройки пользователя"
добавить "editor.fontSize": 14

У меня есть мой набор в "editor.fontSize": 12,

сохраните файл, вы увидите эффект сразу.

наслаждайтесь !

Настройки Пользователя
Настройки Рабочего Пространства
Параметры Папок

вы можете увеличение и уменьшение весь пользовательский интерфейс в меню Вид.

сейчас я использую версия 1.21.1 и в меню Вид вы можете получить опцию увеличения и уменьшения масштаба, которые являются 2-й и 3-й последние варианты. Вы можете сделать это с помощью Ctrl + + и Ctrl + - .

вы можете сбросить масштаб в любое время, выбрав Сброс Масштабирования выбор.

на данный момент (март 2018) и версия 1.21.0, вы можете перейти к настройкам, поиск "масштаб" и изменить "editor.mouseWheelZoom": false значение false по умолчанию для true . Это позволит увеличить / уменьшить масштаб кода VS с помощью кнопки управления и мыши - ctrl + scrollUp/scrollDown . Для изменения fontSize из общего рабочего пространства / экрана VS Code, обратитесь к ответу Alegozalves выше.

попробуйте поиграть с комбинацией следующих пользовательских настроек:

вы можете найти то, что вы хотите в настройках.json из меню настроек. Microsoft дает формиат Настройки Настройки в их сайт.

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

Несмотря на столь высокую популярность программы, ее функционал до сих пор остается не таким очевидным, из-за чего многие пользователи предпочитают продукт конкурента, нежели VS Code. Чтобы решить все проблемы, возникающие при работе с Visual Studio Code, рекомендую ознакомиться с подробным гайдом по настройке этого редактора кода. В нем я покажу, что VS Code – это мощный инструмент, которым может пользоваться каждый.

Установка Visual Studio Code

С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:

Переходим на официальный сайт и загружаем установочный файл.
Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.

На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем --disable-gpu.

Готово! Теперь программа должна работать на любом компьютере.

Интерфейс Visual Studio Code

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.

Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.

Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

Запустить и проверить работоспособность кода мы можем в следующей вкладке:

Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.

Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.

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

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

Русификация Visual Studio Code

Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:

Если вы захотите вернуть англоязычный интерфейс, для этого потребуется открыть раздел с плагинами и удалить установленный пакет с русским языком.

Внешний вид

Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

В результате отобразится список возможных тем – для примера возьмем солнечную тему.

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.

Управление проектами

По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

Теперь работа с проектами не должна вызывать никаких трудностей.

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

Возьмем для примера функцию, отступы в которой выстроены случайным образом.
Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

Автодополнение

В популярных программах, подобных Visual Studio, встроена функция автодополнения, помогающая завершить код. Например, вы пишите строчку кода, а среда подсказывает, как ее завершить. С помощью этой опции можно не только вспомнить нужную функцию, но и быстро написать код.

По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

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

Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

Управление Vim

Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

Отладка кода

Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.

После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

С помощью плагинов мы можем отладить код, написанный на любом языке программирования.

Заключение

Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.

Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

Читайте также: