Ядро редактора «VS Code» (то есть без расширений) уже само по себе содержит множество функций. Эта страница освещает часть из них и позволяет вам в интерактивном режиме опробовать их, используя множество встроенных в тело этой страницы редакторов. Для получения всех деталей о функциях редактора «VS Code» и других сведений следует обратиться к нашей документации.
Содержание данной тестовой площадки (ссылки ведут на разделы этой же страницы):
- Редактирование со множеством курсоров — выделение фрагментов текста, выбор всех вхождений, добавление дополнительных курсоров и так далее;
- Технология автодополнения «IntelliSense» — получение помощи и подсказок по параметрам при написании собственного кода и использовании импортированных модулей;
- Действия со строками кода — быстрое перемещение строк откуда угодно куда угодно для реорганизации вашего кода;
- Переименование при рефакторинге — быстрое переименование уникальных сущностей (symbol) по всему вашему коду;
- Форматирование кода — следите за тем, чтобы ваш код хорошо выглядел, используя для этого встроенное автоматическое форматирование всего документа (файла) или только кода внутри выделения;
- Сворачивание кода — сосредоточьтесь на самых важных частях вашего кода с помощью сворачивания других частей;
- Ошибки и предупреждения — просматривайте сообщения об ошибках и предупреждениях прямо во время ввода кода;
- Сниппеты — тратьте меньше времени на ввод кода, используя сниппеты (часто используемые конструкции в коде);
- Сокращения «Emmet» — встроенная поддержка выражений (сокращений) «Emmet» переводит написание кода на языках HTML и CSS на новый уровень;
- Контроль типов в языке JavaScript — выполняйте контроль типов в вашем файле с кодом на языке JavaScript, используя возможности языка TypeScript, без какой-либо дополнительной настройки.
Использование множества курсоров позволяет вам редактировать множество частей документа (файла) одновременно, тем самым значительно повысив производительность вашего труда. Попробуйте выполнить следующие действия с блоком кода во встроенном редакторе ниже:
- Обычное выделение текста — воспользуйтесь любой комбинацией клавиш из «Shift+СтрелкаВниз», «Shift+СтрелкаВправо», «Shift+СтрелкаВверх», «Shift+СтрелкаВлево» для выделения блока текста. Кроме этого, доступно прямоугольное выделение — либо с помощью комбинации клавиш «Shift+Alt» и расширения выделения перетаскиванием мышью с нажатой левой кнопкой, либо с помощью нажатия средней кнопки мыши и расширения выделения перетаскиванием мышью с нажатой средней кнопкой;
- Добавьте курсор — нажмите комбинацию клавиш «Ctrl+Alt+СтрелкаВверх», чтобы добавить новый курсор выше текущего или комбинацию клавиш «Ctr+Alt+СтрелкаВниз», чтобы добавить новый курсор ниже текущего. Кроме этого, вы можете использовать мышь с комбинацией «Alt+ЩелчокЛевойКнопкойМыши», чтобы добавить новый курсор там, где вам захочется (место добавления нового курсора — это место, в которое вы щелкнете левой кнопкой мыши при использовании вышеуказанной комбинации);
- Создайте курсоры в конце каждого из вхождений выделенного кусочка текста — выделите экземпляр кусочка текста (по которому будет выполнен поиск других вхождений в текст этого экземпляра), например, выделите подстроку «background-color» во встроенном ниже редакторе и нажмите комбинацию клавиш «Ctrl+Shift+L». Теперь вы можете заменить одновременно все вхождения этой подстроки, просто начав вводить текст, который заменит все эти вхождения.
Вышеописанная последовательность действий — лишь верхушка айсберга редактирования со множеством курсоров. Загляните в пункт главного меню «Выделение» редактора и в наш удобный справочник по комбинациям клавиш (пункт главного меню «Справка – Справочник по сочетаниям клавиш», а также пункт главного меню «Файл – Настройки – Сочетания клавиш»), чтобы узнать о дополнительных приемах работы со множеством курсоров.
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке CSS, описывающим три стиля для HTML-элементов с идентификаторами «p1», «p2» и «p3». В этом окне можно экспериментировать. Вот картинка-иллюстрация:
Подсказка по коду на языке CSS во встроенном редакторе. Возможно, вы заметили, что в примере выше разработчики редактора также обеспечили прямоугольники с цветовыми палитрами в каждой строке таблицы стилей, где используются коды цветов. Кроме этого, если вы наведете курсор на описание элемента, например, на описание элемента «#p1», редактор покажет, как это описание можно использовать в HTML. Упомянутые прямоугольники-палитры также работают как средство выбора цвета, которое позволит вам легко изменить значение цвета. Всё описанное в этой подсказке является простым примером некоторых функций редактора «VS Code», специфичных для определенных языков программирования (или разметки).
Редактор «Visual Studio Code» поставляется с предустановленной мощной технологией автодополнения «IntelliSense» для языков программирования JavaScript и TypeScript. В примере во встроенном редакторе ниже поместите текстовый курсор справа от точки в конце пятой строки и нажмите комбинацию клавиш «Ctrl+Пробел», чтобы вызвать технологию «IntelliSense». Обратите внимание, что предлагаемые варианты автоматического завершения (дополнения) взяты из набора методов и свойств элемента «Canvas» (Canvas API), как и должно быть, исходя из логики вводимой в примере программы на языке JavaScript.
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке JavaScript, в котором происходит получение из HTML-документа и настройка HTML-элемента «Canvas». Обратите внимание, что незаконченная строка (пятая) подчеркнута в конце красной волнистой линией, так как в таком незаконченном виде код содержит синтаксическую ошибку. В этом окне можно экспериментировать. Вот картинка-иллюстрация:
Подсказка. В то время как мы поставляем полную поддержку языков программирования JavaScript и TypeScript «из коробки» (сразу после установки редактора), работа с другими языками программирования может быть улучшена обогащением технологии «IntelliSense» для этих языков с помощью установки одного из множества расширений редактора.
Поскольку программисты часто работают со всем текстом строки целиком, мы предоставляем в редакторе «VS Code» набор полезных для такой работы со строками комбинаций клавиш.
- Скопируйте строку и вставьте ее выше или ниже текущей позиции с помощью комбинаций клавиш «Shift+Alt+СтрелкаВверх» или «Shift+Alt+СтрелкаВниз» соответственно;
- Переместите текущую строку целиком или сразу группу строк, входящих в текущее выделение (даже если строка входит в выделение только частично, она тоже будет перемещена), вверх или вниз с помощью комбинаций клавиш «Alt+СтрелкаВверх» и «Alt+СтрелкаВниз» соответственно;
- Удалите строку целиком с помощью комбинации клавиш «Ctrl+Shift+K» (эта комбинация клавиш действует и на группу строк, входящую в текущее выделение, как и для пункта 2).
В этом месте на странице интерактивной среды встроено окно редактора с кодом в формате JSON. Суть в том, что при работе с такими данными программисты могут менять строки со свойствами объекта местами, добавлять новые строки, какие-то строки — удалять (в языке JavaScript, кстати, рекомендуется последнее свойство тоже завершать запятой (так удобнее работать со строками), но в формате JSON завершающая запятая считается ошибкой, из-за этого в данном случае последнее свойство в объекте не завершается запятой). Поэтому неудивительно, что такой код дан здесь для экспериментов. Вот картинка-иллюстрация:
Подсказка. Еще одна функция, очень популярная среди разработчиков — закомментировать блок кода (одну или несколько строк кода целиком). Вы можете переключаться между превращением текущей строки (или группы строк, входящих в выделение) в комментарий (комментарии) и обратной операцией (раскомментированием) с помощью комбинации клавиш «Ctrl+/» (используйте клавишу «/», которая находится в ряду букв рядом с пробелом, а не клавишу «/» с цифровой клавиатуры и не клавишу «/» с цифрового ряда клавиатуры).
Вы можете легко изменить имя уникальной сущности (symbol), например, изменить имя функции или имя переменной, одновременно по всему вашему коду. Нажмите клавишу «F2», пока курсор «касается» (находится слева впритирку от первой буквы или справа впритирку от последней буквы или внутри слова) имени нужной уникальной сущности (symbol), например, «Book» (имя функции-конструктора в приведенном ниже коде), чтобы переименовать все экземпляры (вхождения) этой уникальной сущности — переименование будет выполнено во всех файлах проекта. Также вы можете сделать то же самое с помощью пункта «Переименовать символ» в контекстном меню, вызываемом щелчком правой кнопки мыши по нужному «символу» (уникальной сущности) в коде.
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке JavaScript. В этом коде создана небольшая функция-конструктор «Book», с помощью которой можно создавать объекты типа (класса) «Book» (в данном случае каждый такой объект содержит два свойства с информацией о названии книги и о ее авторе). В этом же коде выполняется создание двух объектов типа (класса) «Book». Ссылки на созданные объекты не сохранены, так как это всего лишь код для экспериментов с переименованием уникальных сущностей. Вот картинка-иллюстрация:
Подсказка по комментариям в стиле «JSDoc». Технология «IntelliSense» редактора «VS Code» использует комментарии в стиле «JSDoc» (то есть комментарии, написанные по специальным правилам для генератора документации «JSDoc») для предоставления более информативных подсказок. Типы параметров и информация из комментариев в стиле «JSDoc» показываются, когда вы наводите указатель мыши на ссылку (reference) на функцию-конструктор «Book» или в окошке «IntelliSense», появляющемся над идентификатором «Book» при создании нового экземпляра типа (класса) «Book» (см. код на иллюстрации выше).
Поддержание красивого внешнего вида вашего кода является непростой задачей без хорошей программы-форматировщика. К счастью, в редакторе «VS Code» можно легко форматировать код либо с помощью комбинации клавиш «Shift+Alt+F» (действует на весь код в текущем файле), либо с помощью комбинации клавиш «Ctrl+K Ctrl+F» (действует только на код, входящий в текущее выделение). Оба эти варианта также доступны через контекстное меню, вызываемое щелчком правой кнопки мыши (пункт «Форматировать документ», если щелкнуть в любое место кода, и пункт «Форматировать выделенный фрагмент», если щелкнуть на выделение).
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке JavaScript. С ним можно поэкспериментировать. Вот картинка-иллюстрация:
Подсказка. Дополнительные форматировщики доступны в галерее (магазине) расширений. Поддержка форматирования также может быть настроена через параметры редактора, например, можно включить (по умолчанию он выключен) параметр «editor.formatOnSave» (форматирование файла при сохранении).
В большом файле часто может быть полезно свернуть фрагменты кода, чтобы увеличить его удобочитаемость. Чтобы сделать это, вы можете просто нажать комбинацию клавиш «Ctrl+Shift+[» для сворачивания или нажать комбинацию клавиш «Ctrl+Shift+]» для разворачивания области кода, в которой в данный момент находится курсор. Сворачивание также может быть выполнено с помощью нажатия мышью на иконку с фигуркой угла, направленного вниз, а разворачивание — с помощью нажатия мышью на иконку с фигуркой угла, направленного вправо; эти иконки появляются, если навести мышь на пространство (по-английски «gutter») между кодом программы и номерами строк программы. Чтобы свернуть все фрагменты кода, воспользуйтесь комбинацией клавиш «Ctrl+K Ctrl+0», а чтобы развернуть все фрагменты кода, воспользуйтесь комбинацией клавиш «Ctrl+K Ctrl+J».
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке HTML. С ним можно экспериментировать. Вот картинка-иллюстрация:
Подсказка. Алгоритм работы сворачивания кода базируется на отступах, используемых программистами для форматирования кода (по-английски «indentation»), и поэтому может применяться к любым языкам программирования, в которых можно использовать отступы для форматирования кода. Просто сделайте отступы в вашем коде, чтобы создать сворачиваемые фрагменты; в таком коде вы сможете сворачивать фрагменты с определенным номером уровня с помощью комбинаций клавиш от «Ctrl+K Ctrl+1» до «Ctrl+K Ctrl+5».
Ошибки и предупреждения выделяются с помощью подчеркивания волнистой линией прямо в то время, когда вы вводите код. В тестовом образце кода ниже вы можете заметить несколько синтаксических ошибок. Последовательным нажатием клавиши «F8» вы можете перемещаться от одной из обнаруженных ошибок к другой и просматривать подробные сообщения об этих ошибках. По мере того, как вы будете их исправлять, подчеркивания волнистой линией и соответствующие метки на вертикальной полосе прокрутки будут исчезать.
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке JavaScript. С ним можно экспериментировать. Вот картинка-иллюстрация:
Вы можете значительно ускорить процесс редактирования (написания) кода, используя сниппеты. Просто начните набирать слово «try» во встроенном окне редактора ниже и выберите вариант «trycatch» из открывшегося списка вариантов, затем нажмите клавишу «Tab», чтобы создать заготовку в коде под конструкцию «try..catch». В результате курсор будет помещен в созданную конструкцию в конец слова «error» для обеспечения быстрого начала работы с этой конструкцией кода. Если в добавленной конструкции (сниппете) существует больше одного параметра, нажмите клавишу «Tab», чтобы перейти к следующему параметру.
В этом месте на странице интерактивной среды встроено окно редактора. С ним можно экспериментировать. Но в этом окне пока нет ничего, потому что предполагается, что пользователь будет пробовать в нем вводить код. Вот картинка-иллюстрация:
Подсказка. Галерея (магазин) расширений включает наборы сниппетов практически для любого существующего фреймворка или языка программирования. Также вы можете создать свои собственные «пользовательские» сниппеты.
Сокращения «Emmet» выводят идею сниппетов на полностью новый уровень: вы можете вводить с помощью селекторов, похожих на использующиеся в языке CSS, выражения, которые могут быть динамически (на лету, тут же) автоматически разобраны редактором и могут быть трансформированы (развернуты) в нужный итоговый код, содержимое которого зависит от того, что вы ввели в начальном (свёрнутом) выражении. Испытайте работу с сокращением «Emmet». Для этого установите курсор в конец валидного (соответствующего синтаксису сокращений «Emmet») сокращения «Emmet» или сниппета «Emmet», и выберите пункт главного меню «Правка – Emmet: развернуть сокращение». В результате произойдет развертывание сокращения «Emmet» в нужный итоговый код. (Попытайтесь проделать это на сокращении «Emmet», содержащемся во встроенном редакторе ниже.)
В этом месте на странице интерактивной среды встроено окно редактора с примером выражения (сокращения) «Emmet». С ним можно экспериментировать. Вот картинка-иллюстрация:
Подсказка. Шпаргалка по синтаксису сокращений из документации «Emmet» является хорошим источником вариантов использования сокращений «Emmet». Чтобы включить развертывание с помощью клавиши «Tab» сокращений «Emmet» и сниппетов «Emmet», следует включить параметр «emmet.triggerExpansionOnTab» (по умолчанию он выключен и развертывание с помощью клавиши «Tab» не работает). Ознакомьтесь со статьей «Сокращения Emmet в редакторе Visual Studio Code» в документации редактора «VS Code», чтобы изучить эту тему подробнее.
Иногда контроль типов в вашем коде на языке JavaScript может помочь вам обнаружить ошибки, которые вы иначе могли бы пропустить. Вы можете запустить контролёр типов из языка TypeScript для имеющегося у вас кода на языке JavaScript, просто вставив строку комментария // @ts-check в начало файла с вашим кодом.
В этом месте на странице интерактивной среды встроено окно редактора с кодом на языке JavaScript. С ним можно экспериментировать. Предполагается, что пользователь уберет из комментария буквы
no, превратив комментарий// @ts-nocheckв комментарий// @ts-checkи включив таким образом контролёр типов из языка TypeScript для кода, лежащего ниже этого комментария. Вот картинка-иллюстрация:
Подсказка. Вы также можете включить контроль типов по умолчанию для всех файлов рабочей области или приложения, добавив (включив) параметр «js/ts.implicitProjectConfig.checkJS» со значением «true» в ваших настройках рабочей области или в пользовательских настройках (в файле настроек). После этого вы можете исключать из контроля типов файлы целиком и отдельные строки кода с помощью добавления комментариев // @ts-nocheck и // @ts-expect-error соответственно. Ознакомьтесь со статьей «Работа с языком JavaScript в редакторе Visual Studio Code» в документации редактора «VS Code», чтобы изучить эту тему подробнее.
Итак, если вы дошли до этого места, то это значит, что вы теперь приобрели некоторые знания о нескольких (не всех) функциях редактирования кода в редакторе «Visual Studio Code». Но не останавливайтесь на этом :) У нас есть много дополнительных материалов: документация, вводные видео и статья «Советы и хитрости» из документации, которые помогут вам научиться пользоваться редактором. А пока вы еще находитесь здесь, вот несколько дополнительных штук, которые вы можете попробовать:
- Откройте встроенную в редактор консоль (терминал) с помощью комбинации клавиш «Ctrl+`» (вторая клавиша в комбинации — машинописный обратный апостроф, по-английски «backtick»), а затем ознакомьтесь с тем, что можно делать в редакторе с ее помощью, просмотрев статью «Встроенный терминал» документации редактора;
- Начните работу с системой контроля версий, нажав комбинацию клавиш «Ctrl+Shift+G». Разберитесь, как добавить файлы в индекс (stage), создать коммит (зафиксировать изменения), работать с ветками проекта, просматривать разницы между версиями файлов (diffs) и в других понятиях контроля версий, ознакомившись со статьей «Использование системы контроля версий в редакторе VS Code» документации редактора;
- Загляните в список расширений редактора (их там тысячи) во встроенной в редактор галерее расширений, нажав комбинацию клавиш «Ctrl+Shift+X». Статья «Магазин расширений» документации редактора объяснит вам, как просмотреть самые популярные расширения, как отключить установленные в ваш экземпляр редактора расширения и многое другое.
На этом пока всё.
Счастливого написания кода! 🎉