Преглед на Visual Studio Code за разработчици от предния край

Без значение дали сте начинаещ код или опитен разработчик, редакторът на кодове е наложителна част от вашата работа. Проблемът, особено ако сте начинаещ, е, че има много възможности за избор на IDE. И много от тях споделят подобни функции, функционалности и дори потребителски интерфейс. В резултат на това изборът на правилния IDE всъщност може да отнеме повече време и усилия, които сте мислили.

Ако вашият въпрос в момента е: „с кой редактор на кодове да започна?“, Тогава бих отговорил: „Зависи, приятелю“. Изборът на конкретен IDE значително зависи от няколко фактора: какъв тип разработчици сте, какви видове от среди, с които работите предимно, или дали имате ексклузивна вградена функция, която абсолютно трябва да свършите работата.

Бих казал, че начинът да изберете един е да опитате и да ги проучите всички, а след това да изберете това, което ви е най-подходящо.

Избор на подходящия редактор на код за вас

Както повечето новаци правят, аз започнах с Notepad ++ като първия си редактор на код. Това е може би една от най-простите IDE, които опитах. По-късно, тъй като моите нужди започнаха да изискват по-разширена функционалност от редактора, изпробвах Brackets, Atom, а след това Visual Studio Code.

След прилично количество експериментиране, VSCode ми стана любим. Впечатли ме с модерния си потребителски интерфейс, широката наличност на разширения, както и страхотни функции като вграден Git и терминал.

Основната цел на този блог не е да сравнява различни IDE, а да обсъди моя опит с VSCode. Така че в този пост ще:

  • покажете кратко въведение към VSCode
  • представете конкретната тема, която инсталирах
  • обсъдете полезни разширения, които използвам
  • да ви покажа как използвам функциите на VSCode, за да подобря работния си процес.

Нека влезем в него!

Но първо, какво е VSCode все пак?

Visual Studio Code (VSCode) е редактор на изходния код, разработен от Microsoft, който може да се изпълнява на Windows, macOS и Linux. Той е безплатен, с отворен код и осигурява поддръжка за отстраняване на грешки, както и вграден контрол на версиите на Git, подчертаване на синтаксиса, фрагменти и т.н. Потребителският интерфейс на VSCode е много адаптивен, тъй като потребителите могат да преминат към различни теми, клавишни комбинации и предпочитания.

VSCode първоначално беше анонсиран през 2015 г. като проект с отворен код, домакин на GitHub, преди да пусне в интернет година по-късно. Оттогава редакторът на кодове на Microsoft набира популярност сред разработчиците.

В проучването за разработчици на Stack Overflow 2018 VSCode беше класиран като най-популярната среда за развитие с около 35% от над 100 000 анкетирани, които казват, че го използват. По-изумителното е, че тази цифра е около 39% в областта на уеб разработката.

А с месечните актуализации потребителите могат да очакват да се насладят на още по-добро изживяване - поправки на грешки, стабилност и повишаване на производителността често се натискат.

Тема: Цвят и шрифт

Ако сте като мен и ви интересува темата на IDE ви, намирането на подходящ шрифт и цвят на тема е много важно. Аз лично предпочитам тъмна тема и мразя шрифта Consolas по подразбиране на VSCode в Windows.

Така че цветовата тема Monokai и шрифта FiraCode са моят текущ избор. Тази комбинация носи висок контраст, с който ми е много приятно да работя.

  • За да инсталирате тема, щракнете върху иконата за настройка => Цветна тема => Изберете темата, която харесвате
  • Намерете ръководството за инсталиране на FiraCode тук.
  • Можете също да разгледате OneDarkPro, друга страхотна тъмна тема: в Разширения (Ctrl + Shift + X за Windows), потърсете OneDarkPro, щракнете върху Инсталиране и го изберете от Цветовата тема.

Полезни разширения (Разширения => Търсене => Инсталиране)

Това са някои от любимите ми разширения:

  • Разкрасете: Разкрасете кода на място и направете вашия код по-четим
  • Brair Pair Colorizer: позволява съвпадение на скобите да се идентифицират с цветовете
Цветовете на (и {са разделени нали?
  • ESLint: задължително разширение за React или JavaScript разработчици като цяло. ESLint се използва за намиране на проблеми и печатни грешки във вашия код и ви позволява да маркирате тази грешка. Той също така предлага решения.
  • HTML фрагменти: добавете поддръжка на богат език за HTML маркирането, като например автоматично затваряне на тагове.
  • Кодови фрагменти на JavaScript (ES6): доста обясняващи се
  • Live Server: стартирайте локален сървър с функции за презареждане на живо за вашия HTML или PHP сайт
  • Подобрен преглед на Markdown: стартирайте на живо сървъра за вашия файл за маркиране.
  • Тема на материалната икона: предоставя икони въз основа на материал Дизайн на Google. За да активирате, щракнете върху Setting => Theme Icon Theme => Select Material Icon Theme
  • По-хубаво: красиво форматирайте своя JavaScript / TypeScript / CSS код.

Персонализирайте потребителския си интерфейс

Можете да персонализирате почти всичко - от семейството на шрифтовете и размера на шрифта на кода до височината на реда, като:

  • Отидете на Настройки на потребителя (Ctrl +,)
  • Търсене на ключови думи, свързани с желаното от вас персонализиране
  • Кликнете върху бутона Редактиране в лявата част на настройките и изберете Замени в Настройки
  • Промяна на стойността на избраната от вас настройка.

В настоящата си настройка зададох размер на шрифта на 14, ред височина до 22 и таб размер на 3 за моите лични предпочитания (и за добра четимост).

Неща, които бих искал да знам от самото начало

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

Интегрирани терминали

Неизбежно е, колкото повече време сте в разработването на софтуер, толкова по-важен става Терминалът. Като разработчик на JavaScript използвам терминала за инсталиране на пакети, пускане на сървъра за разработка или дори натискам промени в текущото си хранилище в GitHub.

В началото най-вече се грижих за тези задачи с командния ред на Windows или по-късно Git Bash. Ако използвате Windows, може би знаете колко тъп и досаден може да бъде CMD. Git Bash е приятен инструмент, но превключването между приложения, когато работите, всъщност не е приятно изживяване.

VSCode наистина решава този проблем за мен с фантастичния си терминал. И готиното е, че можете лесно да го настроите да работи по същия начин като Git Bash, но точно във VSCode! След това имате страхотна комбинация.

За достъп до терминала VSCode използвайте Ctrl + `(отляво на вашия 1 ключ). Тогава терминалът ще се появи.

От тук можете да направите много готини неща, като например да създадете нов терминал или да убиете съществуващия. Можете също да ги разделите, както и отстрани.

Хубаво е да имате вградени няколко терминала точно във вашия редактор на кодове, нали?

Източник Контрол (Git)

Когато работите над хранилище и постоянно трябва да правите промени, обикновено ще намерите терминала за извършване на скорошни промени, нали? Е, VSCode ви дава страхотен вграден инструмент за контрол на вашите версии.

Като щракнете върху иконата Git, разположена в левия панел или използвате Ctrl + Shift + G (Windows), имате лесен достъп до Source Control. Тук можете да направите всички Git неща. Толкова удобно, нали?

Как всички тези неща подобряват работния ми процес - и как могат да направят и вашия по-добър?

След приличен период от време, работещ с VSCode, силно вярвам, че ключовата му стойност се основава на неговата среда в едно. Всички мои нужди и задачи в рамките на работния ми процес като Front-end разработчик се обработват добре и безупречно.

За да направя тези предимства по-ясни, позволете ми да ви преведа през моя нормален работен процес.

Да речем, че имам няколко идеи, работещи върху ново приложение за музика, създадено от React. Обикновено стартирам проект, като създавам празна папка - така че ще създам нова папка с име music_react. След това мога веднага да отворя проекта във VSCode, като избера опция с десен бутон.

След като съм в моя работен проект, мога бързо да създам файла и папките с преки пътища в левия панел.

В този проект искам да използвам инициализацията create-react-app. Следователно може да се наложи да инсталирам този пакет - не е голяма работа. Отварям терминала си, като напиша Ctrl + `. Удивително е, че терминалът автоматично се насочва към точната ми директория. Вече няма нужда да сменяте директории.

След влизането в командния ред за инсталиране на пакета npm, всичко, което трябва да направя, е да изчакам, докато се инсталират всички зависимости.

Също така искам да публикувам проекта си в GitHub, така че вероятно първоначално трябва да инициализирам Git хранилище. След като пакетите са инсталирани, аз въвеждам команда за инициализация на Git точно в моя терминал.

След като Git бъде успешно инсталиран, мога да извърша всички чакащи промени направо в Source Control от левия панел.

Тогава мога да продължа да работя по моя проект като нормално. Освен това мога да натискам всички промени в GitHub от моя терминал, ако искам.

Обобщавайки

Това е моят нормален работен процес в VSCode среда. Разбирам, че това варира значително в зависимост от това какъв тип разработчици сте. Един бек-енд програмист може да има съвсем различен работен процес в сравнение с моя.

Ако обаче сте разработчик от предния клас, който тъкмо се запознава с VSCode и искате да го проверите, преди да влезете в него, надявам се, че тази статия ви дава представа и спомага за повишаване на производителността ви. В крайна сметка най-голямото ми вдъхновение да напиша тази малка насока е, защото всъщност не успях да намеря задълбочен преглед на VSCode за новодошлите. В резултат на това този блог се надяваме да ви донесе някаква стойност.

И накрая, ако настройката ви е различна от моята или има страхотни разширения, които смятате за приятно, не се колебайте да споделите в коментарите. Радвам се да чуя от вас!

Това е краят на този блог! Благодаря за четенето! Ако ви харесва, моля натиснете

Кажете здравей в SM: Facebook, Twitter, LinkedIn или моя личен сайт.

Следете бъдещите технологични блогове