πŸš€ 12 супСрплагинов VS Code для JavaScript-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

ΠœΡ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ»ΠΈ арсСнал инструмСнтов Π² VS Code ΠΈ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π°Ρ…ΠΎΠ΄ΠΊΠ°ΠΌΠΈ. Π­Ρ‚ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ ΠΌΠ΅Π½ΡΡŽΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π° JavaScript. ОсобСнно Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΠΈΠ» Bito – ΠΎΠ½ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ вСсь ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ Π΄Π°Π΅Ρ‚ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ подсказки.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» взят ΠΈΠ· нашСй СТСнСдСльной email-рассылки, посвящСнной Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Ρƒ. ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² числС ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΡ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ дайдТСст.

Bito

Bito – ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ИИ-Π½Π°ΠΏΠ°Ρ€Π½ΠΈΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°: Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ GitHub Copilot, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ подсказки Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° основС ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², Bito Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ, прСдоставляя Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ контСкстно-зависимыС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ. Плагин Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ускоряСт Ρ€Π°Π±ΠΎΡ‚Ρƒ, сниТаСт Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ€ΡƒΡ‚ΠΈΠ½Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° написании ΠΊΠΎΠ΄Π°. Основная Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ:

  • ПониманиС всСй ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ‹.
  • ΠœΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹Π΅ подсказки – ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ подходящиС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π° прямо Π² строкС Π²Π²ΠΎΠ΄Π°.
  • АвтоматичСская ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΊΠΎΠ΄Π° – ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с Ρ€Π΅Π²ΡŒΡŽ ΠΊΠΎΠ΄Π°, находя ошибки ΠΈ давая совСты ΠΏΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡŽ.
  • CLI-интСрфСйс для Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bito Chat.
  • Удобная Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠ° – Π΅ΡΡ‚ΡŒ Π΄Π°ΡˆΠ±ΠΎΡ€Π΄Ρ‹ для отслСТивания Π²ΠΊΠ»Π°Π΄Π° Ρ‡Π»Π΅Π½ΠΎΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Quokka.js

Quokka.js – настоящий ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Β«Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΒ» прямо Π²Π½ΡƒΡ‚Ρ€ΠΈ VS Code, нСвСроятно ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ инструмСнт для быстрого тСстирования JavaScript-ΠΊΠΎΠ΄Π° Π±Π΅Π· нСобходимости ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΡƒΡŽ срСду. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ выполнСния ΠΊΠΎΠ΄Π° Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, прямо ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Π½Π°Π±ΠΎΡ€Π° – это ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ экспСримСнтировании с Π½ΠΎΠ²Ρ‹ΠΌΠΈ идСями ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅ слоТной Π»ΠΎΠ³ΠΈΠΊΠΈ. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ особСнности:

  • МгновСнная обратная связь ΠΏΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ ΠΊΠΎΠ΄Π°.
  • ΠœΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ прямо Π² строкС Π±Π΅Π· нСобходимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ консоль.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° синтаксиса ES6 ΠΈ TypeScript.
  • Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ срСда для быстрого создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

Thunder Client

Thunder Client – удобная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Postman для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ часто Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с API: встраиваСтся прямо Π² VS Code. ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ возмоТности:

  • ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ ΠΈ быстроС тСстированиС REST API прямо Π² VS Code.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° основных Ρ‚ΠΈΠΏΠΎΠ² HTTP-запросов – GET, POST, PUT, DELETE.
  • Π£Π΄ΠΎΠ±Π½ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ коллСкциями API-запросов – ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… окруТСния – пригодится, Ссли Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹ΠΌΠΈ API ΠΈΠ»ΠΈ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ срСдами (тСстовой ΠΈ ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½).
  • Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π² JSON ΠΈ XML для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ читаСмости.

Prettier

Prettier – инструмСнт для автоматичСского форматирования ΠΊΠΎΠ΄Π°. Он особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с JavaScript, Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈ для ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… языков, Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π²ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ:

  • АвтоматичСскоС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ – ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊΠΎΠ΄ Π² порядок ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ отступы, расставляСт ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΈ пСрСносы строк.
  • Π•Π΄ΠΈΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ‹ – обСспСчиваСт ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π²ΠΎ всСх Ρ„Π°ΠΉΠ»Π°Ρ… ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Git – ΠΌΠΎΠΆΠ΅Ρ‚ автоматичСски Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠΌ.
  • ΠΠ°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ – Ссли Π½Π΅ нравятся стандартныС настройки форматирования, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ свои прСдпочтСния.

Import Cost

Import Cost ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ JavaScript-Ρ„Π°ΠΉΠ»Π°:

  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ/ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ прямо Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°.
  • ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ быстро ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ зависимости Ρ€Π°Π·Π΄ΡƒΠ²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.
  • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π½Π° JavaScript ΠΈ TypeScript.
  • Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€.
  • ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π°Π½Π΄Π»Π°, прСдлагая Π±ΠΎΠ»Π΅Π΅ Π»Π΅Π³ΠΊΠΈΠ΅ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹.
УвСсистыС ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π΅ останутся Π½Π΅Π·Π°ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΌΠΈ

ESLint

ESLint ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ чистым, Π±Π΅Π·ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½Ρ‹ΠΌ ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ:

  • Находит синтаксичСскиС ошибки ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с качСством ΠΊΠΎΠ΄Π°.
  • ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ соблюдСниС стандартов кодирования ΠΈ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ.
  • Π›Π΅Π³ΠΊΠΎ настраиваСтся ΠΏΠΎΠ΄ ваши прСдпочтСния ΠΈΠ»ΠΈ стандарты ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ… Π² ΠΊΠΎΠ΄Π΅ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ прямо Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.
  • Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Prettier, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ² стилСй.

Live Server

Live Server запускаСт Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ сСрвСр Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ автоматичСского обновлСния: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ сохраняСтС измСнСния Π² ΠΊΠΎΠ΄Π΅, Live Server автоматичСски обновляСт страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ сразу Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ выглядит вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ возмоТности:

  • ΠœΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹ΠΉ прСдпросмотр HTML/CSS /JavaScript ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
  • АвтоматичСскоС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»ΠΎΠ².
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° настройки ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠΎΡ€Ρ‚ΠΎΠ².
  • ВСстированиС статичСского ΠΈ динамичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

ES7+ React/Redux/React-Native snippets

Π­Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ прСдоставляСт Π½Π°Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° (сниппСтов) для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с React, Redux ΠΈ React Native. ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ:

  • УскоряСт написаниС ΠΊΠΎΠ΄Π°, автоматичСски гСнСрируя структуры ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².
  • Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ сниппСты для React Ρ…ΡƒΠΊΠΎΠ², Redux дСйствий ΠΈ Ρ€Π΅Π΄ΡŒΡŽΡΠ΅Ρ€ΠΎΠ².
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ JavaScript ΠΈ TypeScript.
  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ сниппСтов ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹.
ВсС сниппСты снабТСны ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ описаниями
πŸ‘¨β€πŸ’»πŸŽ¨ Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€Π°
Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π½Π° нашСм Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ-ΠΊΠ°Π½Π°Π»Π΅ Β«Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€Π°Β»

Wallaby.js

Wallaby.js – ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт для тСстирования JavaScript-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ:

  • ЗапускаСт тСсты JavaScript ΠΈ TypeScript Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… тСстов прямо Π² VS Code.
  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΊΠΎΠ΄Π° тСстами.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ для тСстирования, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Jest ΠΈ Mocha.
  • ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅, подсвСчивая ошибки прямо Π² вашСм ΠΊΠΎΠ΄Π΅.
Wallaby.js Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ускоряСт ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ ΠΊΠΎΠ΄Π°

Console Ninja

Console Ninja – Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ console.log для ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ: это ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ вСрсия ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ консоли, которая Π΄Π΅Π»Π°Π΅Ρ‚ Π²Ρ‹Π²ΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для Π°Π½Π°Π»ΠΈΠ·Π°. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ возмоТности:

  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ console.log Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°/Node прямо Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ, подсвСтку ΠΈ поиск Π² Π»ΠΎΠ³Π°Ρ… консоли.
  • АвтоматичСски ΠΎΡ‡ΠΈΡ‰Π°Π΅Ρ‚ Π»ΠΎΠ³ΠΈ послС выполнСния для удобства ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ.
  • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с JavaScript, TypeScript ΠΈ Node.js.
  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ/Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈ для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ.

Auto Rename Tag

Auto Rename Tag – лСгковСсный ΠΏΠ»Π°Π³ΠΈΠ½ для автоматичСского рСдактирования ΠΏΠ°Ρ€Π½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² Π² Ρ„Π°ΠΉΠ»Π°Ρ… HTML, JSX ΠΈ XML:

  • АвтоматичСски ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ°Ρ€Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ HTML/XML.
  • Π­ΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ врСмя ΠΏΡ€ΠΈ Ρ€Π΅Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΈΠ½Π³Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².
Auto Rename Tag ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ²

GitLens

GitLens замСняСт стандартныС возмоТности Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΏΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ с Git, ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ процСсс Ρ€Π°Π±ΠΎΡ‚Ρ‹ максимально ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ. Плагин особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅: ΠΎΠ½ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ развивался ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΊΡ‚ΠΎ внСс Ρ‚Π΅ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Π΅ измСнСния, ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹Π»ΠΈ приняты ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ возмоТности:

  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΡ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ строку ΠΊΠΎΠ΄Π° ΠΈ ΠΊΠΎΠ³Π΄Π°.
  • ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² для Ρ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ строки прямо Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΠΈ Git blame для быстрого понимания, ΠΊΡ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ участок ΠΊΠΎΠ΄Π°.
  • Π’ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Git ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
  • ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ с GitHub ΠΈ GitLab.
***

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒ свои знания Π²ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅? ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° курсы ΠΎΡ‚ Proglib Academy:

  • КомплСксная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° обучСния: ΠΎΡ‚ основ HTML ΠΈ CSS Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ JavaScript ΠΈ React
  • ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄: Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈΠ· индустрии
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… ΠΌΠ΅Π½Ρ‚ΠΎΡ€ΠΎΠ² Π½Π° протяТСнии всСго обучСния
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρƒ Π² сфСрС Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π›Π£Π§Π¨Π˜Π• БВАВЬИ ПО Π’Π•ΠœΠ•

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° программиста
24 сСнтября 2017

6 сСрвисов для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π±Π»ΠΎΠΊ-схСмами

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΈ быстрСС Π΅Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π°...