Быстрый, маленький, но мощный редактор кода Visual Studio Code

Visual Studio Code развивается очень быстро и даже если ты уже используешь этот редактор, посмотри это видео, может увидишь что-то полезное и интересное для себя. 

Я всегда любил простые редакторы кода, потому что за счет простоты они обычно загружаются быстрее полноценных IDE. Я работал с различными средами разработки, такими как Borland (когда она еще владела средами разработки), Eclipse, NetBeans, Visual Studio. Я хорошо к ним отношусь, но иногда бывает необходимость быстро изменить какой-то файл и не хочется ждать долго, пока загрузиться тяжеловесная программа.

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

Но если работать с HTML, CSS, JavaScript, PHP, Python или любым другим языком, который не требует компиляции, то тут нужно быстро загружаемый редактор, с хорошей подсветкой кода и будет неплохо, если он будет иметь хорошие возможности по завершению кода за меня - IntelliSense – быстрый поиск имен для текущего языка.

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

Я люблю VS Code не только за быструю загрузку, но и за хорошую поддержку клавиатуры. С помощью горячих клавиш можно на много быстрее выполнить большинство операций, поэтому я буду часто приводить их и советую попробовать использовать горячие клавиши, скорей всего вы тоже привыкните к ним. В macOS очень часто для вызова команд используется клавиша Command, а в Windows это Ctrl. Я буду приводить сочетание клавиш macOS первыми, а в круглых скобках будет указываться Windows версия.

Проекты

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

В Visual Studio Code создавать проекты для работы с файлами необязательно. Вы просто можете открыть любой файл и работать с ним.

Но очень часто нам приходиться работать с файлами, которые находятся в одной директории, ведь когда мы создаем сайт, то все файлы могут храниться в одной и той же директории. Чтобы проще было находить нужные файлы, такую директорию можно добавить в раздел Workspace в VS Code.

Workspace – это просто хранилище для папок с вашего диска, ничего особого нет и если переводить дословно, то можно перевести как Рабочее пространство. Его можно найти в панели Explorer, которое можно вызвав нажатием Command+Shift+E (Ctrl+Shift+E) или нажав на кнопку, которая обведена кругом на следующем скриншоте:

Панель Explorer состоит из нескольких разделов:

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

Workspace – сюда вы можете добавлять папки, с которыми вы работаете. Чтобы добавить новую можно щелкнуть правой кнопкой в этом разделе (на скриншоте это поле обведено синей рамкой) и вы увидите контекстное меню с командой Add Folder To Workspace или эту же команду можно найти в главном меню File.

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

Визуальный интерфейс

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

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

У меня не часто, но все же бывает необходимость редактировать один и тот же файл в двух разных местах – где-нибудь вначале и в середине. Для этого можно разделить вид файла. Кликаем правой кнопкой по закладке и в появившемся меню внизу должны быть команды Split Up, Split Down, Split Left, Split Right. С помощью этого выбора мы можем указать, с какой стороны должно появиться окно редактора этого же файла.

Я кликнул правой кнопкой мыши по файлу DefaultController и выбрал Split Down, поэтому дополнительное окно редактора этого файла появилось снизу:

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

Как я уже сказал, эффективность работы достаточно сильно зависит от умения использовать клавиатуру. Чтобы переключаться между открытыми закладками можно использовать сочетание клавиш Ctrl+Tab и это сочетание работает как в macOS, так и в Windows.

Если у вас открыто не так много файлов и они все видны, то может быть удобно переключаться между ними по номерам. Control + 1 (Alt+1 в Windows) значит переключиться на первый файл.

Чтобы открыть файл, с которым вы недавно работали, но сейчас он не открыт, можно воспользоваться сочетанием клавиш Command + P (Ctrl+P в Windows). В центре наверху появится выпадающий список, в котором можно видеть недавно открытые файлы, но если начать печатать, имя файла, то можно найти и более ранние файлы, которые вы открывали. Поиск происходит и по файлам в директориях, которые вы добавили в Workspace.

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

Недавно появилась новая фишка – закреплять закладки. Щелкаем правой кнопкой и выбираем Pin. Закрепленные закладки не будут закрываться, если выбирать команды типа – закрыть все справа, слева или все. Они перемещаются в начало списка, чтобы были перед глазами. Я пока не много пользовался закреплением.

Команды

Visual Studio Code выглядит простым и у него вроде бы не так много возможностей, если посмотреть на меню, но в реальности очень много функционала скрыто под капотом и к нему можно добраться через магическое сочетание клавиш Command+Shift+P (Ctrl+P). При нажатии этой магии появляется строка, в которой можно набирать различные команды.

Обратите внимание, что в поле ввода есть символ >. Если его удалить, то вы попадаете в режим открытия файлов, как при нажатии Command+P.

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

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

Допустим, что вы написали код:

<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Home page </h1>
<p>Welcome to my website</p>
</body>
</html>

Выглядит ужасно, потому что форматирование отсутствует на проч. В VS Code нужно постараться, чтобы написать такое, потому что он автоматически форматирует по мере ввода. Но допустим, что вы что-то скопировали и получилась вот такая печалька. Нажимаем Command+Shift+P и чисто интуитивно может догадаться, что нужно напечатать Format, мы же хотим отформатировать текст.

У нас есть опции:

Format Selection - отформатировать выделенное

Format Document - отформатировать весь документ

Format Modified Lines – форматировать модифицированные строки

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

Выбираем форматирование и получаем уже более красивый код:

<html>

<head>
    <title>Welcome</title>
</head>

<body>
    <h1>Home page </h1>
    <p>Welcome to my website</p>
</body>

</html>

Таких команд очень много и описывать их все будет поблематично.

Редактор кода

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

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

Но если по какой-то магической причине вы хотите изменить команды, вы можете это сделав поменяв язык.

Посмотрите на строку состояния, справа внизу вы должны увидеть текущий язык, который определил VS и в моем случае это PHP. Кликните по нему:

Горячая клавиша для этой операции Command+K, M (Ctrl+K, M). Сначала нажимаете Ctrl+M, отпускаете эти клавиши и нажимаете M. Если вы забыли сочетание клавиш и не хочется тянуться за мышкой, то можно вызвать командное меню Command+Shift+P и набрать Change Language Mode. В любом из этих случаев вы должны увидеть что-то типа:

Вы можете вызвать автодетект, настроить отображение для языка, выбрать другой язык. Например, у вас открыт C# файл, но в нем вы вынуждены по какой-то причине писать HTML код. Просто допустим, что будет такая необходимость. Меняете язык и автокомплитер уже начинает работать по-другому.

Допустим вы знаете название строки в файле и хотите на нее перейти. Такое часто бывает, когда вы в логах увидели ошибку и в ней зафиксирована строка, в которой произошла ошибка. Для перехода на определенную строку нажимаем Control+G (Ctrl+G) и наверху появляется уже знакомая нам строка ввода. Обратите внимание, что сочетание клавиш именно Control на обеих ОС.

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

Вызовите еще раз окно нажав Control+G. Удалите двоеточие и окно поиска преврвщается в окно открытия файлов. Добавьте символ > и окно поиска превратиться в окно выполнения команд. То есть в принципе мы всегда вызываем одно и то же окно разными сочетаниями клавиш, а что будет выполняться зависит от того, какой мы видим первый символ.

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

VS Code не сильно отличается от других редакторов и тут можно прыгать по словам удерживая Option (в Windows удерживаем Control) клавишу и нажимая стрелки вправо/влево. Можно прыгать в начало или конец строки удерживая Command (в Windows удерживаем Fn) и нажимая стрелки вправо или вверх.

Для копирования и вставки выделенного фрагмента используются Command+C/Command+V, а если ничего не выделено, то в буфер попадет вся текущая строка. Это очень удобно, потому что очень часто нужно копировать именно строкой, а не только часть.

Работа с терминалом. Visual Studio Code создавался, когда Microsoft начали переход с Framework на .NET Core. В этом фреймворке Microsoft начала отходить от необходимости хранить сложную конфигурацию в специальных файлах проекта и для создания проекта достаточно простого файла конфигурации, но даже для его создания была создана утилита командной строки. Так что теперь проекты создаем из командной строки.

Visual Studio Code создавался для работы и с другими языками, такими как PHP и Python, где командная строка используется достаточно часто, поэтому интеграция редактора кода и терминала была вполне очевидным и необходимым. Встроенный терминал есть, и он очень удобен, а вызвать его можно нажатием Control + ~. Это же сочетание и закрывает окно.

---

Внимание!!! Если ты копируешь эту статью себе на сайт, то оставляй ссылку непосредственно на эту страницу. Спасибо за понимание