Visual Studio Code: кому и зачем он нужен

Недав­но мы бесе­до­ва­ли с Анной Лео­но­вой о её пути в про­грам­ми­ро­ва­нии. Аня пишет код в редак­то­ре Visual Studio Code и сего­дня поде­лит­ся сво­и­ми настрой­ка­ми. Вы узна­е­те, как уста­но­вить про­грам­му и под­го­то­вить её для ком­форт­ной работы. 

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

👉 Интер­вью с Анной Лео­но­вой 

Что за Visual Studio Code?

Это попу­ляр­ная бес­плат­ная про­грам­ма для раз­ра­бот­чи­ков, кото­рая помо­га­ет писать код. Например:

  • Зна­ет син­так­сис раз­ных язы­ков про­грам­ми­ро­ва­ния и помо­га­ет вам не оши­бить­ся в точ­ке с запя­той или скобочке.
  • Сама под­став­ля­ет неко­то­рые рас­про­стра­нён­ные фраг­мен­ты кода.
  • Пом­нит назва­ния ваших пере­мен­ных и под­ска­зы­ва­ет их, что­бы не было ошибок.
  • Уме­ет загру­жать ваш код на Гит.
  • Помо­га­ет отла­жи­вать код.
  • Под­дер­жи­ва­ет пла­ги­ны, кото­рые пре­вра­ща­ют её в мега­ком­байн для разработчика.

VSCode — один из самых попу­ляр­ных редак­то­ров кода, пото­му что он бес­плат­ный и откры­тый, его мож­но сде­лать каким угод­но под свои зада­чи. Есть и дру­гие: напри­мер, Sublime Text или про­дук­ты ком­па­нии JetBrains. 

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

Установка 

Перей­ди­те на code.visualstudio.com и ска­чай­те акту­аль­ную вер­сию редак­то­ра под свою опе­ра­ци­он­ную систе­му — есть под­держ­ка для Linux, Windows и Mac OS. Далее про­сто сле­дуй­те коман­дам программы-загрузчика и открой­те редактор.

Приветственное окно Visual Studio Code после установки При­вет­ствен­ное окно Visual Studio Code после установки 

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

❌ Нович­ки часто выби­ра­ют редак­тор мето­дом тыка: ска­чи­ва­ют несколь­ко про­грамм, визу­аль­но оце­ни­ва­ют их интер­фейс и начи­на­ют рабо­тать там, где им кажет­ся удоб­нее или кра­си­вее. Ред­ко быва­ет так, что про­грам­ми­ста устра­и­ва­ет стан­дарт­ный интер­фейс и настрой­ки — нович­ки в этом слу­чае пры­га­ют меж­ду раз­ны­ми редак­то­ра­ми, срав­ни­ва­ют их базо­вые воз­мож­но­сти и теря­ют время. 

✅ Выби­рай­те редак­тор, кото­рый мож­но как угод­но изме­нять и настра­и­вать. Нра­вит­ся внеш­ний вид Sublime Text, но не хва­та­ет мощи VS Code — нет про­блем: нахо­ди­те тему, меня­е­те шрифт, добав­ля­е­те пару рас­ши­ре­ний и гото­во. Что­бы быст­ро осво­ить VS Code, изу­чай­те интер­фейс по документации. 

Настройка

VS Code готов к рабо­те сра­зу после уста­нов­ки — в него по умол­ча­нию добав­ле­но боль­шин­ство пла­ги­нов для веб-разработки. Мож­но сра­зу загру­зить про­ект или начать про­грам­ми­ро­вать в новом фай­ле. Нуж­но толь­ко при­вык­нуть к интерфейсу. 

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

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

Уста­нав­ли­ва­ем рус­ский язык. На левой боко­вой пане­ли нажми­те Extensios и в стро­ке поис­ка напи­ши­те Russian Language Pack — это язы­ко­вой пакет, кото­рый адап­ти­ру­ет VS Code под рус­ский язык. Выбе­ри­те рас­ши­ре­ния, клик­ни­те Install и пере­за­пу­сти­те редак­тор. У вас дол­жен открыть­ся руси­фи­ци­ро­ван­ный интерфейс.

Языковой пакет Russian Language Pack Язы­ко­вой пакет Russian Language Pack 

Если после пере­за­груз­ки язык не изме­нил­ся — на левой боко­вой пане­ли нажми­те зна­чок шесте­рён­ки и выбе­ри­те раз­дел Command Palette. Появит­ся стро­ка поис­ка: напи­ши­те Display, выбе­ри­те коман­ду Configure Display Language и нажми­те Enter. Сме­ни­те язык с англий­ско­го на рус­ский и повтор­но пере­за­гру­зи­те редактор. 

Приветственное окно Visual Studio Code после установки языкового пакета При­вет­ствен­ное окно Visual Studio Code после уста­нов­ки язы­ко­во­го пакета 

Меня­ем цве­то­вую тему. В левой боко­вой пане­ли нажми­те на зна­чок шесте­рён­ки, перей­ди­те в раз­дел «Цве­то­вая тема» и выбе­ри­те тему, встро­ен­ную в редактор. 

Если ниче­го не нра­вит­ся — уста­но­ви­те любую внеш­нюю тему, кото­рую полу­чит­ся най­ти в интер­не­те. Если тема сов­ме­сти­ма с VS Code, то после ска­чи­ва­ния она сама откро­ет­ся в редак­то­ре и вам доста­точ­но нажать «Уста­но­вить». Начать поиск реко­мен­ду­ем с офи­ци­аль­но­го мар­кет­плей­са, где собра­ны тыся­чи бес­плат­ных тем.

Анна Леонова рекомендует тему Night Owl — ночная сова. Её мы и поставили для теста Анна Лео­но­ва реко­мен­ду­ет тему Night Owl — ноч­ная сова. Её мы и поста­ви­ли для теста 

Добав­ля­ем люби­мый шрифт. В боко­вой пане­ли нажми­те на шесте­рён­ку, выбе­ри­те раз­дел «Пара­мет­ры» → «Тек­сто­вый редак­тор» → «Шрифт». Перед вами будет вклад­ка Font Family, в кото­рую нуж­но впи­сать назва­ние выбран­но­го шриф­та — если этот шрифт ска­чан или сохра­нён в опе­ра­ци­он­ной систе­ме, то он сра­зу отоб­ра­зит­ся в редак­то­ре. Здесь же мож­но изме­нить раз­мер и жир­ность шрифта. 

Меняем стандартный шрифт Visual Studio Code на Courier New Меня­ем стан­дарт­ный шрифт Visual Studio Code на Courier New 

Вклю­ча­ем авто­со­хра­не­ние. В боко­вой пане­ли выбе­ри­те шесте­рён­ку, перей­ди­те в «Пара­мет­ры» → «Тек­сто­вый редак­тор» → «Фай­лы». Вы уви­ди­те вклад­ку Auto Save, в кото­рой нуж­но ука­зать пери­од сохра­не­ния фай­лов. Мы реко­мен­ду­ем режим afterDelay с задерж­кой в одну секун­ду — так вы буде­те сра­зу сохра­нять всё, что запи­ше­те. Если вы выбе­ре­те режим onFocusChange, то изме­не­ния в рабо­чем фай­ле будут сохра­нять­ся каж­дый раз, когда вы буде­те откры­вать дру­гие вклад­ки редак­то­ра. В режи­ме onWindowChange изме­не­ния про­ис­хо­дят сра­зу после того, когда вы сво­ра­чи­ва­е­те VS Code и откры­ва­е­те окна дру­гих программ.

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

Горячие клавиши

Горя­чие кла­ви­ши — это помощ­ник про­грам­ми­ста и инстру­мент для быст­ро­го выпол­не­ния рутин­ных задач. Пред­по­ло­жим, нам нуж­но создать новый HTML-файл и напи­сать его струк­ту­ру. Без горя­чих кла­виш этот про­цесс выгля­дит так: 

  1. Пере­хо­дим в меню и откры­ва­ем вклад­ку «Файл». 
  2. Выби­ра­ем коман­ду «Новый файл».
  3. Воз­вра­ща­ем­ся в меню и повтор­но откры­ва­ем вклад­ку «Файл».
  4. Нахо­дим коман­ду «Сохра­нить как». 
  5. Пишем назва­ние фай­ла, выби­ра­ем место хра­не­ние, ука­зы­ва­ем рас­ши­ре­ние (HTML) и нажи­ма­ем кноп­ку «Сохра­нить».
  6. Вруч­ную про­пи­сы­ва­ем ске­лет HTML-документа или тра­тим вре­мя, что­бы най­ти и ско­пи­ро­вать струк­ту­ру из интернета. 

Мы пре­вра­ти­ли про­стую зада­чу в мно­го­этап­ный про­цесс, где нуж­но посто­ян­но отры­вать руки от кла­ви­а­ту­ры, хва­тать­ся за мыш­ку и искать нуж­ные коман­ды в выпа­да­ю­щем спис­ке. Теперь посмот­рим, как это же дей­ствие мож­но выпол­нить с помо­щью горя­чих кла­виш. Для при­ме­ра мы исполь­зу­ем Mac OS — в дру­гих систе­мах горя­чие кла­ви­ши будут немно­го отли­чать­ся, но сути это не меняет: 

  1. Command + N — созда­ём новый файл. 
  2. Shift + Command + S — вклю­ча­ем коман­ду «Сохра­нить как». 
  3. Пишем назва­ние фай­ла, выби­ра­ем место хра­не­ния, ука­зы­ва­ем рас­ши­ре­ние (HTML) и нажи­ма­ем кноп­ку «Сохра­нить».
  4. ! + tab — созда­ём струк­ту­ру HTML-документа и можем работать. 

С горя­чи­ми кла­ви­ша­ми мы сокра­ти­ли коли­че­ство рутин­ных дей­ствий и быст­ро выпол­ни­ли про­стую зада­чу — созда­ли HTML-файл и напи­са­ли струк­ту­ру. В слу­чае с объ­ём­ны­ми про­ек­та­ми горя­чие кла­ви­ши помо­га­ют сэко­но­мить часы работы. 

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

Для про­смот­ра всех горя­чих кла­виш нажми­те в боко­вой пане­ли на шесте­рён­ку и выбе­ри­те раз­дел «Соче­та­ния кла­виш». Или вос­поль­зуй­тесь горя­чи­ми кла­ви­ша­ми и нажми­те Command + K + Command + S. Перед вами появит­ся длин­ный спи­сок с назва­ни­ем команд и ком­би­на­ци­ей кно­пок, кото­рые уста­нов­ле­ны по умол­ча­нию — любую коман­ду мож­но пере­про­грам­ми­ро­вать или най­ти с помо­щью поисковика. 

Что дальше

А даль­ше про­чи­тай­те нашу ста­тью про Vim и под­клю­чи­те его к сво­е­му VSCode 🙂

Текст:

Саша Бабас­кин

Редак­тор:

Мак­сим Ильяхов

Кор­рек­тор:

Ира Михе­е­ва

Иллю­стра­тор:

Даня Бер­ков­ский

Вёрст­ка:

Маша Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев