Работа с VISUAL STUDIO CODE

Thank you for reading this post, don't forget to subscribe!

Visual Studio Code - это сре­да раз­ра­бот­ки от ком­па­нии Microsoft, создан­ная совсем недав­но с исполь­зо­ва­ни­ем новых тех­но­ло­гий (напри­мер Node.js). В отли­чие от пол­но­го паке­та Visual Studio, эта сре­да пред­став­ля­ет собой тек­сто­вый редак­тор с воз­мож­но­стью под­клю­че­ния огром­но­го коли­че­ства пла­ги­нов. Она пред­на­зна­че­на для раз­ра­бот­ки на раз­лич­ных язы­ках про­грам­ми­ро­ва­ния и для раз­ных плат­форм. Под­дер­жи­ва­ют­ся не толь­ко Windows, но и Linux, а так­же MacOS.

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

Интер­фейс про­грам­мы типи­чен для мно­гих редак­то­ров кода. Но есть и свои осо­бен­но­сти. Услов­но глав­ное окно про­грам­мы мож­но раз­де­лить на семь частей:

Имен­но эти­ми участ­ка­ми вы буде­те поль­зо­вать­ся во вре­мя рабо­ты с VS Code:

  1. Глав­ное меню про­грам­мы - мож­но исполь­зо­вать для досту­па к настрой­кам, откры­тия про­ек­тов и папок и мно­го­го другого;
  2. Левая панель - эта панель есть толь­ко в VS Code, она поз­во­ля­ет пере­клю­чать­ся меж­ду про­смот­ром дере­ва ката­ло­гов, поис­ком, отлад­кой и окном уста­нов­ки допол­не­ний. Сюда же неко­то­рые рас­ши­ре­ния добав­ля­ют свои меню, напри­мер Docker, Git и рас­ши­ре­ние для управ­ле­ния проектами.
  3. Про­вод­ник - по умол­ча­нию здесь отоб­ра­жа­ет­ся дере­во ката­ло­гов, но тут же вы обна­ру­жи­те настрой­ки отлад­ки или доступ­ные для уста­нов­ки рас­ши­ре­ния, если выбран соот­вет­ству­ю­щий пункт на боко­вой панели.
  4. Рабо­чая область - здесь выпол­ня­ет­ся редак­ти­ро­ва­ние файла.
  5. Мини кар­та - поз­во­ля­ет быст­ро ори­ен­ти­ро­вать­ся по откры­то­му исходнику.
  6. Ниж­няя панель - здесь отоб­ра­жа­ет­ся вывод про­грам­мы при выпол­не­нии, кон­соль самой Visual Code, а так­же здесь есть встро­ен­ный терминал.
  7. Ста­тус бар - отоб­ра­жа­ет­ся общая инфор­ма­ция о состо­я­нии программы.

2. РУСИФИКАЦИЯ VISUAL STUDIO CODE

По умол­ча­нию сре­да уста­нав­ли­ва­ет­ся на англий­ском язы­ке. Луч­ше так всё и оста­вить: боль­шин­ство инфор­ма­ции по про­грам­ми­ро­ва­нию в интер­не­те на англий­ском язы­ке, и, если вы при­вык­ни­те к тако­му фор­ма­ту, вам будет про­ще во всём этом ори­ен­ти­ро­вать­ся. Но если вас инте­ре­су­ет, как руси­фи­ци­ро­вать Visual Studio Code, то дела­ет­ся это очень про­сто. На боко­вой пане­ли клик­ни­те по знач­ку с квад­ра­ти­ка­ми, кото­рый отве­ча­ет за уста­нов­ку допол­не­ний, и набе­ри­те в поле поис­ка vscode-language-pack-ru; ути­ли­та най­дёт толь­ко один пакет, нажми­те Install, что­бы уста­но­вить его:

Для выбо­ра язы­ка нажми­те Ctrl+Shift+P и нач­ни­те наби­рать Config, в пред­ло­жен­ном спис­ке выбе­ри­те Configure Display Language

Затем выбе­ри­те ru и пере­за­пу­сти­те про­грам­му. Всё. После это­го интер­фейс про­грам­мы ста­нет русским.

3. ВНЕШНИЙ ВИД

Одна из важ­ных вещей для сре­ды раз­ра­бот­ки - её внеш­ний вид и тема оформ­ле­ния. Что­бы изме­нить тему оформ­ле­ния, надо нажать соче­та­ние Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открыв­шем­ся меню оста­лось выбрать нуж­ную тему стрел­ка­ми и нажать Enter. По умол­ча­нию доступ­но несколь­ко тём­ных и свет­лых тем:

Ска­чать новые темы мож­но с офи­ци­аль­но­го сай­та Visual Studio Code. Здесь же мож­но настро­ить тему иконок.

4. УПРАВЛЕНИЕ ПРОЕКТАМИ

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

Здесь отоб­ра­жа­ет­ся спи­сок доступ­ных про­ек­тов. Что­бы запом­нить теку­щую пап­ку в каче­стве про­ек­та, клик­ни­те по знач­ку с дис­ке­той и вве­ди­те имя проекта:

После это­го вы смо­же­те очень про­сто управ­лять сво­и­ми проектами.

5. АВТО-ФОРМАТИРОВАНИЕ КОДА

Один из самых важ­ных момен­тов в рабо­те с кодом - это его одно­об­ра­зие. При­во­дить код к одно­му виду вруч­ную не все­гда удоб­но - для это­го и были при­ду­ма­ны раз­лич­ные рас­ши­ре­ния. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Уста­но­ви­те их через меню уста­нов­ки допол­не­ний, а затем исполь­зуй­те соче­та­ние кла­виш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того что­бы выпол­нять вырав­ни­ва­ние кода Visual Studio Code.

6. АВТОДОПОЛНЕНИЕ

Очень силь­но помо­га­ет в раз­ра­бот­ке авто­ма­ти­че­ское допол­не­ние кода. Вы пиши­те нача­ло сло­ва, а сре­да сама вам под­ска­зы­ва­ет, чем его мож­но завер­шить. Паке­ты, кото­рые поз­во­ля­ют выпол­нять авто­до­пол­не­ние, назы­ва­ют­ся *-intellisense. Реко­мен­ду­ет­ся уста­но­вить PHP Intellisense,  CSS Intellisense и Path Intellisense для авто­до­пол­не­ния путей к фай­лам. Для раз­ных фрейм­вор­ков суще­ству­ют свои рас­ши­ре­ния авто­ма­ти­че­ско­го допол­не­ния кода, напри­мер, для Laravel есть Laravel Extra Intellisense. Под­свет­ка син­так­си­са обыч­но уже встро­е­на в VS Code для мно­гих язы­ков, одна­ко если её нет, тоже ищи­те расширение.

7. УПРАВЛЕНИЕ VIM

Я при­вык к редак­то­ру Vim и хочу исполь­зо­вать его стиль вез­де, даже в Visual Studio Code. Если вы тоже хоти­те, для нас с вами есть рас­ши­ре­ние Vim, кото­рое пере­но­сит все соче­та­ния кла­виш и режи­мы рабо­ты Vim в редак­тор Visual Studio. После его уста­нов­ки вы смо­же­те пере­ме­щать­ся по фай­лу кноп­ка­ми h, jk, l, исполь­зо­вать Esc и сохра­нять файл коман­дой :w.

8. ОТЛАДКА КОДА

В Visual Code есть интер­фейс, с помо­щью кото­ро­го выпол­ня­ет­ся отлад­ка кода, но преж­де, чем вы его смо­же­те исполь­зо­вать для PHP, его при­дёт­ся настро­ить. Для отлад­ки кода на PHP исполь­зу­ет­ся отлад­чик Xdebug, поэто­му необ­хо­ди­мо уста­но­вить допол­не­ние PHP Debug. Далее клик­ни­те по тре­уголь­ни­ку со знач­ком жука на боко­вой пане­ли. Если вы рань­ше ниче­го не отла­жи­ва­ли в этом про­ек­те, то про­грам­ма пред­ло­жит вам создать файл launch.json. Клик­ни­те по этой ссыл­ке. В открыв­шем­ся спис­ке выбе­ри­те PHP:

В полу­чен­ном фай­ле надо обра­тить вни­ма­ние толь­ко на поле port. Он дол­жен быть такой же, как и зна­че­ние пере­мен­ной xdebug.remote_port в php.ini. У меня это 9008. Сохра­ни­те изме­не­ния и нажми­те зелё­ный тре­уголь­ник для нача­ла отладки.

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

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

Затем Xdebug под­клю­ча­ет­ся к VS Code по выбран­но­му нами пор­ту и пере­да­ёт туда всю необ­хо­ди­мую инфор­ма­цию. Толь­ко после это­го вы смо­же­те смот­реть пере­мен­ные и выпол­нять код пошагово:

9. ТЕРМИНАЛ

В завер­ше­нии пого­во­рим о чём-то более про­стом. Одно из пре­иму­ществ VS Code перед дру­ги­ми редак­то­ра­ми - это встро­ен­ный тер­ми­нал, кото­рый поз­во­ля­ет выпол­нять коман­ды в систем­ной обо­лоч­ке Linux или в выбран­ной обо­лоч­ке Windows. Если тер­ми­нал ещё не открыт, вы може­те сде­лать это с помо­щью Ctrl+Shift+P или из меню Тер­ми­нал -> Создать тер­ми­нал:

10. ИСПОЛЬЗОВАНИЕ GIT

Ещё одна очень полез­ная воз­мож­ность в Visual Studio Code - это инте­гра­ция с Git. Она рабо­та­ет по умол­ча­нию, и вам даже не надо ниче­го допол­ни­тель­но уста­нав­ли­вать. Доста­точ­но толь­ко, что­бы в дирек­то­рии с про­ек­том уже был ини­ци­а­ли­зи­ро­ван Git-репо­зи­то­рий. Все новые или изме­нён­ные фай­лы будут под­све­че­ны в проводнике.

Кро­ме того, вы може­те делать фик­са­цию изме­не­ний (ком­ми­ты) и отправ­лять изме­не­ния на сер­вер пря­мо в гра­фи­че­ском интер­фей­се. Сна­ча­ла надо доба­вить фай­лы в ком­мит: клик­ни­те по знач­ку раз­ветв­ле­ния на боко­вой пане­ли. Здесь отоб­ра­жа­ют­ся все изме­нён­ные фай­лы. Нажми­те + напро­тив фай­лов, кото­рые надо добавить:

Для того что­бы зафик­си­ро­вать изме­не­ния, набе­ри­те пояс­не­ние к коми­ту в тек­сто­вой стро­ке, затем нажми­те Ctrl+Enter или галоч­ку над тек­сто­вым полем:

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