Плагіни для visual studio code. ✨ Розширення для Visual Studio Code, які піднімуть процес розробки на новий рівень. Як настроїти автоматичне оновлення сторінки для PHP-файлів за допомогою Live Server

Текстові редактори, створені з урахуванням web-технологій, переживають справжній бум. Atom, VS Code, Brackets, подібно до монстрів року, завойовують популярність серед web-розробників (чекай, який там зараз на календарі рік у «популярних монстрів року»? 🙂 - Прим. ред.). На них переходять як із IDE, так і просто з нативних редакторів. Причина гранично проста: репозиторії кишать корисними плагінами, а відсутні кожен може створювати самостійно, застосовуючи суто web-технології.

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

На смак автора

Ваш покірний слуга використав усі перелічені редактори і зрештою зупинився на VS Code. Причин тут кілька, але головна – продуктивність. У Microsoft чудово постаралися і, незважаючи на пізній вихід (VS Code з'явився на сцені останнім), встигли зібрати довкола себе величезну спільноту. Це позитивно позначилося на плагінах: деякі з них, на мій погляд, на голову вищі за альтернативи для Atom. У зв'язку з цим у тексті огляду мелькатимуть назви розширень саме для VS Code. Посилання на наближений за функціональністю варіант для Atom буде наведено нижче. Не дивуйся, якщо скопіювавши назву плагіна і запустивши пошук по репозиторію Atom, ти нічого не знайдеш. Використовуйте посилання з опису.

Причини популярності

Редактори, побудовані на веб-технологіях, мають приблизно ті самі проблеми. Одна з основних – продуктивність. Розробники працюють над швидкістю роботи редакторів, але будемо чесними – з цією проблемою навряд чи вдасться впоратися на 100%. Нативні рішення, як і раніше, обганяють у швидкодії, і це варто враховувати при виборі редактора.

Ну добре, продуктивність нативних рішень поза конкуренцією. За рахунок чого тоді нові «легковажні» редактори підкорили стільки сердець розробників? Головний аргумент «за» – технологічний стек. Що означає розробити плагін для якогось Sublime або Notepad ? Правильно, доведеться розібратися з C, Python (тут може бути будь-яка інша мова програмування), редактора SDK та іншими не потрібними по основній роботі речами.

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

Ідея створення редакторів на веб-технологіях для майстрів цих технологій ефективно вирішила проблему бідної екосистеми сторонніх модулів. Сторонні веб-розробники швидко підхопили хвилю і розпочали створення необхідних їм примочок. Результати неважко простежити – офіційні репозиторії набиті плагінами для найрізноманітніших завдань. Створювати нові плагіни стало простіше: більше не треба вивчати чужорідну мову програмування, JavaScript цілком достатньо.

На жаль, за легкість доопрацювання функціональності редактора доводиться платити продуктивністю та ресурсами. Легкі редактори часто вимагають більше системних ресурсів і не готові помірятися силами з нативними в швидкодії. За час тестування Atom із джентльменським набором розширень примудрявся обігнати споживання пам'яті WebStorm.

Сніпетети

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

VS Code:

Atom:

Обгортка для HTML

При описі розмітки сторінки постійно доводиться обертати блоки, тобто вкладати один блок до іншого. Написав розмітку блоку, а потім зрозумів, що для зручності стилізації краще обернути його на додатковий блок. Зробити нескладно: пишемо тег, що відкриває, на самому початку, промотуємо блок до кінця і ставимо закриваючий тег. Є лише одна проблема – на великих блоках це робити незручно. Є всі шанси поставити "закришку" не туди і поламати розмітку. Аналогічна проблема виникає при стилізації окремих шматків тексту. Спробуй швидко вставити численні теги, що відкривають і закривають, і не збожеволіти. Впоратися з труднощами допоможуть плагіни htmltagWrapі Atom wrap in tag. З їх допомогою рішення зведеться до виділення шматка коду/рядка та натискання комбінації гарячих клавіш.

• VS Code: htmltagwrap
• Atom: Atom wrap in tag

Звикаємо до гарячих клавіш

При переході на новий редактор/IDE завжди стикаєшся з однією проблемою - треба вивчати нові гарячі клавіші. Тільки звик до одних комбінацій, як бац – і все по-іншому. На звичні дії починаєш витрачати більше часу, ніж зазвичай, і вкотре замислюєшся, чи доцільно взагалі переходити на щось нове. Впевнений, розробники, які розпочинали свою кар'єру 10–15 років тому, неодноразово стикалися з подібним, тому вони однозначно оцінять міць плагінів з біндингами клавіш популярних редакторів. Суть проста: звик до розкладки гарячих клавіш Visual Studio - хитаєш відповідний плагін, і новий редактор починає відгукуватися на звичні команди.

VS Code:

Atom:

Автокомпліт для файлів

За замовчуванням жоден редактор не надає функції автозавершення імен файлів під час їх підключення. Часто це буває причиною помилок. Доводиться пам'ятати повний шлях до розташування файлу. Якщо проект складніший, ніж Hello world, то файли згруповані за декількома директоріями, і для вказівки шляху доведеться користуватися послугами менеджера файлів. Не дуже зручно. Простіше підключити автокомплит за допомогою плагінів AutoFileName та autocomplete+. Потім залишиться лише набирати перші літери імені файлу/директорії, після чого плагін запропонує варіанти для встановлення.

• VS Code: AutoFileName
• Atom: autocomplete+ paths suggestions

Лінтери

Сучасний процес розробки немислимий без автоматизації. Якщо щось можна автоматизувати та перекласти на інструменти – це варто зробити. Без усіляких лінтерів у фронтенді нікуди, тому при роботі над черговим проектом треба відразу подбати про підключення рішень на кшталт ESLint, HTMLHint, CSSLint,<твой_линтер>. Лінтери контролюють стиль написання коду і у разі невідповідності конфігу миттєво вкажуть на помилки.

Особливо корисні лінтери у командній розробці, коли шанси отримати «різношерстий» код збільшуються в рази. Потрібні приклади? Будь ласка! Між JS-розробниками постійно йде суперечка про вибір лапок. Одні – прихильники одинарних, інші – подвійних, а треті підтримують ідею протилежних. Лінтери допоможуть домогтися одноманітності та вчасно сповістити розробника, що збився зі шляху.

Продовження доступне лише учасникам

Варіант 1. Приєднайтесь до спільноти «сайт», щоб читати всі матеріали на сайті

Членство у спільноті протягом зазначеного терміну відкриє тобі доступ до ВСІХ матеріалів «Хакера», збільшить особисту накопичувальну знижку та дозволить накопичувати професійний рейтинг Xakep Score!

Розглянемо найкращі плагіни редактора Visual Studio Code для Web-розробки у 2020 році.

1. Live Server
2. Auto Close Tag
3. Import Cost
4. Material Theme
5. Apache Conf
6. Russian Language Pack
7. Невеликий бонус

1. Live Server

Увімкнення Live Server для .html або .htm файлів:

Увімкнення Live Server, якщо немає.html або.htm файлів:

Як настроїти автоматичне оновлення сторінки для PHP-файлів за допомогою Live Server

2. Sass

Підтримка синтаксису Sass: відступи, автозаповнення та інше

Компілює SASS / SCSS файли в CSS в режимі реального часу

Для включення потрібно натиснути Watch Sassу статус барі

Що включає в себе Live Sass Complier:

1. вибір папки експорту файлу, що компілюється
2. вибір стилю CSS(розширений, компактний, стислий, вкладений)
3. вибір імені розширення (.css або.min.css)
4. сумісність із розширенням Live Server
5. налаштування автоматичного проставлення вендорних префіксів
6. та інше

Виділення тегів - відкриває та закриває

Підсвічування виділення тегів можна кастомізувати під себе. Моє налаштування:

"highlight-matching-tag.leftStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) , "highlight-matching-tag.rightStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) ,

Виділення web-квітів у редакторі відповідним кольором

Розширення підфарбовує симетричні дужки однаковим кольором, але відмінним від інших дужок.

При зміні одного парного тега, другий буде змінено автоматично.

За промовчанням розширення працює для всіх мов, щоб змінити дане налаштуваннявикористовуйте наступний код:

"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ] ,

8. Auto Close Tag

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

За промовчанням працює для всіх мов: HTML, PHP, JavaScript, markdown, liquid і т.д. Можна змінити налаштування в setting.json

"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , ​​"liquid" , ]

9. Import Cost

Це розширення відображатиме вбудований у редакторі розмір імпортованого пакета.

10. Material Theme

Одна з найпопулярніших тем для VS Code. Також можна встановити шрифт, що підтримує лігатури (перетворення послідовності символів в єдиний елемент)

Тоді налаштування для settings.json будуть такими

"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,

11. Apache Conf

Підтримка синтаксису Apache. Зручно для редагування файлів із розширеннями .htaccess. Також підтримує типи файлів: .conf, .htgroups, .htpasswd

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

Як і більшість сучасних IDE, VSCodeмає багато доповнень, що розширюють його вихідні можливості. Ми відібрали 15 плагінів, які будуть корисні для будь-якого програміста, який працює в цьому редакторі.

Open-In-Browser

За замовчуванням, в Visual Studio Codeнемає можливості відкрити файл у браузері. Дане розширення не тільки додає функцію "Відкрити в браузері", але й дозволить відкрити файли в будь-якому браузері, що встановлено на комп'ютері.

Quokka

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

Faker

Дозволяє швидко вставляти випадкові дані (довільні імена, адреси, зображення, телефонні номерита ін) у код. Кожна категорія має свої підрозділи, що дозволяє більш точно підлаштуватися під потреби програміста.

CSS Peek

З цим плагіном ви можете відстежувати визначення класів та id у CSS файлі. Для цього потрібно натиснути правою кнопкою миші на селекторі у вашому HTML файлі та вибрати Go to Definition(Перейти до визначення) або Peek definition(Підглянути визначення).

HTML Boilerplate

HTML Boilerplateспрощує роботу з HTML, позбавляючи необхідності самому писати теги headі body. Наберіть у порожньому файлі html, натисніть на клавішу Tab і Visual Studio Codeзгенерує шаблон документа!

Prettier

Prettier– популярний у web-розробників редактор коду, що дозволяє наводити код, написаний різними людьми, до єдиного вигляду. У налаштуваннях Prettierможна встановити автозапуск, що дозволить одразу форматувати код, написаний на JS та CSS.

Color Info

Невеликий плагін, який видає коротку довідку про кольори, що використовуються в CSS. Навівши курсор на назву кольору, ви можете побачити, як він виглядає та як його написати в інших колірних форматах (hex, rgb, hslі cmyk).

SVG Viewer

Це розширення дозволить працювати з SVG файлами: ви зможете редагувати SVG файли, конвертувати їх у PNG форматта створювати data URL схеми.

TODO Highlight

Це доповнення дозволяє вам проставляти мітки в недороблені місця в коді, що спрощує проект. За замовчуванням задані лише мітки TODO(доробити) та FIXME(виправити), але ви можете створювати свої власні типи міток.

Шрифти з іконками

Розширення, що додає Visual Studio Codeпідтримку близько 20 популярних іконкових шрифтів, у тому числі Font Awesome , Ionicons, Glyphicons, Material Design...

Minify

Утиліта для оптимізації та стиснення коду. Minifyпрацює з HTML, JSі CSSфайлами і відмінно поєднується з такими плагінами, як uglify-js, clean-cssі html-minifier.

Change Case

VS Codeдозволяє приводити виділене тільки до верхнього та нижнього регістрів. За допомогою Change Case, Ви отримаєте доступ до великої кількості регістрів (зміїний, верблюжий та ін).

Regex Previewer

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

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

Так само, як і більшість IDE, VSCode має свій магазин розширень, що містить тисячі плагінів різної якості. Щоб допомогти вам вибрати ті, які варто завантажити, ми зробили цю колекцію розширень, які ми знайшли найкориснішими та найцікавішими.

VSCode не пропонує інтегрований інтерфейс для відкриття файлів безпосередньо в браузері. Це розширення додає елемент контекстного меню «Відкрити в браузері» контекстне меню, а також команди для відкриття у вибраному клієнті (Firefox, Chrome, IE).

Quokka - це інструмент налагодження, який дає пряму Зворотній зв'язокза кодом, який ви пишете. Він показує попередній переглядрезультатів функцій та обчислених значень для змінних. Розширення легко налаштовується та працює з коробки з проектами JSX або TypeScript.

Швидко вставляйте дані заповнювача за допомогою популярної бібліотеки JavaScript Faker. Ви можете створювати випадкові імена, адреси, зображення, номери телефонів чи просто параграфи класичного Lorem Ipsum. Кожна категорія має різні підкатегорії, тому ви можете зробити дані придатними для ваших потреб.

Використовуючи це розширення, ви можете відстежувати визначення класів CSS та ідентифікаторів у таблицях стилів. Коли клацніть правою кнопкою миші на селекторі у своїх HTML-файлах, виберіть опції «Перейти до визначення», а визначення «Peek» надішле вам код CSS, в якому ви їх створили.

Розширення HTML-шаблону позбавить вас необхідності вручну записувати теги head і body нового HTML-документа. Просто введіть html в порожній файл, натисніть клавішу Tab, і буде створено чисту структуру документа.

Prettierє найпопулярнішим форматором коду серед веб-розробників. Він дозволяє коду вашої команди виглядати однаково незалежно від того, хто його написав. Це розширення дозволяє автоматично застосовувати Prettierта швидко форматувати всі документи JSі CSS. Якщо ви також хочете використовувати ESLint, є Prettier - Eslint.

Невеликий плагін, який дає вам різну інформаціюпро кольори, які ви використовували у CSS. Наведіть вказівник миші на колір, ви побачите велике вікно з цим кольором, а також кодування його у всіх форматах (hex, rgb, hsl і cmyk).

Цей інструмент відзначає всі коментарі TODOу вашому коді, що полегшує відстеження будь-якого незавершеного фрагмента перед тим, як перейти до продакшену. За замовчуванням він шукає ключові слова TODOі FIXMEале ви також можете додати свої власні вирази.

Крихітні сніпети для увімкнення шрифтів значків у вашому проекті (з CDN), а потім додавання самих значків. Розширення підтримує понад 20 найпопулярніших наборів іконок, включаючи шрифти Awesome, Ionicons, Glyphiconsі Material Design Icons.

Розширення для мінімізації коду. Він пропонує тонну налаштувань налаштування та можливість автоматичної мінімізації при збереженні та експорті до файлу.min. Minify працює з JavaScript, CSS та HTML через uglify-js, clean-css та html-minifier відповідно.

VSCodeмає обмежені можливості перетворення тексту. З коробки він може робити тільки малі та великі перетворення. Цей плагін додає набагато більше команд для модифікації рядків, включаючи camelCase, kebab-case, snake_case, CONST_CASE та інші.

Корисний інструмент для тестування регулярних виразів. Він працює, застосовуючи шаблон регулярного вираження над будь-яким текстовим файломвідкритим у редакторі, виділяючи всі збіги. Ніби RegExrале прямо всередині вашого редактора!