C редактор кода: ТОП-7 популярных IDE для программирования на С++

6 популярных бесплатных редакторов кода для программистов

Текст на основе статьи Вики Сингха Рао «Top 5 Popular Free Source Code Editors For Programmers».

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

Давайте рассмотрим шесть самых популярных редакторов 2018 года.

1. Visual Studio Code

VS Code среди самых популярных редакторов самый «молодой». Впервые он вышел 29 апреля 2015 года. Имеет открытый исходный код. Разработан этот редактор компанией Microsoft.

Взлет VS Code был поистине потрясающим: согласно данным опроса Stack Overflow в 2018 году этот редактор стал самым популярным инструментом разработчиков (им пользуются 34,9% участников опроса). А ведь еще в 2016 году он занимал 13-е место.

Этот редактор кода поддерживает множество языков программирования. Его функционал расширяется с помощью плагинов, благодаря чему вы можете настроить программу для своих нужд. Одной из «изюминок» программы является технология автодополнения IntelliSense.

Платформы: macOS, Windows и Linux.

2. Atom

Atom, вышедший в свет 26 февраля 2014 года, изначально был разработан GitHub. Это бесплатный текстовый редактор с открытым исходным кодом для macOS, Linux и Microsoft Windows.

Десктопное приложение создано с использованием веб-технологий. Большая часть его расширений имеют бесплатные лицензии: они создаются и поддерживаются сообществом.

Платформы: OSX, Windows, Linux.

3. Brackets

Brackets был создан Adobe Systems. Этот редактор также имеет открытый исходный код. Он написан на HTML, CSS и JavaScript и ориентирован на веб-разработку. Brackets был выпущен под лицензией MIT и в настоящее время поддерживается на GitHub.

Впервые Brackets увидел свет 4 ноября 2014 года. Это кросс-платформенный редактор, его можно скачать для Mac, Windows и Linux. Доступен он на 38 языках.

Платформы: Mac, Windows и Linux

В последнем обновлении были представлены новые свойства Brackets, такие как пользовательские комбинации горячих клавиш и более аккуратное автодополнение в JavaScript. Больше того, Brackets в основном нацелен на разработку на JavaScript, CSS и HTML.

В релизе версии 1.0 Adobe анонсировала функцию извлечения информации из PSD-файлов для удобства написания кода на CSS. Но в июне 2016 года эту функцию исключили «в связи с низким уровнем использования». Extract все еще доступна через Photoshop и Dreamweaver, которые являются частью платного сервиса Adobe Creative Cloud. Последняя версия Brackets – 1.12.

4. VIM

VIM (название происходит от слов vi improved – «улучшенный vi») впервые был выпущен 2 ноября 1991 года. Это клон текстового редактора для Unix – vi, написанного Биллом Джоем. Улучшенную версию написал Брам Моленар. Он взял за основу исходный код порта Stevie (клона vi) для Amiga.

VIM может использоваться как в качестве редактора командной строки, так и в виде отдельного приложения в графическом пользовательском интерфейсе. Это бесплатное ПО с открытым исходным кодом. Редактор выпущен под лицензией, включающей некоторые оговорки относительно благотворительности. Создатели предлагают насладиться их творением и подумать о взносах в пользу детей Уганды. Эта лицензия совместима с GNU General Public License благодаря специальному пункту, который разрешает распространение и изменение копий «под лицензией GNU GPL версии 2 или более поздней».

VIM доступен на многих языках, включая русский.

Платформы: Unix, Linux, MS-DOS, MS-Windows и Macintosh.

5. Notepad++

Notepad++ разработал Дон Хо, первый выпуск состоялся в ноябре 2003 года. Это текстовый редактор для программистов. Он поддерживает редактирование в разных вкладках, благодаря чему можно работать со многими файлами в одном окне.

Название проекта происходит от инкрементного оператора С.

Notepad++ доступен на 84 языках, включая русский. Выпускается под лицензией GNU General Public License 2 версии.

Редактор кода Notepad++ распространяется бесплатно. Сначала этот проект был размещен на SourceForge.net, откуда его скачали больше 28 млн. раз. Он дважды получал звание «Лучшего инструмента разработчика» в SourceForge Community Choice.

В этой программе используется компонент редактирования Scintilla.

6. Sublime Text

Первый выпуск Sublime Text состоялся 18 января 2008 года. Это кросс-платформенный редактор. Он не относится к свободно распространяемым, хотя имеет открытый исходный код. Разработали его Джон Скиннер и Уилл Бонд.

Sublime Text поддерживает многие языки программирования и разметки. Функционал редактора можно расширить с помощью плагинов, которые обычно создаются и поддерживаются сообществом под лицензиями бесплатного ПО.

Этот редактор был написан на C++ и Python.

Платформы: Linux, Mac, Microsoft Windows.

Выбор лучшего редактора кода для веб-разработчика в 2018 году

Перевод статьи Каталина Вейзила «Choosing the best code editor as a web developer in 2018».

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

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

1. Visual Studio Code

Visual Studio Code это бесплатный кросс-платформенный редактор кода, разработанный Microsoft. Программа имеет открытый исходный код. Исходя из опроса, проведенного Stack Overflow в 2017 году, это один из самых популярных редакторов кода, которым пользуются больше 24% разработчиков.

Он оснащен доступным набором инструментов для редактирования и отладки. Редактор легко интегрируется с другими сервисами. Его собственные свойства также легко расширить.

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

Кроме того, среди особенностей VS Code мы видим Git-интеграцию, IntelliSense (технология автодополнения), подсветку синтаксиса для самых популярных языков программирования и много других прекрасных функций.

Если вам этого недостаточно, вы можете с легкостью улучшить и кастомизировать VS Code благодаря коллекции плагинов, поставляемых Microsoft или создаваемых сообществом.

2. Sublime Text 3

Sublime Text 3 имеет бесплатную и премиум-версию. Это кросс-платформенный редактор кода. Он не только легковесный и очень шустрый в работе, но также и расширяемый.

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

По умолчанию Sublime Text 3 предоставляет базовое автодополнение, подсветку синтаксиса и функционал сворачивания (фолдинга). Но используя Package Control в Sublime Text, вы можете расширить последний и добавить больше «примочек»: инструменты отладки, новые теми, поддержку intellisense и т. п.

В последней версии Sublime (3.1) также улучшено использование памяти (в некоторых случаях до 30%), появился рендеринг текста с поддержкой лигатур, усовершенствовано взаимодействие пользователя с программой, определение синтаксиса и добавлены новые цветовые схемы.

3. Atom

Atom это еще один бесплатный, кросс-платформенный редактор с открытым исходным кодом. Он создан и выпущен GitHub.

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

Также этот редактор поддерживает GitHub. Он поставляется со встроенным менеджером пакетов, благодаря чему вы можете осуществлять поиск, а также устанавливать или создавать собственные пакеты для расширения функционала редактора.

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

Atom можно расширить с помощью Atom-IDE – набора опциональных пакетов.

4. Vim

Vim это мощный консольный редактор с открытым кодом. Призван быть, как кольцо всевластия у Толкина, «Единым, чтоб всеми править». Vim предустановлен практически в любом UNIX. Особенность этого редактора — он на 100% управляем с помощью клавиатуры (но если хотите, то можете пользоваться и мышью тоже). Главное в нем не красивый внешний вид, а функциональность.

Хотя это очень мощный редактор, его довольно непросто изучить. Но если вам это удастся, Vim покажет чудеса производительности: для выполнения некоторых задач, обычно отнимающих время, потребуется лишь несколько нажатий клавиш.

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

По сравнению с другими (графическими) редакторами, такими как Visual Studio Code, Sublime или Atom, Vim предоставляет тот же функционал (если хорошо настроен), но использует лишь часть системной памяти и загружается моментально.

5. Emacs

Emacs это еще один редактор кода на базе UNIX. Он написан на Lisp и может посоревноваться с Vim в юзабилити и расширяемости.

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

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

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

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

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

6. SpaceMacs

SpaceMacs это созданный и поддерживаемый сообществом редактор кода на основе Emacs. Он предоставляет подсветку синтаксиса для основных языков, а также инструменты тестирования и отладки.

Этот редактор пытается совместить сильные стороны Vim и Emacs, позволяя пользователям выбирать предпочтительный для них стиль редактирования.

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

Таким образом, используя SpaceMacs, вы можете быть уверены, что каждое сочетание клавиш организовано при помощи последовательных, мнемонических префиксов (например, «p» означает «project»). Благодаря этому использование редактора становится интуитивно понятным.

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

7. Notepad++

Notepad++ это развитый редактор кода, выпущенный в 2003 году и доступный только на платформе Windows.

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

Notepad++ очень быстрый. Он поддерживает разнообразные языки программирования прямо из коробки, но широко известен как отличный редактор для HTML-кода.

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

8. Brackets

Brackets это кросс-платформенный редактор с открытым исходным кодом, разработанный и выпущенный Adobe под лицензией MIT.

Он был создан с нуля специально для веб-дизайнеров и фронтенд-разработчиков, работающих преимущественно с JavaScript, HTML и CSS.

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

К его отличительным особенностям можно отнести опцию предпросмотра Live Preview. С ее помощью разработчик может открыть текущий документ в Chrome и просматривать, как этот документ отображается в браузере.

В Brackets также есть свойство «extract», позволяющее разработчикам подтягивать цвета, размеры, градиенты, шрифты и другие важные данные из PSD-файла в готовый к использованию CSS-файл.

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

9. TextMate

TextMate считается «недостающим редактором» для Mac OS, сочетающим графический пользовательский интерфейс и системную структуру UNIX.

Несмотря на то, что TextMate имеет открытый исходный код, это коммерческий продукт, выпускаемый под лицензией BSD. Его цена – $60.

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

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

10. Coda 2

Coda 2 это хороший редактор кода для Mac OS и iOS. Он разработан и выпущен Panic Inc — компанией, которая дала нам Transmit, Prompt и, наконец, Firewatch (игра с местом действия в пустынях Вайоминга).

Этот редактор стоит $99, но в течение 7-дневного пробного периода можно пользоваться бесплатно.

Coda это мощный редактор кода, спроектированный с мыслями о производительности и эффективности. У него современный и интуитивно понятный пользовательский интерфейс. Программа поставляется с такими функциями как дополнение кода, подсветка синтаксиса для различных языков, поддержка MySQL, локальная индексация и т. д.

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

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

Заключение

Выбор лучшего редактор кода всегда субъективен. Но я думаю, что лучше всего перепробовать их все по нескольку дней, чтобы понять, какой подходит именно вам.

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

Visual Studio Code – редактор кода для Linux, OS X и Windows / Блог компании Microsoft / Хабр

За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции. Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.

И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.

Уже сейчас вы можете использовать Visual Studio Code для создания веб-проектов ASP.NET 5 или Node.js (в чем-то даже удобнее чем в «взрослой» Visual Studio), использовать различные языки, такие как JavaScript, TypeScript, C#, работать с пакетными менеджерами npm, скаффолдингом yeoman и даже осуществлять отладку. Плюсом ко всему будет отличный «интеллисенс», поддержка сниппетов кода, рефакторинг, навигация, многооконность, поддержка git и многое другое.

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

Mac OS X

1. Загрузите Visual Studio Code для Mac OS X
2. Откройте двойным щелчком архив VSCode-osx.zip
3. Перетащите Visual Studio Code.app в папку Applications
4. Добавьте Visual Studio Code в Dock выбрав в Options “Keep in Dock”

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте в ~/.bash_profile

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Linux

1. Загрузите Visual Studio Code для Linux
2. Создайте новую папку и распакуйте туда содержимое архива VSCode-linux-x64.zip
3. Двойным щелчком запустите Code

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку

sudo ln -s /path/to/vscode/Code /usr/local/bin/code

Windows

1. Загрузите Visual Studio Code для Windows
2. Щелкните двойным щелчком по загруженному файлу VSCodeSetup.exe для того чтобы запустить установку

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала сделайте logon/logoff, соответствующие пути к файлу прописываются в переменной PATH самим установщиком

Дополнительные инструменты

Без инструментария Visual Studio Code годится разве что для простого редактирования файлов, для полноценной работы понадобится сопутствующий инструментарий, который зависит от ваших целей и задач:

• ASP.NET 5 — гибкий фреймворк создания современных веб-приложений
• NodeJS (включает NPM) – платформа для создания масштабируемых сетевых приложений
• git – система контроля версий
• Yeoman – инструмент «скаффолдинга» примерно тоже самое что и File | New Project в VS
• generator-aspnet — yeoman генератор для ASP.NET 5 приложений, выполните npm install -g generator-aspnet для установки
• hottowel — yeoman генератор для быстрого создания AngularJS приложений, выполните npm install -g generator-hottowel для установки
• Express – фреймворк для Node приложений, использует «движок» шаблонов Jade
• gulp – инструментарий создания «тасков» для выполнения сопутствующих сборке проекта задач
• mocha – фреймворк создания модульных тестов на JavaScript/Node
• bower – клиентский пакетный менеджер
• TypeScript – язык TypeScript, добавляет модульность, классы и прочие приятные вещи в ваш JavaScript код
• TypeScript definition manager – определения TypeScript для популярных JavaScript библиотек, включают поддержку IntelliSense вVS Code

Начало работы

Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:

npm install -g express
npm install -g express-generator
express myExpressApp
cd myExpressApp
npm install

В текущем каталоге будет создан проект, который можно будет открыть в Visual Studio Code. Для того чтобы проверить, что все работает как надо, выполните команду npm start и запустите браузер по адресу http://localhost:3000.
После всех этих действий просто запустите VS Code в папке с проектом

Code .

Если вы хотите попробовать возможности VS Code на примере ASP.NET 5 то можете воспользоваться инструкцией по адресу https://code.visualstudio.com/Docs/ASPnet5.

Базовые возможности Visual Studio Code

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

Файлы, папки, и проекты

VS Code работает с файлами и папками в которых находятся проекты. В простейшем случае вы можете открыть файл на редактирование просто выполнив команду ./code index.html. Более интересным случаем является открытие папки. VS Code сам определяет тип проекта в зависимости от содержимого папки. Например, если в папке находятся файлы package.json, project.json, tsconfig.json или файлы .sln и .proj для Visual Studio ASP.NET 5.0 то VS Code включает много новых функций которые обеспечивают IntelliSence, подсказки, навигацию по коду, выполнение команд и многое другое.

Расположение основных элементов

VS Code обладает интуитивно понятной и простой схемой расположения основных элементов. Интерфейс разделен на четыре основных блока, это:

1. Редактор, основной блок в котором осуществляется изменение содержимого открытого файла
2. Сайдбар, с помощью которого можно увидеть различные представления файлов проекта
3. Статусбар, показывающий текущий статус различных операций
4. Вьюбар, позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений

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

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

Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе

Ctrl+\ для того чтобы разделить активный текущий редактор на два

Open to the Side в контекстном меню файла в обозревателе

Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).

Палитра команд

Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.

Введите в строку команды знак вопроса? и тогда вы получите перечень команд которые работают в текущем контексте:

Некоторые часто используемые команды:

• Ctrl+P навигация к файлу или символу по набранной строке
• Ctrl+Tab циклично открывает последние отредактированные файлы
• Ctrl+Shift+P выводит список команд редактора
• Ctrl+Shift+O навигация к некоторому символу в файле
• Ctrl+G навигация к строке в файле
• Ctrl+Tab выводит список всех файлов которые были открыты от момента запуска VS Code, удерживайте Ctrl и нажимайте Tab до тех пор пока не выберите нужный файл
• Alt+Left и Alt+Right навигация по ранее редактированным файлам и строкам назад и вперед

Обозреватель

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

Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:

Автосохранение

По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.

Поиск

Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.

Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.

Возможности редактора

Подсказки IntelliSence

Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.

Подсказки параметров

Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.

Сниппеты кода

VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.

Переход к определению символа

Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.

Переход к методу или переменной

Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.

Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.

Просмотр определения символа

Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:

Переименование методов и переменных

Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.

Отладка

В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.

Для того чтобы запустить отладку проекта Node, достаточно нажать на иконку бага в Activity Bar. После генерации файла launch.json запустится отладчик. Для проектов Node VS Code автоматически определяет каталог ./bin/www.

Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.

Отладчик позволяет просматривать значения текущих переменных:

Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.

Контроль версий

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

Совет: установите credential helper для того чтобы не получать постоянные запросы на ввод данных учетной записи https://help.github.com/articles/caching-your-github-password-in-git/

Конфликты

VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:

Полезные ссылки

Обзор текстовых редакторов для кода — «Хакер»

Содержание статьи

Не для каждой задачи и не каждого проекта требуется полноценная IDE, поэтому для многих основным инструментом по-прежнему остается любимый текстовый редактор. И кажется, что выбор прост: мощный, расширяемый, но простой Sublime Text, живая классика в лице emacs и vim, а также моноплатформенные фавориты — Notepad++ для Windows, TextMate для OS X и Geany для Linux. Но ведь новые редакторы появляются чуть ли не каждый день — есть ли тебе смысл менять привычки? Давай посмотрим, что происходит.

Atom

atom.io

Еще в августе 2011 года один из основателей GitHub Крис «defunkt» Уонстрат поставил перед собой амбициозную цель: создать редактор, который был бы по-настоящему открытым и предлагал неограниченные возможности для хакинга, но при этом не превращался бы во второй Vim или Emacs (который, как известно, умеет почти все, но только если у тебя мозги как у Джеффа Дина). И вот спустя три года и более чем пятнадцать тысяч коммитов началось публичное бета-тестирование. В марте этого года Atom стал доступен для загрузки всем желающим. Чем же собирается перевернуть наш подход к кодингу знаменитая компания?

Первое, что бросается в глаза при запуске нового детища GitHub, — это невероятно похожий на Sublime Text интерфейс. Само по себе это не минус. Известный факт, что интерфейс Sublime был вдохновлен другим, некогда не менее популярным редактором кода для OS X TextMate. Нынешняя история с Atom и Sublime лишь подчеркивает удачные решения GUI последнего.

Вторая особенность Atom заключается в том, что это, по сути, веб-приложение в обертке Chromium. Нет, конечно, у редактора есть своя иконка в доке, нормальные системные меню и поддержка нативных хоткеев. Просто ядро Atom написано по большей части на CoffeeScript, работает оно на Node.js, а сам интерфейс редактора является HTML-страницей со вполне обычной разметкой. Убедиться в этом можно, если выбрать из меню View пункт Developer -> Toogle developer tools.

Из коробки Atom сильно напоминает Sublime

Третья интересная фишка Atom — его модульность. В лучших традициях экосистемы Node.js он написан с использованием максимального количества открытых модулей (больше пятидесяти). Это значит, что если тебе не нравится какой-то штатный функционал, то, по уверениям разработчиков, ты без труда сможешь подобрать ему замену из более чем 70 тысяч пакетов в npm registry или написать свой плагин. Учитывая, что JavaScript фактически уже давно стал самым популярным языком на GitHub, и у CoffeeScript лишь немного отстает от Perl, это вселяет уверенность в будущее Atom.

Пакетов еще мало, но написать свой действительно просто

А что же с киллер-фичами? Вот тут все не так радужно. То ли дело в молодости проекта, то ли еще в чем-то, но Atom, кроме громкого имени создателей и больших надежд, из коробки не предоставляет ничего, что бы могло заставить часами играться с ним. То, что преподносится разработчиками как преимущества (например, автокомплит, вкладки, коллапс кода, снипеты), может вызвать лишь снисходительную улыбку на лицах адептов Sublime. Да, конечно, Atom уже имеет свой пакетный менеджер, но я не нашел в его репозиториях ничего такого, что было бы нельзя реализовать с помощью плагинов для Sublime.

Light Table

lighttable.com

Разработка Light Table началась в 2011 году, когда американский программист Крис Грейнджер решил, что процесс работы с кодом в современных текстовых редакторах недостаточно хорошо вписывается в современный workflow. Если кратко, задача Light Table — сделать процесс разработки по-настоящему интерактивным и наглядным, давая разработчику моментальный фидбек на любое действие, тем самым помогая быстрее ориентироваться в большом коде. Именно с такой идеей Крис подался на Kickstarter и достаточно быстро собрал на разработку проекта 316 720 долларов при заявленной цели в 200 тысяч. Чем же конкретно идеи Криса так приглянулись бейкерам?

Одной из самых крутых особенностей Light Table является возможность работать с документацией по ходу написания кода. Чтобы увидеть описание функции, достаточно просто навести на нее курсор. Редактор моментально найдет и выведет документацию по запрошенной функции или параметру (в случае с build-in методами) или покажет prepend-описание функции, оставленное прямо в коде. Чем-то это напоминает автокомплит, который используется в среде разработки Visual Studio от Microsoft, но значительно более глубокий и мощный.

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

Выбираем интерпретатор, и исполняем inline-код с его помощью

Третья фишка Light Table — уникальная возможность организации кода в так называемые таблицы. Они представляют собой логически завершенные блоки кода, через которые можно наглядно представить взаимодействие отдельных функций программы. С помощью этой фичи очень удобно разделить файл на несколько независимых блоков-функций и работать с ними, соорудив некое подобие настоящего дашборда из кода. Также приятной особенностью является интеллектуальная подсветка блоков — в этом случае шансы запутаться в и без того наглядном workflow стремятся к нулю.

Код может быть представлен в виде таблиц

Несмотря на довольно непривычную философию, Light Table — это, несомненно, редактор нового поколения. Его фишка не в том, что он написан на модных технологиях, а в изменении самого подхода к процессу разработки сложного ПО. Наверное, при работе с простенькими JS-скриптами реальная мощь Light Table не почувствуется, но для проектов чуть посложнее он станет незаменимым инструментом. Нужно только привыкнуть. Но вот это как раз-таки будет непросто.

Lime

limetext.org

Весь Lime можно описать одной-единственной, но известной фразой Бобука — блеск и нищета опенсорса. Проект, начатый в прошлом году Фредриком «quarnster» Энбомом (Fredrik Ehnbom), решает одну-единственную, но понятную задачу: создать опенсорный конструктор по образу и подобию Sublime Text. Причина такого желания понятна — автор, горячий поклонник Sublime, был недоволен вялым развитием проекта и отсутствием банального исправления багов прошлых версий. Идея оказалась близка нескольким десятками единомышленников, и вскоре свет увидела первая версия Lime.

Первое, что отталкивает при знакомстве с этим редактором, — отсутствие хоть какого-нибудь подобия бинарных пакетов. В целом логика такого решения понятна: Lime — это и не цельное приложение, а набор из отдельного бэкенда на языке Go и пары фронтендов на выбор. Однако легче от этого не становится — попытка с наскока заставить Lime элементарно работать превращается в увлекательную возню с зависимостями Go, конфигами и прочими радостями жизни.

Lime уже сейчас имеет на выбор два фроентенда. Скоро будет и третий на Dart

Что касается работы в этом редакторе, на данный момент она откровенно неудобна, и написать здесь о чем-то уникальном, по сути, нечего. Lime пока не может похвастаться даже теми функциями, которые в других текстовых редакторах воспринимаются как должное. Создается впечатление, что разработчики пока уделяют куда больше внимания архитектуре приложения и чистоте кода, чем функционалу. До некоторой степени ситуацию спасает частичная совместимость с API Sublime (ну и некоторых частей TextMate, соответственно), но, несмотря на это, с юзабилити у Lime остаются большие проблемы.

Несмотря на довольно подробный ман, со сборкой все равно бывают сложности

В целом на сегодняшний день Lime оставляет двоякое впечатление. Наверное, это здорово, когда твой рабочий инструмент полностью опенсорный и настолько гибкий. Но давай будем честны с собой: скольким из нас когда-либо придет в голову переписать фронтенд своего текстового редактора? Скольким из нас вообще придет в голову заниматься разработкой текстового редактора под себя из-за каких-то неудобств вместо того, чтобы использовать этот инструмент по прямому назначению — а именно писать в нем свои программы? Большинству разработчиков (особенно тем, кто не болен Столлманом головного мозга) за глаза хватит функционала Sublime Text и его системы плагинов для решения повседневных задач. Да и, если честно, за несколько лет ежедневной работы в Sublime я не встречал каких-то сверхкритичных багов, для которых бы не смог найти своего workaround’а. Так что на данном этапе по-настоящему Lime подойдет лишь упертым фанатам опенсорса с огромным количеством свободного времени и желанием сделать этот мир чуточку лучше.

Brackets от Adobe

brackets.io

Brackets — достаточно молодой (разработка ведется с 2011 года), но интересный проект от Adobe. Его цель незамысловата — создать минималистичную и комфортную среду разработки, которая бы требовала минимум усилий со стороны девелопера. На моей памяти было уже немалое количество проектов со схожими целями. Давай посмотрим, получилось ли у Adobe с помощью комьюнити сделать что-то интересное и на этом поприще.

На удивление, Brackets получился весьма неплохим. Все необходимое работает из коробки (после Lime даже это становится в некотором смысле плюсом). Проект действительно решает свою главную задачу — облегчает написание кода, хотя и делает это практически без каких-либо принципиально новых подходов. И кстати, в этом нет ничего плохого.

Brackets написан на HTML/JS (спасибо, что не Flash или Adobe AIR :)), тесно интегрирован с Node.js. Внешне из коробки производит весьма благоприятное впечатление (правда, не без налета некоторой игрушечности). Что меня подкупило с нажатия первой клавиши — так это потрясающий автокомплит для HTML/CSS/JS/jQuery. Он действительно умный и к тому же содержит множество приятных мелочей (например, встроенный color-picker или тулзу для гуишного подбора transition’ов в CSS).

Из коробки Brackets очень облегчает жизнь разработчика

Но главной киллер-фичей для меня стало inline-редактирование связанных участков кода. Это возможность посмотреть и отредактировать, скажем, набор CSS-свойства по его классу или ID-шнику прямо из HTML-файла верстки в отдельной области. Brackets в реальном времени анализирует структуру твоего проекта, строит дерево зависимостей и позволяет писать взаимозависимые участки кода, практически не покидая основного контекста файла. Признаюсь, именно такой функционал я пилил пару лет назад в своем простеньком текстовом редакторе (уверен, не я один). Так что подобная фишка не может не радовать.Из остальных особенностей можно выделить быстрый доступ к документации (правда, не настолько детализированный, как у Light Table), JSLint из коробки и симпатичный менеджер плагинов. Хотя, конечно, таким обилием пакетов, как у Sublime, Brackets пока похвастаться не сможет.

У Brackets действительно приятный менеджер пакетов

В целом, несмотря на поддержку в некоторой степени, например, Ruby или Python, Brackets ориентирован в первую очередь на фронтенд разработчиков. Он отлично справится с нуждами верстальщиков, в чем-то оставляя позади даже специализированные IDE. Ничего революционно нового, кроме inline-редактирования кода, ты в нем не найдешь. Однако то, что есть, сделано на совесть и с душой. Если ты преимущественно верстаешь или пишешь клиентский код на не слишком замороченном стеке, вполне возможно, Brackets придется тебе по душе.

Zed

zedapp.org

Zed — это довольно хипстерский текстовый редактор, который также пытается переосмыслить современный процесс разработки ПО. Если Light Table пытается изменить сам принцип разработки, то Zed в основном ограничивается экспериментами с интерфейсом. Разработка была начата в 2011 году, и на сегодняшний день на официальном сайте Zed доступен в виде бинарников под основные платформы, а также в качестве приложения для Chrome Web Store.

Первое, что бросается в глаза при знакомстве с Zed, — отсутствие привычных элементов интерфейса вроде дерева проекта или вкладок. Достаточно спорный шаг, весь зачастую при разработке значительно легче ориентироваться в структуре проекта именно по дереву. Но вот в отсутствии табов некое рациональное зерно есть: обычно при работе с большими проектами количество открытых вкладок разрастается экспоненциально, и уже через полчаса работы приходится постоянно ходить по ним, закрывая то, с чем ты не работаешь в данный момент. В Zed же навигация по проекту осуществляется или с помощью прыжка напрямую к нужному файлу в проекте по его названию (Ctr/Cmd + E) через небольшую консоль в верхней части приложения.

Второй запоминающейся особенностью Zed является упор на многоколоночный интерфейс. Редактор поддерживает несколько фиксированных вариантов сплита рабочего пространства — 50/50%, 25/75% и так далее. Стоит отметить, что вторая (или даже третья) колонка предназначена не только для одновременного редактирования нескольких файлов, но также и для моментального предпросмотра кода на языках, требующих пропроцессинга (таких как Markdown или CoffeeScript).

При работе с Zed очень чувствуется его ориентированность на удаленное редактирование. Так, из коробки он имеет шикарную поддержку редактирования файлов из Dropbox или напрямую на удаленном сервере и поддерживает сессии. Но вот именно как редактор Zed весьма беден. Его встроенное автодополнение базируется на словаре, он не имеет удобных средств работы с расширениями, не позволяет настроить UI так, как хотелось бы. Хотя, наверное, Zed просто не об этом.

Из коробки Zed ориентирован на удаленное редактирование

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

Навигация осуществляется с помощью GoTo-панели

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

12 инструментов и сервисов для совместного программирования

1. Teletype для Atom

Atom – разработанный GitHub бесплатный редактор с открытым исходным кодом для Linux, macOS, Windows. Поддерживает все популярные языки программирования. Teletype – плагин, добавляющий возможность совместного редактирования кода в режиме реального времени. Отсутствует централизованный сервер: совместная работа по peer-to-peer. Для шифрования всех взаимодействий между сотрудниками применяется WebRTC. Принцип работы продемонстрирован на видео ниже:

Демонстрация работы с плагином Teletype в Atom

Цена: бесплатно.

2. Cloud9 IDE

AWS Cloud9 – облачная IDE от Amazon, поддерживающая более 40 языков, включая C, C++, CoffeeScript, Go, Java, PHP, Python (2 и 3) и Ruby. Она по умолчанию включает все SDK, библиотеки и подключаемые модули, необходимые для создания бессерверных приложений. Cloud9 имеет собственный терминал, предоставляющий доступ с привилегиями sudo к управляемому инстансу Amazon EC2, на котором размещена среда разработки, а также интерфейс командной строки AWS с предварительно настроенной аутентификацией. Это упрощает быстрый запуск различных команд и обеспечивает прямой доступ к сервисам AWS. Есть поддержка нескольких параллельных сред разработки для изолирования ресурсов проекта.

В бесплатной версии доступно: 1 Gb RAM + 1 vCPU, Amazon Linux либо Ubuntu Server 18.04 LTS, чат, подключение через SSH.

Внешний вид AWS Cloud9

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

3. Visual Studio Live Share

Visual studio code – редактор кода, разработанный Microsoft для Windows, Linux и macOS. С помощью плагина Visual Studio Live Share организуется общий доступ и совместная работа над проектами. Кодом можно делиться в режиме «только чтение» или «запись», а также обмениваться терминалами и серверами.

Демонстрация работы с Visual Studio Live Share

Цена: бесплатно.

4. CodeSandbox

CodeSandbox работает с JavaScript и TypeScript: Node.js, Angular, Adonis, Gatsby, Marko, Nuxt, Next, Sapper, Apollo, Ember, Nest, Styleguidist, MDX Deck, Gridsome, Quasar и Vuepress.

Редактировать можно без регистрации, но для включения общего доступа нужно авторизоваться через GitHub. Приглашенные пользователи могут одновременно редактировать, создавать, переименовывать и обновлять файлы и код. Также можно увидеть, какой файл они просматривают и над чем сейчас работают. Есть чат и уведомления. Функция Classroom Mode позволяет назначать определенных людей редакторами, остальных – в режим «только для чтения».

Внешний вид CodeSandbox IDE

Цена: бесплатно или 9$/мес. за безлимитные приватные песочницы и репозитории для проектов на GitHub.

5. Codeshare

Codeshare поддерживает более 80 языков, есть видеочат, темы на выбор, возможность скачать код, но каждые 24 часа файлы обнуляются. То есть отлично подходит для собеседований. Чтобы включить общий доступ, достаточно нажать кнопку Share.

Внешний вид Codeshare

Цена: бесплатно в режиме для чтения.

6. CodePen

CodePen – онлайн-платформа для редактирования и хранения кода на HTML, CSS и JavaScript. Поддерживает возможность совместного доступа Collab Mode:

Демонстрация работы с CodePen

Цена: от 8$/мес.

7. Collabedit

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

Возможности:

• Чат.
• История изменений.
• Подсветка синтаксиса.
• Поддерживаемые языки: Java, Python, C, C++, C#, JavaScript, SQL, PHP, HTML, CSS и др.

Внешний вид Collabedit

Цена: бесплатно.

8. Codebunk

Codebunk – еще один веб-редактор. Без регистрации можно добавлять пользователей с правами «только для чтения», просто отправив ссылку на страницу с кодом. Поддерживает 21 язык программирования. Есть видео- и текстовый чат.

Внешний вид Codebunk

Цена: первый месяц бесплатно, далее от 9$/мес.

9. Repl.it

Repl.it – онлайновая среда разработки, поддерживающая более 50 языков программирования, включая Python, Lua, JavaScript, Julia, C++, C, C#, HTML, CSS. Установка библиотек в один клик. Подсветка синтаксиса, импорт в GitHub, темная и светлая темы на выбор. Для совместного бесплатного редактирования необходимо зарегистрироваться.

Рис. 6. Repl.it

Цена: в бесплатной версии работать одновременно могут только 2 пользователя. Доступно 100Мб для хранения кода, 500 Мб оперативной памяти, 0.2 – 0.5 vCPUs.

10. kodeWeave

kodeWeave – онлайн редактор HTML, Javascript и CSS с аудио- и текстовым чатом. Совместная работа доступна без регистрации.

Внешний вид kodeWeave

Цена: бесплатно. В начале появляется неназойливая реклама.

11. SyncFiddle

SyncFiddle – поддерживает JavaScript, HTML, CSS. Совместное редактирование по ссылке без регистрации. Срок хранения кода – 7 дней. Есть история изменений.

Внешний вид SyncFiddle

Цена: бесплатно.

Google Colab

Google Colab – бесплатная облачная среда для Jupyter Notebook, позволяющая совместно работать над проектам, написанными на Python. Хорошо подходит для машинного обучения, анализа данных и образования. Предоставляет свободный доступ к вычислительным ресурсам, включая графические процессоры. Блокноты запускаются путем подключения к виртуальным машинам с максимальным сроком работы – 12 часов. Код можно сохранять на Google Drive.

Внешний вид Google Colab

Цена: бесплатно.

***

Если в вашей компании тяга ко всему облачному, присмотритесь к Cloud9 от Amazon или к более специфическим: kodeWeave, CodeSandbox или CodeBunk. В ином случае имеет смысл просто установить плагин к VS Code или Atom. Для совместной работы с данными мы рекомендуем использовать Google Colab. А каким сервисом пользуетесь вы? Поделитесь в комментариях.

10 возможностей VS Code, помогающих ускорить работу программиста

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

Редактор Visual Studio Code (VS Code) стал восходящей звездой вселенной инструментов программирования сразу после того, как появился. Я долго не решалась его попробовать. Причина этого была не в том, что это — просто некий очередной редактор кода. Дело было в том, что вся моя работа была отлично организована в Sublime.

Для меня понятия «работа» и «написание кода» — это одно и то же. И, по большому счёту, неважно, каким именно редактором я буду постоянно пользоваться. Но изменения — это всегда нелегко. После того, как я неделю поработала в VS Code, я обнаружила, что моя продуктивность сильно просела. Я сделала за это время меньше, чем сделала бы, пользуйся я чем-то привычным.

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

В итоге я снова вышла на высокую производительность. Вряд ли я снова затею переход на новый редактор. VS Code — это надёжный и нетребовательный к ресурсам инструмент. Вокруг него собралось мощное сообщество разработчиков расширений. Пожалуй это — одна из лучших разработок Microsoft.

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

1. Сниппеты

Использование сниппетов — это серьёзный способ повышения продуктивности программиста. Дело в том, что они помогают автоматизировать ручной труд. Поначалу использование сниппетов может выглядеть как нечто вроде читерства. Но после того как, разрабатывая Angular-приложение, много раз воспользуешься этим средством для ввода каркаса конструкции switch в коде сущности View, перестаёшь обращать внимание на такие мысли.

Программирование — это, в сущности, знание о том, где и как пользоваться некими паттернами. Сниппеты ускоряют работу из-за того, что облегчают доступ к заранее заготовленным фрагментам кода.

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

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

Вот хорошее расширение, Angular Snippets, которое позволяет ускорить написание Angular-кода. При работе над проектами, основанными на React, я пользуюсь расширением ES7 React/Redux/GraphQL/React-Native snippets.

C Vue я пока не работала, но вот одно расширение, Vue 2 Snippets, которое, имея более 900 тысяч установок, выглядит многообещающим.

Процесс загрузки и установки расширений для VS Code можно начинать из браузера, но можно инициировать этот процесс и из интерфейса редактора. Для открытия панели, предназначенной для работы с расширениями, достаточно нажать на кнопку Extensions, выделенную на следующем рисунке.

Работа с расширениями в Visual Studio Code

2. IntelliSense

IntelliSense — это система автозавершения кода. Она весьма интеллектуальна, что выгодно отличает её от других подобных систем.

Об IntelliSense говорят, как об одном из основных средств VS Code, обеспечивающих высокую производительность труда. При этом многие, выбирающие VS Code, пользуются этой возможностью далеко не на полную мощность.

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

Работа с IntelliSense (источник)

Когда программист, например, вводит имя объекта и ставит после него точку, появляется выпадающий список с перечнем методов этого объекта. По мере того, как вводятся всё больше и больше букв имени метода, система фильтрует список. На определённом этапе ввода имени метода можно, клавишами-стрелками, выбрать нужное имя из довольно короткого списка, и нажать Enter для его вставки в код. Если сразу непонятно — какой именно метод нужен в данный момент — тут же можно взглянуть и на документацию.

Если в VS Code пришёл кто-то, кто пишет на Java или на C++, то всё это может и не показаться ему чем-то таким уж удивительным. Я видела нечто подобное, когда работала в Eclipse. Но в JavaScript-мире интеллектуальное автозавершение ввода — это возможность, достойная того, чтобы её заметили, и того, чтобы ей, ради значительного повышения скорости работы, пользовались.

3. Интегрированный терминал

Наличие в VS Code интегрированного терминала может помочь экономить время за счёт того, что программисту не приходится постоянно переключаться между окнами терминала и редактора. Это ещё значит и то, что в ходе автоматического запуска проекта очень легко замечать ошибки, не прерывая при этом своего обычного рабочего процесса.

Для того чтобы открыть терминал, можно воспользоваться сочетанием клавиш CTRL + ` (обратная галочка).

Терминал открывается для корневой директории текущего рабочего пространства.

Для открытия ещё одного окна терминала можно воспользоваться комбинацией клавиш CTRL + SHIFT + ` (всё та же обратная галочка).

Окно терминала в VS Code

4. Просмотр мест использования сущностей и их определений, рефакторинг

При работе над большим проектом некий класс, метод или свойство могут быть использованы в огромном количестве мест. VS Code позволяет узнать о том, где именно используются подобные сущности, быстро и эффективно собирая соответствующий список и демонстрируя его пользователю.

Для того чтобы увидеть такой список, достаточно щёлкнуть правой кнопкой мыши по методу, функции, или по чему-нибудь ещё, и выбрать в появившемся меню команду Peek References. Того же эффекта можно добиться, выделив нужный участок, и, на Windows-компьютере, воспользовавшись сочетанием клавиш SHIFT + F12.

Команда Rename Symbol из того же меню позволяет переименовывать сущности. Это особенно полезно при рефакторинге, или тогда, когда оказывается, что имя чего-либо больше не соответствует его предназначению.

5. Средства форматирования кода и инструменты для управления техническим долгом

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

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

Средства форматирования кода часто основаны на определённых соглашениях. Они позволяет обеспечить единообразие оформления текстов программ. Например, речь идёт о правилах выравнивания кода, о расстановке скобок, и, в целом, о том, как выглядит код.

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

Средство для управления техническим долгом в действии (источник)

Tech Debt Tracker использует набор показателей для определения сложности кода и потенциального технического долга, который может быть связан с этим кодом. Данное расширение нацелено на JavaScript и TypeScript-код. Оно даёт разработчику рекомендации по поводу улучшения текстов программ и может помочь ему выработать у себя привычку писать чистый и читабельный код.

6. Клавиатурные сокращения

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

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

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

Панель клавиатурных сокращений можно посмотреть, воспользовавшись комбинацией клавиш CTRL + K + S.

Панель клавиатурных сокращений в VS Code

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

Здесь можно найти расширения, которые помогают настраивать клавиатурные сокращения в VS Code.

7. Дзен-режим

Кто не любит работать, не отвлекаясь ни на что постороннее? В дзен-режиме (zen mode) VS Code переводится в полноэкранный режим, из интерфейса исчезает всё, что может отвлечь от работы с кодом. Для перевода редактора в этот режим нужно выполнить особую последовательность действий. А именно, тут используется не сочетание клавиш, а скорее — последовательность сочетаний клавиш. Для того чтобы выяснить, как именно дзен-режим включается у вас — загляните в панель клавиатурных сокращений и поищите по слову zen.

В моём случае для включения дзен-режима используется следующая последовательность сочетания клавиш: сначала — CTRL + Z, и сразу после этого — K. То есть — для перехода в этот режим я сначала нажимаю клавиши CTRL + Z, отпускаю их, а потом нажимаю и отпускаю K. У вас это может выглядеть иначе. Например — как CTRL + K и Z.

Дзен-режим помогает поддерживать состояние потока, избавляя программиста от любых потенциальных отвлекающих факторов.

8. Git

Прямо из VS Code можно делать коммиты в Git-репозитории. Как оказалось, VS Code очень хорошо поддерживает Git. А именно, тут можно готовить к коммитам изменённые файлы, делать коммиты, откатывать изменения, делать комментарии. В общем — всё, что обычно делается средствами командной строки, можно сделать, не покидая редактора. Тут вам понадобится панель Source Control, открываемая соответствующей кнопкой, расположенной в левой части экрана. Например, для подготовки изменённого файла к коммиту можно воспользоваться кнопкой со знаком +, находящейся в верхней части этой панели. После этого можно вызвать контекстное меню этого файла и найти в нём дополнительные команды.

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

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

Существуют расширения для VS Code, автоматизирующие разные аспекты работы с системами контроля версий. Например, расширение GitLens позволяет получать подробности о репозиториях. Скажем — о том, кто внёс какое изменение в код, о том, какие изменения подготовлены к коммиту, а какие — нет. Это расширение умеет аннотировать код, давая доступ к сведениям из системы контроля версий. Например — к таким, как время коммита и изменения, внесённые коммитом в проект. GitLens — это инструмент, который особенно полезен при командной работе над проектами.

9. Отладчик

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

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

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

Кнопка Debug и панель отладки

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

По умолчанию VS Code использует для запуска отлаживаемого кода среду Node.js, но можно сделать так, чтобы для отладки использовался бы отладчик браузера Google Chrome. В целом, можно отметить, что отладка кода — это режим работы, в котором можно обнаружить источники проблем, которые очень непросто найти при обычном выполнении кода.

10. Совместная работа над проектами в режиме реального времени

Вам когда-нибудь доводилось редактировать в Google Docs документ вместе с кем-нибудь другим? Расширение Live Share даёт, в сущности, те же возможности, но в применении к работе над программами. Связь между теми, кто работает в таком режиме, устанавливается через учётные записи GitHub или Azure.

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

Итоги

Эффективность разработчика зависит не только от того, как хорошо он умеет программировать. Она зависит ещё и от того, насколько глубоко он знает используемые им инструменты.

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

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

Уважаемые читатели! Чем вы пользуетесь для написания кода?

Редактировать и перемещаться по коду C ++ в Visual Studio Code

В этом разделе дается краткий обзор общих возможностей редактора C / C ++, а также некоторых, специфичных для C / C ++. Дополнительные сведения о редактировании в коде Visual Studio см. В разделе «Базовое редактирование и навигация по коду».

Расширение C / C ++ поддерживает удаленную разработку.

Функции редактирования

Расширение C / C ++ для VS Code имеет множество функций, которые помогают писать код, понимать его и перемещаться по исходным файлам.Для обеспечения наилучшего взаимодействия расширение должно знать, где найти каждый файл заголовка, на который есть ссылка в вашем коде. По умолчанию расширение ищет текущий исходный каталог, его подкаталоги и некоторые зависящие от платформы местоположения. Если указанный заголовочный файл не может быть найден, VS Code отображает зеленую волнистую линию под каждой директивой #include, которая ссылается на него.

Чтобы указать дополнительные каталоги include для поиска, наведите курсор на любую директиву #include, отображающую зеленую волнистую линию, а затем щелкните действие с лампочкой, когда оно появится.Откроется файл c_cpp_properties.json для редактирования; здесь вы можете указать дополнительные подключаемые каталоги для каждой конфигурации платформы индивидуально, добавив дополнительные каталоги в свойство ‘browse.path’.

Список участников

Когда вы вводите символ доступа к члену (. или -> ), редактор отображает список членов. По мере ввода дополнительных букв список фильтруется в реальном времени:

Форматирование кода

Расширение C / C ++ для Visual Studio Code поддерживает форматирование исходного кода с использованием формата clang, который включен в расширение.

Вы можете отформатировать весь файл с помощью Format Document (⇧⌥F (Windows Shift + Alt + F, Linux Ctrl + Shift + I)) или только текущего выделения с помощью Format Selection (⌘K ⌘F (Windows, Linux Ctrl + K Ctrl + F)) в контекстном меню, вызываемом правой кнопкой мыши. Вы также можете настроить автоматическое форматирование со следующими параметрами:

• editor.formatOnSave — для форматирования при сохранении файла.
• editor.formatOnType — для форматирования по мере ввода (запускается по символу;).

По умолчанию для стиля clang-формата установлено значение «file», что означает, что он ищет файл .clang-формата внутри вашей рабочей области. Если найден файл .clang-format , форматирование применяется в соответствии с настройками, указанными в файле. Если в вашей рабочей области не найден файл .clang-format , форматирование применяется на основе стиля по умолчанию, указанного в настройке C_Cpp.clang_format_fallbackStyle . В настоящее время стиль форматирования по умолчанию — «Visual Studio», который является приближением средства форматирования кода по умолчанию в Visual Studio.

Стиль clang-формата Visual Studio еще не является официальным стилем clang-формата, но подразумевает следующие настройки clang-формата:

  UseTab: (текущая настройка VS Code)
IndentWidth: (текущая настройка VS Code)
BreakBeforeBraces: Allman
AllowShortIfStatementsOnASingleLine: false
IndentCaseLabels: false
ColumnLimit: 0  

Чтобы использовать другую версию clang-format, отличную от той, которая поставляется с расширением, измените C_Cpp.clang_format_path указывает путь, по которому установлен двоичный файл формата clang.

Например, на платформе Windows:

  «C_Cpp.clang_format_path»: «C: \\ Program Files (x86) \\ LLVM \\ bin \\ clang-format.exe»  

Улучшенная семантическая окраска

Когда IntelliSense включен, расширение Visual Studio Code C / C ++ поддерживает семантическую окраску. См. «Расширенная раскраска» для получения дополнительных сведений о настройке цветов для классов, функций, переменных и т. Д.

Краткая информация

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

Смотреть определение

Функция Peek Definition отображает несколько строк кода рядом с определением внутри окна просмотра , так что вам не нужно уходить от вашего текущего местоположения.

Чтобы просмотреть определение символа, поместите курсор на символ в любом месте исходного кода, а затем нажмите ⌥F12 (Windows Alt + F12, Linux Ctrl + Shift + F10).Кроме того, вы можете выбрать Peek Definition из контекстного меню (щелкните правой кнопкой мыши, затем выберите Peek Definition ).

В настоящее время расширение C / C ++ не анализирует код таким образом, чтобы помочь ему различать конкурирующие определения в зависимости от того, как используется символ. Эти конкурирующие определения возникают, когда символ определяет разные вещи в разных контекстах, например, с перегруженными функциями, классами и их конструкторами и в других ситуациях.Когда это происходит, каждое из конкурирующих определений перечисляется в правой части окна просмотра, а исходный код текущего выбора отображается слева.

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

Функции навигации по исходному коду, предоставляемые расширением C / C ++, являются мощными инструментами для понимания и обхода вашей кодовой базы. Эти функции поддерживаются тегами, хранящимися в локальной базе данных символьной информации. При установленном расширении C / C ++ эта база данных создается всякий раз, когда папка, содержащая файлы исходного кода C ++, загружается в VS Code. Значок базы данных появляется рядом с именем активной конфигурации («Win32» на изображении ниже), пока анализатор тегов генерирует эту информацию.

Значок исчезнет, ​​когда все символы будут помечены.

Поиск символов

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

Для поиска символа в текущем файле нажмите ⇧⌘O (Windows, Linux Ctrl + Shift + O), затем введите имя символа, который вы ищете. Появится список возможных совпадений; он фильтруется по мере ввода. Выберите из списка совпадений, чтобы перейти к его местоположению.

Чтобы найти символ в текущей рабочей области, нажмите ⌘T (Windows, Linux Ctrl + T), затем введите имя символа. Список возможных совпадений появится, как и раньше. Если вы выберете совпадение, которое было найдено в еще не открытом файле, файл будет открыт до перехода к местоположению совпадения.

Вы также можете искать символы, получая доступ к этим командам через палитру команд . Используйте Quick Open (⌘P (Windows, Linux Ctrl + P)), затем введите команду «@» для поиска в текущем файле или команду «#» для поиска в текущей рабочей области.⇧⌘O (Windows, Linux Ctrl + Shift + O) и ⌘T (Windows, Linux Ctrl + T) — это просто ярлыки для команд ‘@’ и ‘#’, поэтому все работает одинаково.

Перейти к определению

Вы также можете быстро перейти к определению символа с помощью функции Перейти к определению .

Чтобы перейти к определению символа, поместите курсор на символ в любом месте исходного кода, а затем нажмите F12. Или выберите Перейти к определению из контекстного меню (щелкните правой кнопкой мыши, затем выберите Перейти к определению ).Когда есть только одно определение символа, вы перейдете непосредственно к его местоположению, в противном случае конкурирующие определения отображаются в окне просмотра, как описано в предыдущем разделе, и вы должны выбрать определение, к которому хотите перейти.

Следующие шаги

Читайте дальше, чтобы узнать о:

Если у вас есть другие вопросы или вы столкнетесь с какими-либо проблемами, сообщите о них на GitHub. Вас могут попросить предоставить информацию журнала из расширения, чтобы помочь диагностировать проблему.См. Раздел Ведение журнала расширений C / C ++ для получения справки по обеспечению журналов расширений.

25.07.2019

.

Базовое редактирование в Visual Studio Code

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

Сочетания клавиш

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

Множественный выбор (мульти-курсор)

VS Code поддерживает несколько курсоров для быстрого одновременного редактирования. Вы можете добавить вторичные курсоры (более тонкие) с помощью Alt + Click. Каждый курсор работает независимо в зависимости от контекста, в котором он находится. Обычный способ добавить дополнительные курсоры — использовать ⌥⌘ ↓ (Windows Ctrl + Alt + Down, Linux Shift + Alt + Down) или ⌥⌘ ↑ (Windows Ctrl + Alt + Up , Linux Shift + Alt + Up), которые вставляют курсоры ниже или выше.

Примечание: Драйвер вашей видеокарты (например, NVIDIA) может перезаписать эти ярлыки по умолчанию.

⌘D (Windows, Linux Ctrl + D) выделяет слово в курсоре или следующее вхождение текущего выделения.

Совет: Вы также можете добавить дополнительные курсоры с помощью ⇧⌘L (Windows, Linux Ctrl + Shift + L), которые будут добавлять выделение при каждом появлении текущего выделенного текста.

Модификатор нескольких курсоров

Если вы хотите изменить клавишу-модификатор для применения нескольких курсоров к Cmd + Click в macOS и Ctrl + Click в Windows и Linux, вы можете сделать это с помощью редактора .Настройка multiCursorModifier . Это позволяет пользователям, пришедшим из других редакторов, таких как Sublime Text или Atom, продолжать использовать знакомый им модификатор клавиатуры.

Можно установить значение:

• ctrlCmd — Сопоставляет Ctrl в Windows и Cmd в macOS.
• alt — существующий Alt по умолчанию.

Также есть пункт меню Используйте Ctrl + щелчок для мульти-курсора в меню Selection , чтобы быстро переключить этот параметр.

Жесты Go To Definition и Open Link также будут учитывать этот параметр и адаптироваться таким образом, чтобы они не конфликтовали. Например, если установлено значение ctrlCmd , можно добавить несколько курсоров с помощью Ctrl / Cmd + Click, а открытие ссылок или переход к определению можно вызвать с помощью Alt + Click.

Сжать / развернуть выделенную область

Быстрое сжатие или расширение текущего выделения. Запустите его с помощью ⌃⇧⌘ ← (Windows, Linux Shift + Alt + Left) и ⌃⇧⌘ → (Windows, Linux Shift + Alt + Right).

Вот пример расширения выделения с помощью ⌃⇧⌘ → (Windows, Linux Shift + Alt + Right):

Выбор столбца (прямоугольника)

Поместите курсор в один угол и затем, удерживая Shift + Alt, перетащите в противоположный угол:

Примечание: это меняется на Shift + Ctrl / Cmd при использовании Ctrl / Cmd в качестве модификатора с несколькими курсорами.

Также существуют привязки клавиш по умолчанию для выбора столбца в macOS и Windows, но не в Linux.

Вы можете редактировать комбинации клавиш .json , чтобы связать их с чем-то более знакомым, если хотите.

Режим выбора столбца

Пользовательская настройка Editor: Column Selection управляет этой функцией. После входа в этот режим, как указано в строке состояния, жесты мыши и клавиши со стрелками по умолчанию создают выбор столбца. Этот глобальный переключатель также доступен через пункт меню Selection > Column Selection Mode . Кроме того, можно также отключить режим выбора столбца в строке состояния.

Сохранить / Автосохранение

По умолчанию VS Code требует явного действия для сохранения изменений на диск, ⌘S (Windows, Linux Ctrl + S).

Однако легко включить Автосохранение , которое сохранит ваши изменения после заданной задержки или когда фокус покидает редактор. Если этот параметр включен, нет необходимости явно сохранять файл. Самый простой способ включить Автосохранение — использовать переключатель Файл > Автосохранение , который включает и выключает сохранение после задержки.

Для большего контроля над Автосохранение откройте настройки пользователя или рабочего пространства и найдите соответствующие настройки:

• files.autoSave : Может принимать значения:
  • off — отключить автосохранение.
  • afterDelay — для сохранения файлов после заданной задержки (по умолчанию 1000 мс).
  • onFocusChange — для сохранения файлов при перемещении фокуса из редактора грязного файла.
  • onWindowChange — для сохранения файлов, когда фокус перемещается за пределы окна VS Code.
• files.autoSaveDelay : Настраивает задержку в миллисекундах, когда files.autoSave настроен на afterDelay . По умолчанию 1000 мс.

Горячий выход

VS Code запоминает несохраненные изменения в файлах при выходе по умолчанию. Горячий выход запускается, когда приложение закрывается через Файл > Выход ( Код > Выход из в macOS) или когда закрывается последнее окно.

Вы можете настроить горячий выход, задав для files.hotExit следующие значения:

• "выключено" : отключить горячий выход.
• "onExit" : Горячий выход будет запущен при закрытии приложения, то есть при закрытии последнего окна в Windows / Linux или при запуске команды workbench.action.quit (из палитры команд , сочетание клавиш или меню). Все окна без открытых папок будут восстановлены при следующем запуске.
• "onExitAndWindowClose" : Горячий выход будет запущен при закрытии приложения, то есть при закрытии последнего окна в Windows / Linux или при запуске команды workbench.action.quit (из палитры команд , сочетание клавиш или меню), а также для любого окна с открытой папкой, независимо от того, последнее ли это окно. Все окна без открытых папок будут восстановлены при следующем запуске. Чтобы восстановить окна папок такими, какими они были до выключения, установите окно .восстановить Windows до все .

Если что-то пойдет не так с горячим выходом, все резервные копии сохраняются в следующих папках для стандартных мест установки:

• Windows % APPDATA% \ Code \ Backups
• macOS $ ГЛАВНАЯ / Библиотека / Поддержка приложений / Код / Резервные копии
• Linux $ HOME / .config / Code / Резервные копии

Найти и заменить

VS Code позволяет быстро найти текст и заменить его в текущем открытом файле.Нажмите ⌘F (Windows, Linux Ctrl + F), чтобы открыть виджет поиска в редакторе, результаты поиска будут выделены в редакторе, на линейке обзора и на миникарте.

Если в текущем открытом файле есть несколько совпадающих результатов, вы можете нажать Enter и ⇧Enter (Windows, Linux Shift + Enter), чтобы перейти к следующему или предыдущему результату, когда поле ввода поиска находится в фокусе.

Строка поиска семян из выбранного

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

Эту функцию можно отключить, установив для editor.find.seedSearchStringFromSelection значение false .

Найти в выделенном

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

Если вы хотите, чтобы это было поведение виджета поиска по умолчанию, вы можете установить редактор .find.autoFindInSelection от до всегда или до multiline , если вы хотите, чтобы он запускался для выделенного текста только при выборе нескольких строк содержимого.

Расширенные возможности поиска и замены

Помимо поиска и замены простым текстом, виджет поиска также имеет три расширенных параметра поиска:

• Спичечный футляр
• Совпадение слова целиком
• Регулярное выражение

Замена футляра опоры поля ввода сохраняется, вы можете включить его, нажав кнопку «Сохранить футляр» ( AB ).

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

Вы можете искать многострочный текст, вставив текст в поля ввода «Найти» и «Заменить». Нажатие Ctrl + Enter вставляет новую строку в поле ввода.

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

Поиск по файлам

VS Code позволяет быстро искать по всем файлам в текущей открытой папке.Нажмите ⇧⌘F (Windows, Linux Ctrl + Shift + F) и введите поисковый запрос. Результаты поиска группируются в файлы, содержащие поисковый запрос, с указанием совпадений в каждом файле и его местоположения. Разверните файл, чтобы просмотреть все обращения в этом файле. Затем щелкните один из обращений, чтобы просмотреть его в редакторе.

Совет: Мы также поддерживаем поиск по регулярным выражениям в поле поиска.

Вы можете настроить параметры расширенного поиска, щелкнув многоточие ( Toggle Search Details ) под полем поиска справа (или нажав ⇧⌘J (Windows, Linux Ctrl + Shift + J)).Появятся дополнительные поля для настройки поиска.

Параметры расширенного поиска

В поле ввода под полем поиска вы можете ввести шаблоны, которые нужно включить или исключить из поиска. Если вы введете example , это будет соответствовать каждой папке и файлу с именем example в рабочей области. Если вы введете ./example , это будет соответствовать папке example / на верхнем уровне вашего рабочего пространства. Используйте ! , чтобы исключить эти шаблоны из поиска.! Example пропустит поиск в любой папке или файле с именем example . Используйте , для разделения нескольких шаблонов. Пути должны использовать косую черту. Вы также можете использовать глобальный синтаксис:

• * для соответствия одному или нескольким символам в сегменте пути
• ? для соответствия одному символу в сегменте пути
• ** для соответствия любому количеству сегментов пути, включая ни одного
• {} для группировки условий (например, {** / *.html, ** / *. txt} соответствует всем HTML и текстовым файлам)
• [] для объявления диапазона символов для сопоставления (пример . [0-9] для сопоставления в примере .0 , пример.1 ,…)

VS Code по умолчанию исключает некоторые папки, чтобы уменьшить количество результатов поиска, которые вас не интересуют (например: node_modules ). Откройте настройки для изменения этих правил в файлах .exclude и search.exclude .

Также обратите внимание на кнопку переключения «Использовать исключить настройки» и «Игнорировать файлы» в файлах , чтобы исключить поле . Переключатель определяет, следует ли исключать файлы, которые игнорируются вашими файлами .gitignore и / или совпадают с вашими файлами . Исключить и search.exclude settings.

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

Найти и заменить

Вы также можете искать и заменять файлы. Разверните виджет «Поиск», чтобы отобразить текстовое поле «Заменить».

Когда вы вводите текст в текстовое поле «Заменить», вы увидите отображение отложенных изменений. Вы можете заменить все файлы в текстовом поле «Заменить», заменить все в одном файле или заменить одно изменение.

Совет: Вы можете быстро повторно использовать предыдущий поисковый запрос, используя ↓ (Windows, Linux Down) и ↑ (Windows, Linux Up) для навигации по истории поисковых запросов.

IntelliSense

Мы всегда предлагаем автозавершение слов, но для богатых языков, таких как JavaScript, JSON, HTML, CSS, SCSS, Less, C # и TypeScript, мы предлагаем полноценный интерфейс IntelliSense. Если языковая служба знает возможные варианты завершения, предложения IntelliSense будут появляться по мере ввода. Вы всегда можете запустить его вручную с помощью ⌃Space (Windows, Linux Ctrl + Space). По умолчанию Tab или Enter являются триггерами принятия клавиатуры, но вы также можете настроить эти привязки клавиш.

Совет: Фильтрация предложений поддерживает CamelCase, поэтому вы можете вводить буквы в верхнем регистре в имени метода, чтобы ограничить количество предложений. Например, «cra» быстро вызовет «createApplication».

Совет. Предложения IntelliSense можно настроить с помощью параметров editor.quickSuggestions и editor.suggestOnTriggerCharacters .

Разработчики JavaScript и TypeScript могут воспользоваться репозиторием файлов декларации (типизации) типа npmjs, чтобы получить IntelliSense для общих библиотек JavaScript (Node.js, React, Angular). Вы можете найти хорошее объяснение использования файлов объявления типов в теме о языке JavaScript и в руководстве по Node.js.

Дополнительные сведения см. В документе IntelliSense.

Форматирование

VS Code имеет отличную поддержку форматирования исходного кода. В редакторе есть два явных действия по форматированию:

• Форматировать документ (⇧⌥F (Windows Shift + Alt + F, Linux Ctrl + Shift + I)) — отформатировать весь активный файл.
• Выбор формата (⌘K ⌘F (Windows, Linux Ctrl + K Ctrl + F)) — отформатировать выделенный текст.

Вы можете вызвать их из палитры команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)) или из контекстного меню редактора.

VS Code имеет средства форматирования по умолчанию для JavaScript, TypeScript, JSON и HTML. Для каждого языка есть определенные параметры форматирования (например, html.format.indentInnerHtml ), которые вы можете настроить в соответствии со своими предпочтениями в настройках пользователя или рабочей области. Вы также можете отключить средство форматирования языка по умолчанию, если у вас установлено другое расширение, обеспечивающее форматирование для того же языка.

  "html.format.enable": false  

Наряду с ручным запуском форматирования кода, вы также можете запускать форматирование на основе пользовательских жестов, таких как ввод текста, сохранение или вставка. По умолчанию они отключены, но вы можете включить их с помощью следующих настроек:

• editor.formatOnType — Отформатируйте строку после ввода.
• editor.formatOnSave — Отформатировать файл при сохранении.
• editor.formatOnPaste — Форматирует вставляемый контент.

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

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

Складной

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

Вы также можете использовать следующие действия:

• Сгибание (⌥⌘ [(Windows, Linux Ctrl + Shift + [)) сгибает самую внутреннюю несвернутую область на курсоре.
• Развернуть (⌥⌘] (Windows, Linux Ctrl + Shift +])) разворачивает свернутую область под курсором.
• Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl + K Ctrl + L)) складывает или разворачивает область под курсором.
• Свернуть Рекурсивно (⌘K ⌘ [(Windows, Linux Ctrl + K Ctrl + [)) сгибает самую внутреннюю несвернутую область на курсоре и все области внутри этой области.
• Рекурсивно развернуть (⌘K ⌘] (Windows, Linux Ctrl + K Ctrl +])) разворачивает область под курсором и все области внутри этой области.
• Свернуть все (⌘K ⌘0 (Windows, Linux Ctrl + K Ctrl + 0)) сгибает все области в редакторе.
• Развернуть все (⌘K ⌘J (Windows, Linux Ctrl + K Ctrl + J)) разворачивает все области в редакторе.
• Fold Level X (⌘K ⌘2 (Windows, Linux Ctrl + K Ctrl + 2) для уровня 2) свертывает все области уровня X, кроме области в текущей позиции курсора.
• Свернуть все комментарии блока (⌘K ⌘ / (Windows, Linux Ctrl + K Ctrl + /)) свернуть все области, которые начинаются с маркера комментария блока.

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

Начиная с версии 1.22, складывающиеся области также могут быть вычислены на основе синтаксических токенов настроенного языка редактора. Следующие языки уже поддерживают сворачивание с учетом синтаксиса: Markdown, HTML, CSS, LESS, SCSS и JSON.

Если вы предпочитаете вернуться к сворачиванию на основе отступов для одного (или всех) из указанных выше языков, используйте:

  "[html]": {
    "редактор.foldStrategy ":" отступ "
  },  

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

Чтобы сложить и развернуть только области, определенные маркерами, используйте:

• Свернуть маркерные области (⌘K ⌘8 (Windows, Linux Ctrl + K Ctrl + 8)) сгибает все маркерные области.
• Развернуть маркерные области (⌘K ⌘9 (Windows, Linux Ctrl + K Ctrl + 9)) разворачивает все маркерные области.

Вмятина

VS Code позволяет вам управлять отступом текста, а также использовать пробелы или табуляторы. По умолчанию VS Code вставляет пробелы и использует 4 пробела на клавишу Tab. Если вы хотите использовать другое значение по умолчанию, вы можете изменить настройки editor.insertSpaces и editor.tabSize .

  "editor.insertSpaces": true,
    "редактор.tabSize ": 4,  

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

VS Code анализирует ваш открытый файл и определяет отступ, используемый в документе. Автоматически обнаруженный отступ имеет приоритет над настройками отступа по умолчанию. Обнаруженная настройка отображается в правой части строки состояния:

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

Примечание. Автоматическое определение кода VS Code проверяет наличие отступов в 2, 4, 6 или 8 пробелов. Если в вашем файле используется другое количество пробелов, отступ может быть обнаружен неправильно. Например, если ваше соглашение предусматривает отступ с тремя пробелами, вы можете отключить editor.detectIndentation и явно установить размер табуляции на 3.

  "editor.detectIndentation": false,
    "editor.tabSize": 3,  

Поддержка кодировки файлов

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

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

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

Затем выберите кодировку.

Следующие шаги

Вы рассмотрели базовый пользовательский интерфейс — VS Code — это гораздо больше. Читайте дальше, чтобы узнать о:

Общие вопросы

Возможен ли глобальный поиск и замена?

Да, разверните текстовое поле представления поиска, чтобы включить текстовое поле замены.Вы можете искать и заменять по всем файлам в вашем рабочем пространстве. Обратите внимание: если вы не открывали VS Code в папке, поиск будет выполняться только в открытых в данный момент файлах.

Как включить перенос по словам?

Вы можете управлять переносом слов с помощью параметра editor.wordWrap . По умолчанию editor.wordWrap — это с , но если вы установите его на на , текст будет переноситься по ширине области просмотра редактора.

  "редактор.wordWrap ":" на " 

Вы можете переключить перенос слов в сеансе VS Code с помощью ⌥Z (Windows, Linux Alt + Z).

Вы также можете добавить в редактор вертикальные линейки столбцов с помощью параметра editor.rulers , который принимает массив позиций символов столбца, в которых вы хотите использовать вертикальные линейки.

10.09.2020

.

Советы и рекомендации по использованию кода Visual Studio

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

Если у вас не установлен Visual Studio Code, перейдите на страницу загрузки.Вы можете найти инструкции по настройке для конкретной платформы в разделе Запуск VS Code в Linux, macOS и Windows.

Предпочитаете видео? Вы можете посмотреть недавний доклад Microsoft Build Talk «Советы и рекомендации по Visual Studio Code», в котором описаны 20 советов и приемов для продуктивной работы с VS Code.

Основы

Начало работы

Откройте страницу Welcome , чтобы начать работу с основами VS Code. Справка > Добро пожаловать .

В правом нижнем углу страницы Добро пожаловать, есть ссылка на Интерактивная игровая площадка , где вы можете в интерактивном режиме опробовать функции VS Code. Справка > Интерактивная площадка .

Палитра команд

Доступ ко всем доступным командам в зависимости от вашего текущего контекста.

Сочетание клавиш: ⇧⌘P (Windows, Linux Ctrl + Shift + P)

Сочетания клавиш по умолчанию

Все команды находятся в палитре команд со связанной привязкой клавиш (если она существует). Если вы забыли сочетание клавиш, воспользуйтесь палитрой команд , чтобы помочь вам.

Справочные листы клавиатуры

Загрузите справочную информацию по сочетаниям клавиш для своей платформы (macOS, Windows, Linux).

Quick Open

Быстро открывать файлы.

Сочетание клавиш: ⌘P (Windows, Linux Ctrl + P)

Наконечник: Тип? для просмотра предложений команд.

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

Переход между недавно открытыми файлами

Повторите сочетание клавиш Quick Open для быстрого переключения между недавно открытыми файлами.

Открыть несколько файлов из Quick Open

Вы можете открыть несколько файлов из Quick Open , нажав клавишу со стрелкой вправо. Это откроет текущий выбранный файл в фоновом режиме, и вы сможете продолжить выбор файлов из Quick Open .

Переход между недавно открытыми папками и рабочими пространствами

Открыть последние

Сочетание клавиш: ⌃R (Windows, Linux Ctrl + R)

Отображает раскрывающийся список «Быстрый выбор» со списком из Файл > Открыть последние с недавно открытыми папками и рабочими пространствами, за которыми следуют файлы.

Командная строка

VS Code имеет мощный интерфейс командной строки (CLI), который позволяет настраивать запуск редактора для поддержки различных сценариев.

Убедитесь, что двоичный файл VS Code находится на вашем пути, поэтому вы можете просто ввести «код» для запуска VS Code. См. Разделы по настройке для конкретной платформы, если VS Code добавлен в путь к вашей среде во время установки (Запуск VS Code в Linux, macOS, Windows).

  # открытый код с текущим каталогом
код.# открыть текущий каталог в окне кода, который использовался последним
код -r.

# создать новое окно
код -n

# изменить язык
код --locale = es

# открыть редактор различий
код --diff <файл1> <файл2>

# открыть файл в определенной строке и столбце 
код --goto package.json: 10: 5

# см. параметры справки
код --help

# отключить все расширения
код --disable-extensions. 

Папка .vscode

Файлы, относящиеся к рабочей области, находятся в папке .vscode в корне. Например, tasks.json для средства выполнения задач и launch.json для отладчика.

Строка состояния

Ошибки и предупреждения

Сочетание клавиш: ⇧⌘M (Windows, Linux Ctrl + Shift + M)

Быстрый переход к ошибкам и предупреждениям в проекте.

Перебирайте ошибки с помощью F8 или ⇧F8 (Windows, Linux Shift + F8)

Вы можете фильтровать проблемы либо по типу («ошибки», «предупреждения»), либо по соответствию текста.

Изменить языковой режим

Сочетание клавиш: ⌘K M (Windows, Linux Ctrl + K M)

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

Настройка

Есть много вещей, которые вы можете сделать для настройки VS Code.

• Измените тему
• Измените сочетания клавиш
• Настройте свои параметры
• Добавить проверку JSON
• Создать сниппеты
• Установить расширения

Измените тему

Сочетание клавиш: ⌘K ⌘T (Windows, Linux Ctrl + K Ctrl + T)

Вы можете установить дополнительные темы из Marketplace расширений VS Code.

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

Раскладки клавиатуры

Вы привыкли к сочетаниям клавиш из другого редактора? Вы можете установить расширение Keymap, которое переносит сочетания клавиш из вашего любимого редактора в VS Code. Перейдите к Preferences > Keymap Extensions , чтобы увидеть текущий список на Marketplace. Некоторые из наиболее популярных:

Настройте сочетания клавиш

Сочетание клавиш: ⌘K ⌘S (Windows, Linux Ctrl + K Ctrl + S)

Вы можете искать ярлыки и добавлять свои собственные комбинации клавиш к комбинациям клавиш .json файл.

См. Дополнительные сведения в разделе «Привязки клавиш для кода Visual Studio».

Настройте свои параметры

По умолчанию VS Code показывает редактор настроек, вы можете найти настройки, перечисленные ниже, в строке поиска, но вы все равно можете редактировать базовый файл settings.json с помощью команды Open Settings (JSON) или изменив настройки по умолчанию редактор настроек с настройкой workbench.settings.editor .

Откройте настройки пользователя. settings.json

Сочетание клавиш: ⌘, (Windows, Linux Ctrl +,)

Изменение размера шрифта различных элементов пользовательского интерфейса

  // Главный редактор
"editor.fontSize": 18,
// Терминальная панель
"terminal.integrated.fontSize": 14,
// Панель вывода
"[Журнал]": {
    "editor.fontSize": 15
}  

Изменить уровень масштабирования

  "window.zoomLevel": 5  

Лигатуры шрифта

  "editor.fontFamily": "Код Фира",
"редактор.fontLigatures ": true  

Совет: Вам потребуется установить шрифт, поддерживающий лигатуры шрифтов. FiraCode — популярный шрифт в команде VS Code.

Автосохранение

  "files.autoSave": "afterDelay"  

Вы также можете переключить Автосохранение из меню верхнего уровня с помощью Файл > Автосохранение .

Форматировать при сохранении

  "editor.formatOnSave": true  

Форматирование на пасте

  "редактор.formatOnPaste ": true  

Изменить размер символов табуляции

  "editor.tabSize": 4  

Пробелы или табуляции

  "editor.insertSpaces": true  

Отрисовка пробелов

  "editor.renderWhitespace": "все"  

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

Игнорировать файлы / папки

Удаляет эти файлы / папки из окна редактора.

  "файлов.исключить ": {
    "somefolder /": правда,
    "somefile": правда
}  

Удалите эти файлы / папки из результатов поиска.

  "search.exclude": {
    "someFolder /": правда,
    "somefile": правда
}  

И многие-многие другие настройки.

Настройки для конкретного языка

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

  "[languageid]": {

}  

Совет: Вы также можете создать языковые настройки с помощью команды Configure Language Specific Settings .

Добавить проверку JSON

Включено по умолчанию для многих типов файлов. Создайте свою собственную схему и проверку в settings.json

  "json.schemas": [
    {
        "fileMatch": [
            "/ беседка.json "
        ],
        "url": "https://json.schemastore.org/bower"
    }
]  

или для схемы, определенной в вашей рабочей области

  "json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]  

или пользовательская схема

  "json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "тип": "объект",
            "properties": {
                "имя" : {
                    "тип": "строка",
                    "description": "Название записи"
                }
            }
        }
    },  

См. Дополнительную информацию в документации JSON.

Расширения

Сочетание клавиш: ⇧⌘X (Windows, Linux Ctrl + Shift + X)

Найти добавочные номера

1. На торговой площадке VS Code.
2. Выполните поиск внутри кода VS в представлении Extensions .
3. Посмотреть рекомендации по расширению
4. Списки расширений, курируемые сообществом, например awesome-vscode.

Установить расширения

В представлении Extensions вы можете выполнить поиск через строку поиска или щелкнуть Дополнительные действия (…) для фильтрации и сортировки по количеству установок.

Рекомендации по расширению

В представлении Extensions щелкните Показать рекомендуемые расширения в меню кнопки Дополнительные действия (…).

Создание собственного расширения

Вы заинтересованы в создании собственного расширения? Вы можете узнать, как это сделать, в документации Extension API, особенно в документации по пунктам вклада.

• конфигурация
• команд
• сочетаний клавиш
• языков
• отладчики
• грамматик
• тем
• фрагменты
• jsonValidation

Файлы и папки

Интегрированный терминал

Сочетание клавиш: ⌃` (Windows, Linux Ctrl + `)

Дополнительная литература:

Сочетание клавиш: ⌘B (Windows, Linux Ctrl + B)

Переключить панель

Сочетание клавиш: ⌘J (Windows, Linux Ctrl + J)

Режим дзен

Сочетание клавиш: ⌘K Z (Windows, Linux Ctrl + K Z)

Войдите в режим дзен без отвлекающих факторов.

Дважды нажмите Esc, чтобы выйти из режима Zen.

Редактирование бок о бок

Сочетание клавиш: ⌘ \ (Windows, Linux Ctrl + \)

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

Переключение между редакторами

Сочетание клавиш: ⌘1 (Windows, Linux Ctrl + 1), ⌘2 (Windows, Linux Ctrl + 2), ⌘3 (Windows, Linux Ctrl + 3)

Перейти в окно проводника

Сочетание клавиш: ⇧⌘E (Windows, Linux Ctrl + Shift + E)

Создать или открыть файл

Сочетание клавиш: Ctrl + щелчок (Cmd + щелчок в macOS)

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

Закройте текущую открытую папку

Сочетание клавиш: ⌘W (Windows Ctrl + F4, Linux Ctrl + W)

История переходов

Навигация по всей истории: ⌃Tab (Windows, Linux Ctrl + Tab)

Вернуться назад: ⌃- (Windows Alt + Left, Linux Ctrl + Alt + -)

Перейти вперед: ⌃⇧- (Windows Alt + Right, Linux Ctrl + Shift + -)

Файловые ассоциации

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

  "files.associations": {
    ".database": "json"
}  

Предотвращение грязной записи

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

Чтобы разрешить конфликт сохранения, щелкните действие Compare в сообщении об ошибке, чтобы открыть редактор различий, который покажет вам содержимое файла на диске (слева) по сравнению с содержимым в VS Code (на справа):

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

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

Монтажные хаки

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

Совет : Вы можете увидеть рекомендуемые расширения раскладки клавиатуры в представлении Extensions с помощью ⌘K ⌘M (Windows, Linux Ctrl + K Ctrl + M), который фильтрует поиск по @recommended: раскладки клавиатуры .

Выбор нескольких курсоров

Чтобы добавить курсоры в произвольные позиции, выберите позицию с помощью мыши и используйте Alt + щелчок (Option + щелчок в macOS).

Чтобы установить курсоры выше или ниже текущей позиции, используйте:

Сочетание клавиш: ⌥⌘ ↑ (Windows Ctrl + Alt + Up, Linux Shift + Alt + Up) или ⌥⌘ ↓ (Windows Ctrl + Alt + Down, Linux Shift + Alt + Down)

Вы можете добавить дополнительные курсоры ко всем вхождениям текущего выделения с помощью ⇧⌘L (Windows, Linux Ctrl + Shift + L).

Примечание. Вы также можете изменить модификатор на Ctrl / Cmd для применения нескольких курсоров с помощью параметра editor.multiCursorModifier . Подробнее см. Модификатор с несколькими курсорами.

Если вы не хотите добавлять все вхождения текущего выделения, вы можете вместо этого использовать ⌘D (Windows, Linux Ctrl + D).
При этом выбирается только следующее вхождение после выбранного вами, поэтому вы можете добавлять выборки один за другим.

Выбор столбца (прямоугольника)

Вы можете выделять блоки текста, удерживая Shift + Alt (Shift + Option в macOS) при перетаскивании мыши.В конец каждой выделенной строки будет добавлен отдельный курсор.

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

Вертикальные линейки

Вы можете добавить линейки вертикальных столбцов в редактор с помощью параметра editor.rulers , который принимает массив позиций символов столбца, в которых вы хотите использовать вертикальные линейки.

  {
  "editor.rulers": [20, 40, 60]
}  

Быстрая прокрутка

Нажатие клавиши Alt включает быструю прокрутку в редакторе и проводниках.По умолчанию для быстрой прокрутки используется 5-кратный множитель скорости, но вы можете управлять множителем с помощью параметра Editor: Fast Scroll Sensitivity ( editor.fastScrollSensitivity ).

Копировать строку вверх / вниз

Сочетание клавиш: ⇧⌥ ↑ (Windows Shift + Alt + Up, Linux Ctrl + Shift + Alt + Up) или ⇧⌥ ↓ (Windows Shift + Alt + Down, Linux Ctrl + Shift + Alt + Down)

Команды Копировать строку вверх / вниз не связаны в Linux, поскольку привязки клавиш по умолчанию VS Code будут конфликтовать с привязками клавиш Ubuntu, см. Проблему № 509.Вы по-прежнему можете настроить команды editor.action.copyLinesUpAction и editor.action.copyLinesDownAction на ваши собственные предпочтительные сочетания клавиш.

Перемещение строки вверх и вниз

Сочетание клавиш: ⌥ ↑ (Windows, Linux, Alt + Up) или ⌥ ↓ (Windows, Linux, Alt + Down)

Сжать / развернуть выделенную область

Сочетание клавиш: ⌃⇧⌘ ← (Windows, Linux Shift + Alt + Left) или ⌃⇧⌘ → (Windows, Linux Shift + Alt + Right)

Дополнительную информацию можно найти в документации по основному редактированию.

Перейти к символу в файле

Сочетание клавиш: ⇧⌘O (Windows, Linux Ctrl + Shift + O)

Вы можете сгруппировать символы по типу, добавив двоеточие, @: .

Перейти к символу в рабочей области

Сочетание клавиш: ⌘T (Windows, Linux Ctrl + T)

Общий вид

Структура структуры в проводнике (по умолчанию свернута внизу) показывает символы текущего открытого файла.

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

Переход к определенной строке

Сочетание клавиш: ⌃G (Windows, Linux Ctrl + G)

Отменить позицию курсора

Сочетание клавиш: ⌘U (Windows, Linux Ctrl + U)

Обрезка завершающего пробела

Сочетание клавиш: ⌘K ⌘X (Windows, Linux Ctrl + K Ctrl + X)

Команды преобразования текста

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

Форматирование кода

Текущий выбранный исходный код: ⌘K ⌘F (Windows, Linux Ctrl + K Ctrl + F)

Формат всего документа: ⇧⌥F (Windows Shift + Alt + F, Linux Ctrl + Shift + I)

Код складной

Сочетание клавиш: ⌥⌘ [(Windows, Linux Ctrl + Shift + [) и ⌥⌘] (Windows, Linux Ctrl + Shift +])

Вы также можете свернуть / развернуть все области в редакторе с помощью Fold All (⌘K ⌘0 (Windows, Linux Ctrl + K Ctrl + 0)) и Unfold All (⌘K ⌘J (Windows, Linux Ctrl + K Ctrl + J)).

Вы можете свернуть все комментарии блоков с помощью Свернуть все комментарии блоков (⌘K ⌘ / (Windows, Linux Ctrl + K Ctrl + /)).

Выбрать текущую строку

Сочетание клавиш: ⌘L (Windows, Linux Ctrl + L)

Перейти к началу и концу файла

Сочетание клавиш: ⌘ ↑ (Windows, Linux Ctrl + Home) и ⌘ ↓ (Windows, Linux Ctrl + End)

Открыть предварительный просмотр Markdown

В файле Markdown используйте

Сочетание клавиш: ⇧⌘V (Windows, Linux Ctrl + Shift + V)

Редактирование и предварительный просмотр Markdown бок о бок

В файле Markdown используйте

Сочетание клавиш: ⌘K V (Windows, Linux Ctrl + K V)

Предварительный просмотр и редактор синхронизируются с вашей прокруткой в ​​любом представлении.

IntelliSense

⌃ Пробел (Windows, Linux Ctrl + Пробел) для запуска виджета предложений.

Вы можете просмотреть доступные методы, подсказки по параметрам, краткую документацию и т. Д.

Подглядывать

Выберите символ, затем введите ⌥F12 (Windows Alt + F12, Linux Ctrl + Shift + F10). Как вариант, вы можете использовать контекстное меню.

Перейти к определению

Выберите символ и нажмите F12. Кроме того, вы можете использовать контекстное меню или Ctrl + щелчок (Cmd + щелчок в macOS).

Вы можете вернуться к предыдущему местоположению с помощью команды Go > Back или ⌃- (Windows Alt + Left, Linux Ctrl + Alt + -).

Вы также можете увидеть определение типа, нажав Ctrl (Cmd в macOS) при наведении курсора на тип.

Перейти к референции

Выберите символ, затем введите ⇧F12 (Windows, Linux Shift + F12). Как вариант, вы можете использовать контекстное меню.

Посмотреть все ссылки

Выберите символ, затем введите ⇧⌥F12 (Windows, Linux Shift + Alt + F12), чтобы открыть представление «Ссылки», в котором отображаются все символы вашего файла в специальном представлении.

Переименовать символ

Выберите символ и нажмите F2. Как вариант, вы можете использовать контекстное меню.

Поиск и изменение

Помимо поиска и замены выражений, вы

.Навигация по коду

в Visual Studio Code

Visual Studio Code имеет высокопроизводительный редактор кода, который в сочетании со службами языка программирования дает вам возможности IDE и скорость текстового редактора. В этом разделе мы сначала опишем функции языкового интеллекта VS Code (предложения, подсказки по параметрам, интеллектуальная навигация по коду), а затем покажем возможности основного текстового редактора.

Быстрая навигация по файлам

Совет: Вы можете открыть любой файл по его имени, набрав ⌘P (Windows, Linux Ctrl + P) ( Quick Open ).

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

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

Кроме того, вы можете использовать ⌃- (Windows Alt + Left, Linux Ctrl + Alt + -) и ⌃⇧- (Windows Alt + Right, Linux Ctrl + Shift + -) для перемещения между файлами и мест редактирования. Если вы прыгаете между разными строками одного и того же файла, эти ярлыки позволяют легко перемещаться между этими местами.

Панировочные сухари

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

«Панировочные сухари» всегда показывают путь к файлу и, с помощью языковых расширений, путь символа до позиции курсора. Показанные символы такие же, как в режиме Outline и Go to Symbol.

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

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

Вы можете отключить панировочные сухари с помощью переключателя View > Show Breadcrumbs или с помощью настройки breadcrumbs.enabled .

Настройка панировочных сухарей

Внешний вид панировочных сухарей можно настроить. Если у вас очень длинные пути или вас интересуют только пути к файлам или пути к символам, вы можете использовать настройки breadcrumbs.filePath и breadcrumbs.symbolPath . Оба поддерживают на , на и на последний , и они определяют, какую часть пути вы видите.По умолчанию в хлебных крошках отображаются значки файлов и символов слева от хлебных крошек, но вы можете удалить значки, установив для breadcrumbs.icons значение false.

Порядок символов в панировочных сухарях

Вы можете управлять порядком расположения символов в раскрывающемся списке «Панировочные сухари» с помощью параметров breadcrumbs.symbolSortOrder .

Допустимые значения:

• позиция — позиция в файле (по умолчанию)
• наименование — в алфавитном порядке
• тип — обозначение типа порядка

Навигация по клавиатуре Breadcrumb

Для взаимодействия с хлебными крошками используйте команду Focus Breadcrumbs или нажмите ⇧⌘.(Windows, Linux Ctrl + Shift +.). Он выберет этот последний элемент и откроет раскрывающийся список, в котором вы сможете перейти к файлу или символу-аналогу. Используйте сочетания клавиш ← (Windows, Linux влево) и → (Windows, Linux справа) для перехода к элементам до или после текущего элемента. Когда появится раскрывающийся список, начните вводить текст — все совпадающие элементы будут выделены, и для быстрой навигации будет выбран наиболее подходящий.

Вы также можете работать с панировочными сухарями без раскрывающегося списка. Нажмите ⇧⌘; (Windows, Linux Ctrl + Shift +;), чтобы сфокусироваться на последнем элементе, используйте ← (Windows, Linux слева) и → (Windows, Linux справа) для навигации и используйте пробел, чтобы открыть элемент в редакторе.

Перейти к определению

Если язык поддерживает это, вы можете перейти к определению символа, нажав F12.

Если нажать Ctrl и навести курсор на символ, появится предварительный просмотр объявления:

Совет: Вы можете перейти к определению с помощью Ctrl + Click или открыть определение сбоку с помощью Ctrl + Alt + Click.

Перейти к определению типа

Некоторые языки также поддерживают переход к определению типа символа путем выполнения команды Перейти к определению типа либо из контекстного меню редактора, либо из палитры команд .Это приведет вас к определению типа символа. Команда editor.action.goToTypeDefinition не привязана к сочетанию клавиш по умолчанию, но вы можете добавить свою собственную привязку клавиш.

Перейти к реализации

Languages ​​также могут поддерживать переход к реализации символа путем нажатия ⌘F12 (Windows, Linux Ctrl + F12). Для интерфейса здесь показаны все его реализаторы, а для абстрактных методов показаны все конкретные реализации этого метода.

Перейти к символу

Вы можете перемещаться по символам внутри файла с помощью ⇧⌘O (Windows, Linux Ctrl + Shift + O). Набрав: символы будут сгруппированы по категориям. Нажмите Вверх или Вниз и перейдите в нужное место.

Открыть символ по имени

Некоторые языки поддерживают переход к символу в файлах с помощью ⌘T (Windows, Linux Ctrl + T). Введите первую букву типа, к которому вы хотите перейти, независимо от того, в каком файле он содержится, и нажмите Enter.

Peek

Мы думаем, что нет ничего хуже большого переключения контекста, когда все, что вам нужно, — это быстро что-то проверить.Вот почему мы поддерживаем сторонних редакторов. Когда вы выполняете поиск Go to References (с помощью ⇧F12 (Windows, Linux Shift + F12)) или Peek Definition (с помощью ⌥F12 (Windows Alt + F12, Linux Ctrl + Shift + F10)), мы встроить результат в строку:

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

Совет: Кроме того, окно просмотра закрывается, если вы нажимаете Escape или дважды щелкаете в области редактора просмотра. Вы можете отключить это поведение с помощью параметра editor.stablePeek .

Кронштейн

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

Совет: Вы можете перейти к соответствующей скобке с помощью ⇧⌘ \ (Windows, Linux Ctrl + Shift + \)

Справочная информация

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

Совет: Вызовите действие Peek References напрямую, щелкнув эти аннотации.

Совет: Справочная информация, отображаемая в CodeLens, может быть включена или отключена с помощью параметра editor.codeLens .

Обозначение переименования

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

Ошибки и предупреждения

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

• В строке состояния отображается сводка всех ошибок и предупреждений.
• Вы можете щелкнуть сводку или нажать ⇧⌘M (Windows, Linux Ctrl + Shift + M), чтобы отобразить панель ПРОБЛЕМЫ со списком всех текущих ошибок.
• Если вы откроете файл с ошибками или предупреждениями, они будут отображаться вместе с текстом и на обзорной линейке.

Совет: Чтобы просмотреть ошибки или предупреждения в текущем файле, вы можете нажать F8 или ⇧F8 (Windows, Linux Shift + F8), чтобы отобразить встроенную зону с подробным описанием проблемы и возможных действий кода (если они доступны):

Код действий

Предупреждения и ошибки могут содержать действия кода (также известные как быстрые исправления), помогающие устранить проблемы.Они будут отображаться в редакторе на левом поле в виде лампочки. Щелчок по лампочке либо отобразит варианты действий кода, либо выполнит действие.

Следующие шаги

Теперь, когда вы знаете, как работает редактор, пора попробовать еще кое-что …

Общие вопросы

Как я могу автоматически выбрать вторую запись в Quick Open вместо первой?

С помощью команды workbench.action.quickOpenPreviousEditor вы можете автоматически выбрать вторую запись в Quick Open.Это может быть полезно, если вы хотите выбрать предыдущую запись из списка без необходимости вызывать другую привязку клавиш:

  {
"ключ": "ctrl + p",
"команда": "workbench.action.quickOpenPreviousEditor"
},
{
"ключ": "ctrl + p",
"команда": "-workbench.action.quickOpen"
}  

Как настроить Ctrl + Tab для навигации по всем редакторам всех групп

По умолчанию Ctrl + Tab позволяет перемещаться между редакторами одной и той же группы редакторов. Если вы хотите перемещаться по всем открытым редакторам во всех группах, вы можете создать сочетания клавиш для рабочей среды .Команды action.quickOpenPreviousRecentlyUsedEditor и workbench.action.quickOpenLeastRecentlyUsedEditor :

  {
    "ключ": "ctrl + tab",
    "команда": "workbench.action.quickOpenPreviousRecentlyUsedEditor",
    "когда": "! inEditorsPicker"
},
{
    "ключ": "ctrl + shift + tab",
    "команда": "workbench.action.quickOpenLeastRecentlyUsedEditor",
    "когда": "! inEditorsPicker"
}  

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

Вот список команд, которые можно использовать для навигации в редакторах, не открывая окно выбора:

10.09.2020

.