VS Code: подробный обзор для разработчиков WordPress

Microsoft получает плохую репутацию. За прошедшие годы они заработали репутацию немного отстающих от времени и менее удобных для пользователя. Много лет назад они, возможно, даже заслужили это. Но не больше. Последние разработки Microsoft кроссплатформенны, интуитивно понятны и расширяют границы технологий. Вот где появляется Visual Studio Code. С момента своего выпуска в 2015 году VS Code стал де-факто редактором кода для многих разработчиков, выбрав Sublime Text и Atom в качестве лучших вариантов. И это о многом говорит. Итак, давайте разберемся, почему VS Code так хорош и как Microsoft вернула нам все наше доверие.

Код Visual Studio: открытый исходный код и любовь к нему

На первый взгляд Visual Studio Code похож на большинство других редакторов. Подсветка синтаксиса, темная тема, расширения и т. Д. Но если копнуть немного глубже, вы увидите, что в отличие от многих других редакторов и IDE, опыт, который вы получаете в VS Code, просто гладкий и - простите за каламбур - возвышенный.

Самый большой плюс VS Code - это открытый исходный код. Но опять же, как и Atom (и технически он тоже принадлежит Microsoft, поскольку они приобрели GitHub). Более того, Microsoft выпустила его по лицензии MIT, самой мягкой и открытой из всех лицензий с открытым исходным кодом. Для компании, которая исторически довольно жестко относилась к патентам и интеллектуальной собственности, это огромный шаг.

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

Универсальная IDE?

Вот вопрос часа: VS Code - это редактор кода или IDE? Он имеет встроенную интеграцию с Git, доступ к терминалу и bash, консоль отладки, а также особый вид подсветки синтаксиса и автозавершения кода под названием IntelliSense.

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

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

Кроме того, наличие среды разработки Visual Studio является причиной того, что разработчики называют ее VS Code или просто Code, а не Visual Studio. В противном случае это было бы слишком запутанно.

Код VS: Из коробки

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

Когда вы открываете редактор в первый раз, вы заметите две вещи:

• Макет и дизайн аналогичны другим редакторам и поэтому знакомы большинству людей.
• Он загружается быстрее, чем большинство других редакторов кода (Atom, мы смотрим в вашу сторону)

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

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

1. Исследователь

Вашим представлением по умолчанию в VS Code будет вкладка Explorer . В нем вы увидите раздел под названием « Открытые редакторы» , на сленге VS Code для документов. Каждый открытый файл считается новым редактором. Итак, если у вас открыто 8 файлов .css, вы увидите список из 8 редакторов.

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

2. Поиск

Функция поиска в VS Code феноменальна. Дело не в том, что он более мощный, чем другие редакторы (потому что я должен быть честным: я обожаю Найти / Заменить в Sublime Text). Дело в том, что это проще и прозрачнее, чем в других редакторах.

Когда вы выполняете поиск, каждый экземпляр вашего поискового запроса находится в нижней части правого столбца. Затем вы можете щелкнуть один экземпляр, чтобы выделить местоположение поискового запроса в файле. (Если вы нажмете CTRL / CMD-Click, откроется второй экземпляр файла, выделив только что выбранную строку.)

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

3. Git

Я собираюсь начать с того, что я, вероятно, предвзято отношусь к Git. Я обычно использую командную строку / bash, и графические клиенты для Git никогда не казались мне подходящими. Так что большая часть интеграции Git с другими редакторами и IDE не была моей чашей чая. Однако реализация VS Code представляет собой гибрид командной строки и графического интерфейса пользователя, и она работает на удивление хорошо, независимо от того, какую версию Git вы предпочитаете. Получить… версию Git?

Особенность интеграции Git в VS Code заключается в том, что она просто работает. Левый столбец, который появляется, когда вы щелкаете значок Git, является визуальным индикатором состояния вашего репо. Вы можете щелкнуть многоточие (…), чтобы просмотреть команды Git, которые обычно нужно вводить очень конкретно. Вы можете добавлять, фиксировать, отправлять и даже изменять свои поэтапные файлы и работать с различными ветвями через контекстное меню.

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

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

4. Консоль отладки

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

В результатах вы можете найти отладчики для всего, что только можно вообразить. JavaScript, CoffeeScript, Coffee, Java… действительно, все сценарии, написанные под брендом кофеина. Вы получаете среды LUA и Python и Ruby, Docker, PHP, SASS, LESS и… все. Из всех малоизвестных и / или мертвых языков программирования, для которых я пытался найти отладчик, QBasic был единственным, который не дал никаких результатов. И никто не использовал его очень давно. Я действительно думаю, что вам будет сложно найти что-то в современном мире, недоступное на рынке расширений.

5. Торговая площадка расширений

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

Вы можете сортировать и искать по ключевым словам, используя параметр @sort . Но вы также можете щелкнуть многоточие (2), чтобы открыть раскрывающийся список со всеми вашими параметрами. Здесь также есть возможности для управления собственными установленными расширениями.

Как только вы найдете то, что хотите установить, это сделать очень просто. Нажмите зеленую кнопку Установить ,

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

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

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

Сочетания клавиш и раскладки клавиатуры

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

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

Независимо от того, откуда вы при переходе на VS Code, сообщество вас позаботится. Будь то VIM, Emacs, Sublime Text или даже Notepad ++, вы можете сохранить привычные сочетания клавиш и раскладки клавиатуры. Вы можете выполнить поиск на рынке расширений с помощью @recommended: раскладки клавиатуры или зайти в Файл - Настройки - Раскладки клавиатуры, чтобы открыть список доступных расширений.

И если вы не предпочитаете ярлыки, это тоже нормально. Если вы чувствуете необходимость настроить что-либо (или просто хотите краткое изложение того, какие сочетания клавиш доступны в VS Code по умолчанию), вы можете перейти в Файл - Настройки - Сочетания клавиш .

Разное. Особенности, о которых вы должны знать

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

1. Меню выбора

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

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

2. Меню терминала

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

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

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

3. Режим дзен

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

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

Трудно продемонстрировать режим с помощью снимка экрана, потому что он не может действительно показать, что весь экран покрыт редактором VS Code. Даже панель задач Windows и док-станция MacOS. Каждый пиксель площади экрана занят вашим текущим проектом, так что вы можете сосредоточиться на нем и ни на чем другом.

А если это не для вас, просто нажмите ESC, и вы вернетесь к своему старому виду.

Это может показаться не таким уж большим, и раньше я был скептиком. Но после использования аналогичной функции в Scrivener для написания художественной литературы я стал новообращенным. Вам будет легче войти в состояние потока и действительно добиться цели. Так много похвалы VS Code за реализацию режима Zen Mode, чтобы мы могли подключить наушники и работать, не отвлекаясь, когда захотим (или столько, сколько сможем).

Заключение

Учитывая все обстоятельства, было бы упущением не загрузить Visual Studio Code и не попробовать. Microsoft выпустила, возможно, самый стабильный, наиболее поддерживаемый, самый быстрый и пропорционально легкий / многофункциональный редактор. Новые программисты, опытные разработчики или любители, которые хотят найти правильные инструменты ... VS Code был создан для вас. Это нелегкий подвиг, но поскольку он есть, VS Code стоит бит и байтов на вашем жестком диске. И, возможно, еще раз взгляните на Microsoft, если бы вы заранее списали их со счетов.

Какие аспекты VS Code вам больше всего нравятся? Вы переключились?