Visual Studio Code (съкратено VSCode) се превърна в един от най-популярните редактори за работа с JavaScript, отчасти благодарение на постоянните усилия на Microsoft да поддържа няколко функции от кутията и да предоставя чести подобрения чрез актуализации, а също така благодаря към общността с отворен код, която създава голям набор от разширения, с които да работи, наред с други неща, JavaScript.

В предишната публикация писах за моите препоръчани разширения (пакети) React, можете да го прочетете тук.

Забележка: Ако се интересувате от изучаването на JavaScript, написах ръководство за започване на работа с JavaScript: Как да започнете с JavaScript през 2018 г. — От начинаещ до Full-Stack

VSCode предлага няколко страхотни пакета, които да допълнят вашето програмно изживяване в JavaScript, нека започнем обиколката на моя препоръчан избор!

Оцветител за двойки скоби

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

От описанието на страницата функциите включват:

Потребителски съвпадащи знаци

  • По подразбиране (), [] и {} се съпоставят, но могат да се конфигурират и персонализирани знаци в скоби.
  • Може да се конфигурира списък с цветове, както и конкретен цвят за осиротели скоби.
  • Езикова поддръжка, предоставена от Prism.js: http://prismjs.com/#languages-list

екранна снимка:

"По-хубава"

Prettier е JavaScript, TypeScript и CSS форматиране за VSCode с интеграция на ESLint.

За да активирате интегрирането на ESLint, отидете на Preferences-›Seetings и добавете следния конфигурационен обект:

{ "prettier.eslintIntegration": true, }

ESLint

Както обикновено, когато кодираме с помощта на React като наша предна рамка, ние пишем ES6 код, който не е строго въведен, нито компилиран предварително, така че е лесно да се въведат синтактични грешки, които не са очевидни до момента на изпълнение. За да разреши тези проблеми, eslint е задължителен инструмент, който проверява най-често срещаните видове грешки, докато пишете.

vscode-икони

Пренесете икони във VSCode за по-привлекателен външен вид!.

Автоматично импортиране — ES6,TS,JSX,TSX

Това разширение ни позволява автоматично да намираме и завършваме кода за целия наличен импорт, докато въвеждаме. Много полезно при създаване на нов компонент, индекс на модул или всяка друга част от JS код, който се нуждае от импортиране от външен модул. Работи и за JavaScript ES6 и TypeScript.

Автоматично затваряне на етикет

Това е просто разширение, което изпълнява една единствена задача, затваряйки тагове в HTML маркиране. Но колкото и просто да звучи, ако нещо липсва в обикновена инсталация на VSCode и улеснява живота ви, когато пишете уеб съдържание. Това работи с обикновен HTML код, както и с JSX.

„Git Lens“

Друго страхотно разширение за VSCode за работа с Git. Подобно на Git History, той предоставя регистър на промените за всеки файл и разклонение, които имаме в проекта, върху който работим, но също така предоставя и други полезни функции, като текуща вина за ред в края на всеки ред код.
Сайтът на Git Lens в Market Place предлага списък с някои от функциите:

  • GitLens Explorer за навигация и изследване на хранилища или файлови хронологии
  • изглед на GitLens Results по заявка за изследване на търсения на ангажименти, визуализиране на сравнения между клонове, тагове, ангажименти и др.
  • обектив за код за авторство, показващ най-скорошния комит и # автори в горната част на файловете и/или на кодовите блокове
  • ненатрапчива анотация за обвиняване на текущия ред в края на реда пояснения за обвиняване при поискване, включително топлинна карта, за целия файл
  • подробна информация за обвиненията, достъпна чрез задържане
  • анотации за последните промени при поискване, за да маркирате редове, променени от най-скорошния комит
  • анотация за вина в лентата на състоянието, показваща автора и датата за текущия ред
  • търсене на ангажимент — по съобщение, автор, име на файл, идентификатор на ангажимент или промени в кода
  • много мощни команди за изследване на ангажименти и истории, сравняване и навигиране на ревизии, достъп до скривалище, състояние на хранилище и т.н.
  • и много повече

Благодарим ви, че прочетохте тези препоръки и се наслаждавайте на кодирането!. Пазете се и ще се видим следващия път!.

Първоначално публикувано в fullstackengine.net на 5 юли 2018 г.