8 Потужні розширення коду Visual Studio для розробників інтерфейсу

Хоча Microsoft випустила першу стабільну версію Visual Studio Code, її потужний редактор коду лише кілька місяців тому, до березня 2016 року, вона вже має багато доступних розширень, які можуть перенести досвід кодування на новий рівень. The офіційні розширення Visual Studio Code розміщено в коді Marketplace коду Visual Studio, багато з яких можуть бути корисними для веб-розробників.

Для цієї публікації я перевірив купу розширень VS-коду, пов'язаних з розробкою інтерфейсу, і зробив список тих, які найбільше знайшли інтуїтивно зрозумілий, зручний і зручний. Все це не є кінцевим списком. Витратьте час, щоб переглядати ринок для себе, і подивитися, що ще може запропонувати вам, тим більше, що багато великих розширень ще попереду.

Як встановити розширення VS коду

Встановлення розширення дуже просте в коді Visual Studio, як ви можете зробити це в редакторі коду. У VS Code Marketplace кожне розширення має свою сторінку, і ви можете знайти команду, яку ви можете встановити дане розширення, на верхній частині цієї сторінки.

Команда завжди починається з ext install термін. Щоб встановити розширення, просто натисніть CTRL + P в коді VS, щоб запустити панель швидкого відкриття, копіювати-вставити цю команду і в остаточному підсумку перезапустіть редактор коду зробити нову роботу.

8 Потужні розширення коду Visual Studio

1. HTML-фрагменти

   Якщо ви хочете часто писати HTML в коді Visual Studio, розширення HTML-фрагментів може стати зручним інструментом, як і його додає складну підтримку HTML. Хоча VS Code має базову підтримку HTML, наприклад розфарбовування синтаксису, розширення HTML-фрагментів знає набагато більше.

   

   Можливо, найкориснішою особливістю цього розширення є те коли ви починаєте вводити ім'я тега HTML (без початкової кутової дужки), фрагменти HTML швидко відображає список з доступних варіантів з короткою інформацією про кожного.

   

   Коли ви натискаєте потрібний елемент, фрагменти HTML додають повний тег HTML5 з найпоширенішими властивостями. Наприклад, якщо ви хочете додати посилання (anchor tag) до документа, просто введіть a у VS Code, виберіть правильний параметр у спливаючому вікні, а фрагменти HTML вставлять необхідні фрагмент у ваш редактор без будь-яких проблем.

   Автор цього розширення також звертає увагу на видалення застарілих елементів, тому, якщо ви хочете використовувати тег HTML, який ви не можете знайти у спливаючому списку, варто перевірити, чи є він чинним чи ні.

2. Завершення класу HTML CSS

   HTML CSS Завершення класів може бути корисним розширенням, якщо вам потрібно використовувати багато Класи CSS у вашому проекті. Це часто буває з нашими розробниками, що ми є не зовсім впевнений у точній назві класу, але він просто сидить у задній частині нашого розуму як пасивне знання.

   Це розумне розширення дає рішення для цієї проблеми, як це вибирає імена всіх класів CSS у поточній робочій області та відображає список про них.

   

   Скажімо, ви хочете створити сайт за допомогою Zurb Foundation, і ви хочете використовувати невелику сітку. Ви не пам'ятаєте, як саме класи називаються, але ви знаєте, що вони мають семантичні назви.

   З HTML CSS завершення класу вам потрібно тільки почати вводити слово невеликий, доступні опції з'являються на екрані одночасно, тому ви можете легко вибрати потрібний вам.

   

3. Перегляд у браузері

   Перегляд у браузері - це просте, але потужне розширення для коду Visual Studio. Це може полегшити розробку інтерфейсу, дозволяючи вам швидко перегляньте результат вашої роботи в браузері під час кодування. Ви можете відкрити свій HTML-файл у браузері за промовчанням безпосередньо з коду VS, натиснувши кнопку CTRL + F1 клавіш.

   Зауважте, що у вікні Перегляд у браузері підтримує лише HTML, тому, якщо ви хочете побачити свій сайт, потрібно відкрити файл HTML. ти не може безпосередньо отримати доступ до веб-переглядача з файлу CSS або JavaScript.

   

4. Відладчик для Chrome

   Відладчик для Chrome був побудований самою компанією Microsoft, і в даний час це четверте найчастіше завантажене розширення Visual Studio Code.

   Відладчик для Chrome дозволяє налагоджувати JavaScript у Google Chrome, не залишаючи редактор коду. Це означає, що вам не потрібно працювати з перекладеним JavaScript, який браузер бачить, але ви можете виконувати налагодження безпосередньо з оригінальних вихідних файлів. Дивіться цю демонстрацію, щоб дізнатися, як вона працює.

   

   Розширення має кожну функцію гідних потреб відладчика, таких як установка точки зупину, перегляд змінної, степінг, a зручна консоль налагодження, та багато інших (див. список функцій першого випуску).

   Щоб використовувати це розширення, потрібно запустити Chrome з віддалене налагодження включено, і створити власне launch.json файл. Останнє може зайняти деякий час, але ви можете знайти детальні інструкції щодо GitHub про те, як правильно це зробити.

5. JSHint

   Розширення JSHint коду Visual Studio Code інтегрує популярний інтерфейс JSHint JavaScript у редактор коду, так що ви можете бути поінформованим про ваші помилки, як тільки ви їх зробите. За замовчуванням розширення JSHint використовує типові параметри linter, які можна налаштувати за допомогою конфігураційного файлу.

   

   Використання цього розширення є досить простим, оскільки JSHint позначає помилки червоним, а повідомлення - зеленим. Якщо ви бажаєте отримати додаткову інформацію про проблеми, просто наведіть курсор миші на підкреслені частини, а JSHint одразу помістіть позначку з описом проблеми..

   

6. JQuery Фрагменти коду

   Фрагменти коду jQuery можуть значно прискорити розробку в коді Visual Studio, оскільки дозволяє швидко писати jQuery без основних помилок синтаксису. JQuery Фрагменти коду в даний час має близько 130 доступних фрагментів Ви можете викликати, ввівши правий тригер.

   

   Всі фрагменти jQuery, але один починається з jq префікс. Єдиним винятком є func викликати це вставляє анонімну функцію в редактор.

   Це зручне розширення - це зручна допомога, коли ви не зовсім впевнені в правильному синтаксисі, і хочете заощадити час на перевірку документації. Це також дозволяє легко прокручувати доступні опції.

   

7. Бауер

   Розширення Bower VS Code може зробити ваш робочий процес більш інтуїтивним, інтегруючи менеджер пакетів Bower у код Visual Studio.

   Якщо ви використовуєте це розширення не потрібно перемикатися між терміналом і редактором, але ви можете легко виконувати завдання керування пакунками безпосередньо в коді Visual Studio.

   

   Розширення Bower веде вас через створення вашого проекту bower.json Ви також можете встановлювати, видаляти, шукати, оновлювати пакунки, керувати кешем і виконувати багато інших завдань (див. повний список функцій)..

   Ти можеш звертайтеся до команд, пов'язаних з Bower, запустивши Палітру команд натисканням F1, введення тексту “Бауер” у рядку введення, натиснувши кнопку “Бауер” у списку, що з'явився, і вибравши відповідну команду Bower.

   

8. Історія Git

   Історія Git дозволяє слідкуйте за змінами проекту Git в коді Visual Studio. Це розширення особливо корисно, коли ви хочете внести свій внесок у більший проект Github, і потрібна можливість швидко перевірити зміни, зроблені іншими розробниками.

   З розширенням історії Git можна встановити перегляд історії всього файлу або певної лінії всередині. Ви також можете порівняти попередні версії одного файлу.

   

   Ви можете отримати доступ до команд, пов'язаних з історією Git, якщо ви введете слово “Git” до палітри команд (F1), виберіть “Git” у випадаючому списку і, нарешті, виберіть потрібну команду. Зверніть увагу на це Вам потрібно відкрити файл до якого ви хочете переглянути історію, перш ніж ви зможете виконувати будь-які дії на ній.