Плагины для верстки vs code

03.09.202203.09.2022 admin 0 Comments

Плагины для верстки vs code

10 Расширений VS Code Insider для веб разработки 2020

Детище Microsoft — Visual Studio Code — сохранит лидирующую позицию среди редакторов и ИСР на 2020 год. От огромного сообщества на его маркетплейс постоянно поступают крутые расширения, помогающие повысить продуктивность веб разработки.

Тем не менее большинство статей, посвящённых расширениям VS Code, рекомендуют одни и те же 10–15 вариантов. Они без сомнений хороши, но есть и другие, менее известные, но не менее полезные расширения, о которых я вам и расскажу.

1. Git Graph

Git Graph позволяет визуализировать граф из вашего репозитория в VS Code. Его внешний вид можно настроить по своему усмотрению. Что касается рейтинга, то он имеет 5 из 5 звёзд и 250 000 загрузок.

Если бы мне нужно было порекомендовать вам только одно расширение, то безусловно выбрал бы Git Graph!

2. Rest-Client

Многие из вас наверняка знакомы с такими сервисами тестирования API, как Postman или Insomnia. Но зачем использовать дополнительные программы, если можно обойтись VS Code? Для этого в нём имеется расширение Rest-Client. Вот некоторые из его возможностей:

3. Auto Close Tag

Auto Close Tag — это хороший пример небольшого расширения, дающего существенный прирост продуктивности.

Как и предполагает название, оно добавляет закрывающий тег, когда вы печатаете закрывающую скобку в открывающем теге. Это расширение поддерживает HTML, Handlebars. XML, PHP, JavaScript, TypeScript, JSX и другие языки.

4. Peacock

Расширение Peacock было разработано Джоном Папа, который хорошо известен по работе в сообществе Pluralsight.

5. TabNine

TabNine из числа моих любимых расширений. Оно использует искусственный интеллект и машинное обучение для содействия более грамотного кода и дополнительно предоставляет хорошо подходящие варианты автозавершения.

Работает оно прямо из коробки без необходимости дополнительных настроек и имеет очень низкое время отклика (обычно вы получаете предположение в течение 10 мс).

6. Polacode

Я открыл для себя Polacode в ноябре 2019 и до сих пор жалею, что не раньше. Это очень полезное расширение я теперь использую постоянно.

Что же оно делает? Оно делает скриншоты выделенного кода и удаляет из них такие элементы, как предупреждения или указания на ошибки. Это особенно полезно для блогеров вроде меня и для тех, кто желает поделиться сниппетами кода с друзьями, коллегами по разработке или сообществом.

7. TODO Highlight

Возможно, такая ситуация вам знакома: вы добавили заметки “надо сделать” (to-do) повсюду в коде и забыли к ним вернуться, прежде чем отправили код в продакшн. TODO Highlight помогает предотвратить подобную ошибку, выделяя ваши заметки и напоминая о том, что осталась незавершённая работа.

8. Quokka.js

По большому счёту Quokka — это электронный черновик, выступающий в роли площадки быстрого прототипирования в редакторе. В то время как вы печатаете код, он обновляет значения среды выполнения, помогая тем самым с отладкой и проверкой новых функций программы.

Коммьюнити-версия Quokka является бесплатной, но существует также и Pro версия, имеющая расширенные возможности. Если вы ещё не знакомы с этим расширением, то однозначно рекомендую его попробовать.

9. Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 раскрашивает парные скобки в различные цвета. При этом вы сами выбираете, какие именно и в какие цвета красить.

Текущая версия является оптимизированным вариантом первой и имеет повышенную скорость и точность.

10. Shades of Purple

Это не только расширение, но ещё и профессиональная тема для редактора. Оно чрезвычайно популярно среди пользователей VS Code и имеет 5 из 5 звёзд на маркетплейсе.

В нём реализованы отборные насыщенные фиолетовые тона для редактора и терминала. Мне очень нравится эта тема! Вы можете со мной не согласится, если не особо жалуете этот цвет, но если он вам по вкусу, то тема точно понравится! К тому же это расширение имеет полноценную документацию.

Заключение

Я рад, что вы дочитали! Надеюсь, с помощью этих расширений вы сможете улучшить свою среду разработки. Только будьте осторожны: настройка редактора может легко перерасти в прокрастинацию, а наша конечная цель — написание кода.

Набор начинающего веб-разработчика: плагины Chrome и VS Code

Новичку сложно разобраться в многообразии инструментов и расширений. Мы отобрали только самые полезные плагины для браузера и редактора.

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

Предлагаем вам подборку действительно полезных расширений, которые могут здорово облегчить разработку для веба. Она будет полезна как начинающим, так и опытным специалистам.

Вы найдете здесь плагины для Google Chrome и VS Code. Если в своей работе вы используете другой браузер или редактор исходного кода, не беда! Скорее всего, эти инструменты доступны и для них.

Плагины для Google Chrome

Веб-девелопер проводит очень много времени, изучая свои и чужие проекты через консоль разработчика. Эти плагины помогут сэкономить немного времени:

Плагины для Visual Studio Code

VS Code – один из самых популярных редакторов среди веб-разработчиков, однако перечисленные плагины (или их аналоги) можно найти и для других программ:

Набор инструментов

Каждый разработчик со временем формирует собственный «рабочий чемоданчик». Возможно, какие-то плагины из перечисленных найдут свое место в вашем. Отбирайте инструменты с умом, изучайте их, используйте на полную катушку, а ненужные безжалостно отбрасывайте.

16 полезных плагинов JavaScript в VS Code

Большую часть времени разработчик творит код в редакторе. Редактор кода Visual Studio Code сам по себе помогает работать быстрее. Например, он подчёркивает ошибки красным цветом и выдаёт подсказки. Но процесс можно сделать ещё приятнее: достаточно установить нужное расширение.

Плагинов VS Code очень много, и здесь мы расскажем об одних из самых популярных. Все они пригодятся при работе с JavaScript.

ESLint

Это линтер, то есть программа, которая проверяет код на наличие синтаксических ошибок. ESLint анализирует ваш код, выделяет ошибки и предлагает пути их исправления. Конечно, в VS Code уже есть встроенная система IntelliSense, которая выдаёт подсказки. Но ESLint как нельзя лучше подойдёт, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js. Кроме того, линтер можно встроить в систему проверки кода и перед отправкой материалов в репозиторий ещё раз убедиться, что всё в порядке.

Bracket Pair Colorizer

Помогает не утонуть во вложенных скобках. Расширение подсвечивает парные скобки случайным цветом, чтобы их легко было найти.

Better Align

Все значения выравниваются относительно оператора = и находятся на одном уровне, независимо от длины имён переменных.

EditorConfig

Перезаписывает настройки пользователя и рабочего окружения, заменяя их настройками, найденными в файлах.editorconfig. Расширение помогает обеспечить единообразный стиль написания кода всеми разработчиками, работающими над одним проектом. Так, если добавить файл EditorConfig в проект, то строки кода отформатируются в соответствии с параметрами в файле EditorConfig.

Copy/Paste detector

Помогает найти дублирование кода в проекте.

Prettify JSON

Расширение позволяет форматировать файлы в формате JSON.

JavaScript (ES6) code snippets

Это сниппет, то есть он позволяет ввести только короткое сочетание клавиш, а вместо него появится целая строка кода. Вручную почти ничего не надо делать, что экономит время.

Например, команда enf → вызовет export const log = (parameter) => < console.log (parameter); >;

npm Intellisense

Пригодится при разработке под Node.js. Начните писать название модуля — по первым символам плагин подскажет варианты.

Git History

С его помощью можно посмотреть историю изменений коммита, файла или конкретной строки, увидеть предыдущую копию файла, сравнить ветки и коммиты. Расширение также покажет сведения об авторе изменения — имя, электронную почту.

Project Manager

Обычно при работе с несколькими проектами переключаться между ними неудобно. Плагин решает этот вопрос.

Document this

Плагин пригодится, чтобы не писать заготовки будущих комментариев вручную и автоматизировать процесс.

Обычно участки кода, которые планируется позже отрефакторить, помечают комментарием TODO. Могут быть и другие комментарии, например, FIXME, NOTE. Тodo+ сканирует файл и выводит все комментарии в отдельную панель.

REST Client

Позволяет отправлять HTTP-запросы и сразу же просматривать на них ответы. Например, для отправки GET-запроса достаточно ключевого слова GET и URL — рядом появится кнопка. При нажатии откроется отдельная вкладка с результатом выполнения запроса.

VSCode-random

Подойдёт, если вам нужен набор сгенерированных данных. Расширение включает несколько генераторов, которые выдают названия стран, URL-адреса, цвета, имена людей, названия улиц, валидные email, случайные числа и ещё много другого. Всё проще, чем готовить такие данные самостоятельно.

Import Cost

Пакеты в NPM (менеджере пакетов) могут быть очень объёмными. С помощью этого расширения можно увидеть размер пакета после подключения прямо в редакторе и выбрать оптимальный. А ещё вы можете задать порог — и пакеты тяжелее этого порога подсветятся красным.

Handlebars/Handlebars Preview, pug/htmlPugConverter

Помогают в работе с популярными шаблонизаторами handlebars и Pug.

Handlebars подсвечивает синтаксис.

Handlebars Preview быстро компилирует шаблон Handlebars и показывает результат в окне предварительного просмотра.

htmlPugConverter упрощает конвертацию HTML в синтаксис Pug и обратно.

pug — сниппет для шаблонизатора Puge/Jade.

Попробуйте эти расширения при работе с JavaScript сами. Вот увидите — жизнь станет намного проще! А если не понравится, любой плагин можно удалить — как и установить — в один клик.

Ещё о полезных плагинах:

Познакомьтесь с JavaScript бесплатно

На интерактивных тренажёрах. А вместе с JavaScript — бесплатное знакомство с HTML и CSS.

27 супер плагинов VS Code для JavaScript разработчика

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения, — утверждает proglib.io. Срочно смотрите и устанавливайте!

Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.

Представляем топ-лист расширений для JavaScript разработчика!

1. Project Snippets

Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.

Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:

[javascript]import < useReducer >from ‘react’

const reducer = (state, action) => <
switch (action.type) <
default:
return state
>
>

const useSomeHook = () => <
const [state, dispatch] = useReducer(reducer, initialState)
return <
…state,
>
>

export default useSomeHook[/javascript]

Этот кусок можно просто поместить в набор пользовательских сниппетов. Тогда вместо того, чтобы в следующий раз писать его с нуля (или копировать из другого проекта и вставлять в новый), вы просто введете кастомный префикс этого фрагмента.

Сниппет будет выглядеть вот так:

[javascript] <
«const initialState = <>; const reducer = (state, action)»: <
«prefix»: «rsr»,
«body»: [
«const initialState = <",
» //$1″,
«>»,
«»,
«const reducer = (state, action) => <",
» switch (action.type) <",
» default:»,
» return state»,
» >»,
«>»
]
>
>
[/javascript]

const reducer = (state, action) => <
switch (action.type) <
default:
return state
>
>[/javascript]

Проблема в том, что этот фрагмент будет сохранен для всех ваших проектов. Иногда это очень здорово (для каких-нибудь базовых шаблонов). Но зачастую проекты по-разному сконфигурированы и для них требуются разные сниппеты.

Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:

[javascript] <
«import Link from components/common/Link»: <
«prefix»: «gcl»,
«body»: «import Link from ‘components/common/Link’»
>,
«border test»: <
«prefix»: «b1»,
«body»: «border: ‘1px solid red’,»
>,
«border test2»: <
«prefix»: «b2»,
«body»: «border: ‘1px solid green’,»
>,
«border test3»: <
«prefix»: «b3»,
«body»: «border: ‘1px solid magenta’,»
>
>[/javascript]

Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.

2. Better Comments

Вероятно вы придерживаетесь лучших практик программирования и пишете полезные комментарии к своему коду. Наверняка бывали моменты, когда спустя долгое время и несколько итераций разработки вы не могли найти старые заметки.

Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:

3. Bracket Pair Colorizer

Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!

Программирование на JavaScript должно быть приятным, а не раздражающим.

4. VSCode Material Theme

Material Theme – легендарная тема оформления, доступная и для вашего VSCode.

Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!

5. @typescript-eslint/parser

Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.

Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.

С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.

6. Stylelint

Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:

7. Markdownlint + docsify

Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.

Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.

А для генерирования документации используйте плагин docsify, который поддерживает Markdown.

8. TODO Highlight

Плагин TODO Highlight просто выделяет TODO-комментарии, которые JavaScript разработчик оставляет в коде. Теперь вы точно не забудете, что хотели исправить или улучшить.

9. Import Cost

Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.

Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.

10. Highlight Matching Tag

Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.

11. vscode-spotify

Многие программисты предпочитают работать под музыку и часто используют для прослушивания композиций сервис Spotify. Когда нужно переключить песню, приходится отвлекаться от редактора (иногда даже сворачивать его), а потом бывает сложно вновь вернуться в прерванный на секунду рабочий процесс.

Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.

12. GraphQL for VS Code

GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.

Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.

13. Indent-Rainbow

Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:

14. Color Highlight

Очень удобный плагин, который находит внутри кода обозначения цветов в разном формате и соответственно подсвечивает их.

15. Color Picker

Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.

16. REST Client

Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.

Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:

Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:

[javascript]POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

Этот фрагмент соответствует POST-запросу с параметрами <"email": "someemail@gmail.com", "пароль": 1 >.

Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.

17. Settings Sync

Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.

18. Todo Tree

Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.

19. Toggle Quotes

Toggle Quotes – забавная утилита, позволяющая переключаться между разными типами кавычек. Это особенно удобно при использовании строковых интерполяций.

20. Better Align

21. Auto Close Tag

Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.

22. Sort Lines

Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.

23. VS Code Google Translate

Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.

24. Prettier

Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.

25. VS Code Material Icon Theme

Очень крутая тема, которая устанавливает разные иконки для разных типов файлов. Особенно хорошо сочетается с темной темой редактора.

26. IntelliSense for CSS Class Names in HTML

Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!

27. Path Intellisense

Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.

Расширения Visual Studio для веб-разработки

Расширения для веб-разработки

Из тысяч расширений для Visual Studio здесь мы подобрали для вас те, которые будут особенно полезны именно для веб-разработчиков.

Оптимизатор изображений

Использует стандартные инструменты отрасли для оптимизации любых JPEG, PNG и GIF-файлов, включая анимированные GIF-файлы. Может выполнять оптимизацию как с потерями, так и без потерь.

Bundler & Minifier

Обеспечивает объединение и уменьшение файлов JavaScript, CSS и HTML в любом проекте.

Веб-компилятор

Самый простой и эффективный способ компиляции файлов LESS, Scss, Stylus, JSX, CoffeeScript и Handlebars непосредственно в Visual Studio или посредством MSBuild.

Средства PHP

Поддерживает с полным набором функций редактирование и отладку PHP-программ.

Запускатель задач NPM

Добавляет поддержку скриптов npm, определенных в package.json непосредственно в Task Runner Explorer (обозревателе выполнения задач) Visual Studio. Включает полную поддержку Yarn

Запускатель задач WebPack

Добавляет поддержку WebPack в запускателе задач Visual Studio 2015 – 2022.

Спрайты изображений

Повысьте производительность веб-сайта, создав спрайты изображений, чтобы уменьшить количество необходимых HTTP-запросов.

Установщик пакетов

Облегчает, ускоряет и упрощает задачу установки пакетов Bower, npm, Yarn, JSPM, TSD, Typings и NuGet в любой проект

Пакет фрагментов HTML-кода

Пакет фрагментов кода для более эффективной работы с HTML.

Средство просмотра SVG

Значительно упрощает работу с SVG-файлами, отображая динамический предварительный просмотр в правом нижнем углу окна кода

Расширения общего назначения

В этом списке представлены более универсальные расширения, которые предназначены для всех разработчиков, включая разработчиков веб-приложений.

Productivity Power Tools 2022

Устанавливает отдельные расширения Productivity Power Tools 2022

Open Command Line

Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code

Содержание статьи

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

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

Ваш покорный слуга использовал все перечисленные редакторы и в итоге остановился на VS Code. Причин тут несколько, но главная — производительность. В Microsoft отлично постарались и, несмотря на поздний выход (VS Code появился на сцене последним), успели собрать вокруг себя огромное сообщество. Это положительно отразилось на плагинах: некоторые из них, на мой взгляд, на голову выше альтернатив для Atom. В связи с этим в тексте обзора будут мелькать названия расширений именно для VS Code. Ссылка на приближенный по функциональности вариант для Atom будет приведена ниже. Не удивляйся, если, скопировав название плагина и запустив поиск по репозиторию Atom, ты ничего не найдешь. Используй ссылки из описания.

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

Редакторы, построенные на веб-технологиях, имеют приблизительно одни и те же проблемы. Одна из основных — производительность. Разработчики трудятся над скоростью работы редакторов, но будем честными — с этой проблемой вряд ли удастся справиться на 100%. Нативные решения по-прежнему обгоняют в быстродействии, и это стоит учитывать при выборе редактора.

Какой веб-разработчик согласится на этот подвиг? У него своих забот и технологий хватает (во фронтенде происходит настоящая революция решений). Вот и получилось, что экосистема плагинов для веб-разработчиков у нативных редакторов всегда страдала нехваткой профильных решений.

Идея создания редакторов на веб-технологиях для мастеров этих же технологий эффективно решила проблему бедной экосистемы сторонних модулей. Сторонние веб-разработчики быстро подхватили волну и приступили к созданию необходимых им примочек. Результаты нетрудно проследить — официальные репозитории набиты плагинами для самых разнообразных задач. Создавать новые плагины стало проще: больше не надо учить чужеродный язык программирования, JavaScript вполне достаточно.

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

Сниппеты

Плагины-сниппеты — отдельный класс расширений для редакторов. Они пользуются дикой популярностью, и практически под каждый современный фреймворк или библиотеку в репозиториях есть индивидуальное предложение. Сниппеты экономят время. Требуется описать заготовку класса? Нет проблем, вводим пару символов и получаем несколько строк готового кода. Подробно разбирать плагины-сниппеты смысла нет — их слишком много. Приведем несколько ссылок на плагины-сниппеты по популярным технологиям. Недостающие найдешь сам.

VS Code:

Обертка для HTML

При описании разметки страницы постоянно приходится оборачивать блоки, то есть вкладывать один блок в другой. Написал разметку блока, а потом понял, что для удобства стилизации лучше обернуть его в дополнительный блок. Сделать несложно: пишем открывающий тег в самом начале, проматываем блок до конца и ставим закрывающий тег. Есть только одна проблема — на больших блоках это делать неудобно. Есть все шансы поставить «закрывашку» не туда и поломать разметку. Аналогичная проблема появляется при стилизации отдельных кусков текста. Попробуй быстро вставить многочисленные открывающие и закрывающие теги и не сойти с ума. Справиться с трудностями помогут плагины htmltagWrap и Atom wrap in tag. С их помощью решение сведется к выделению куска кода/строки и нажатию комбинации горячих клавиш.

Привыкаем к горячим клавишам

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

VS Code:

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

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

Линтеры

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

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

Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», позволит скачивать выпуски в PDF, отключит рекламу на сайте и увеличит личную накопительную скидку! Подробнее

Вариант 2. Открой один материал

Заинтересовала статья, но нет возможности стать членом клуба «Xakep.ru»? Тогда этот вариант для тебя! Обрати внимание: этот способ подходит только для статей, опубликованных более двух месяцев назад.

Игорь Антонов

Автор интенсивных курсов по JavaScript в HTML Academy

🛠 10 забавных расширений VS Code для разработчиков

Перевод публикуется с сокращениями, автор оригинальной статьи Anupam Chugh.

Независимо от того, являетесь ли вы ветераном VS Code или только начинаете с ним работать, вы наверняка слышали о некоторых обязательных расширениях: Live Server, Git Lens, Auto-Close Tag, Better Comments, Bracket Pair Colorizer – это лишь несколько вариантов, входящих в наборы инструментов большинства разработчиков.

1. Vibrancy

Это расширение создает размытый полупрозрачный фон редактора, чтобы просматривать содержимое за ним. Теперь можно попрощаться с переключением окон, если вы читаете какую-то документацию во время кодинга.

Vibrancy предлагает разнообразные настройки темы, а также позволяет включать/отключать эффект стекла.

2. Bookmarks

Навигация по тысячам строк кода в одном файле может быть сложной задачей, особенно если нужно перепрыгивать через блоки. К счастью, есть Bookmarks – расширение для нашего спасения. Точно так же, как вы добавляете закладки в браузере, это расширение позволяет отмечать определенные фрагменты кода в файле. При этом можно легко перепрыгнуть через них или перечислить их все по отдельности.

Расширение Bookmarks чрезвычайно полезно, если в кодовой базе слишком много журналов. Оно также удобно в качестве буфера обмена для копирования и вставки фрагментов.

3. Footsteps

Если Bookmarks было похоже на метки, то Footsteps – это история версий в реальном времени. Расширение выделяет редактируемые строки и затемняет их по завершении правки, сохраняя след изменений.

Footsteps выдает удобные визуальные подсказки при отладке кода и позволяет легко переключаться между измененными ранее строками с помощью нескольких команд быстрого доступа.

Вот несколько вещей, которые вы можете сделать с помощью Footsteps:

4. Tabout

Перейдя от IntelliJ Idea или Visual Studio к VS Code, вы поймете – редактор не позволяет выйти за скобки или кавычки и необходимо время от времени нажимать стрелку вправо.

Tabout позволяет быстро из кавычек или скобок, как только вы заполнили содержимое. Кроме того, можно быстро переключиться на другое расширение, если вы предпочитаете использовать клавиши со стрелками.

5. Coins

Сейчас много говорят о криптовалютах и NFT и следят за их курсами. Если во время программирования вам захочется переключить контекст, процесс разработки может прерваться.

6. Winddown

Программисты привыкли часами не отрываться от экранов – это может приводить к стрессу, а также вредно для здоровья.

Делать время от времени передышку – хорошая идея. Существуют различные методы, вроде тридцатиминутного таймера Pomodoro. Это похоже на откладывание будильника – в конечном итоге работа продолжается несмотря на напоминание.

Winddown действует как отличная напоминалка (не будучи прерывателем), плавно изменяя цвета вашей IDE, пока вы не перестанете печатать. Это отличный способ освободиться от работы и вернуться к ней позже.

Winddown позволяет установить периоды бодрствования и скорость изменения цвета.

7. Codetour

Один из самых болезненных моментов при при найме программистов и/или при передаче дел – сидеть и показывать кодовую базу новым людям. Это становится сложнее из-за удаленной работы, когда приходится прибегать только к документации.

Codetour – крутое расширение, стремящееся сделать весь процесс пошагового руководства интерактивным.

Оно позволяет записывать и воспроизводить кодовую базу в виде туториала. Вы можете комментировать различные шаги и даже переставлять их перед экспортом всего потока.

8. Debug Visualiser

Отладка часто бывает трудной для начинающих, а освоение структур данных – еще труднее.

Разработчики могут легко запутаться в процессе итерации связанного списка. На помощь приходит VSCode Debug Visualizer – визуализирующее структуры данных в редакторе расширение.

Оно открывает новое представление визуализатора и позволяет отлаживать структуры данных, наблюдая значения между итерациями в диаграммах. Инструмент также удобен для визуализации JSON в таблице или для построения гистограмм и графиков из точек.

9. Coddx

Мы все (или почти все) использовали markdown-разметку, чтобы записывать прогресс и проблемы, а также отмечать задачи. Часто простой список задач не гарантирует быстрых циклов выпуска. Метод к анбан может улучшить работу с помощью визуализации различных ее этапов.

Coddx объединяет лучшее из обоих миров, представляя набор инструментов для создания интерактивных досок, которые сохраняются в файле markdown.

10. GrokJS

Хотя JavaScript считается популярным языком, начать писать на нем не всегда легко. Его синтаксис не прост, особенно если вы пришли из другого языка.

GrokJS поможет изучить JavaScript на лету из Visual Studio Code. Достаточно выделить фрагмент кода, и расширение отобразит небольшую документацию со связанными актуальными ссылками.

Чтение кода часто является лучшим способом выучить любой язык программирования. GrokJS гарантирует, что вы не будете гуглить все новое.

Заключение

Обзор редакторов кода

Программисты много времени проводят за написанием и отладкой кода. Для того чтобы написать рабочий код, хватит простого приложения, которое умеет редактировать текстовое содержимое файла. Но так писать код сложно, долго, и в процессе разработки допускается множество ошибок, которые впоследствии тяжело найти.

Исправить эти недостатки помогают современные редакторы. В этой статье рассмотрим, как редакторы помогают ускорить процесс разработки и повысить качество кода. А также посмотрим на каждый редактор в отдельности и выясним, чем они отличаются и какие у каждого из них преимущества.

Существуют как платные редакторы, так и бесплатные. На сегодняшний день наиболее популярные из них: Visual Studio Code, Sublime Text, Atom, WebStorm.

Что умеют редакторы кода

Подсветка синтаксиса

Выделение однотипных конструкций отдельным цветом помогает быстрее визуально найти нужный участок кода. Это делает код более читаемым и понятным для разработчика.

Автоматические отступы

При написании кода не хочется самому после переноса строки отбивать нужную вложенность. К счастью, этот процесс зачастую автоматизирован. При переносе строки программа автоматически выставит уровень вложенности.

Файл, в котором корректно выставлена вложенность, легко читается, также это даёт программе возможность скрывать блоки кода. Например, чтобы лучше видеть границы участка и случайно не затронуть соседние, можно удобно сгруппировать блоки кода и оставить видимым только тот, который нужен.

Автодополнение

Во время разработки часто приходится искать справочную информацию. Благодаря встроенной возможности автодополнения можно не тратить на это время. Программа на ходу анализирует написанный код и предлагает варианты продолжения.

Также можно быстро получить справочную информацию по нужной конструкции, узнать о количестве аргументов, которые принимает в себя функция и многое другое.

Разделение рабочей области

Рабочую область редактора можно разделить на два и более секторов. Например, так можно разделить файл разметки и стилей, для того чтобы не тратить время на переключение между проектами и папками.

Мини-карта

Для удобной навигации в документе можно использовать миникарту. Обычно она находится в правой колонке и отображает структуру файла. При нажатии на миникарту отобразится нужная часть документа.

Внешний вид

Для тех, кто любит настраивать инструмент под себя, в настройках есть множество регулировок: можно изменять размер шрифта, цветовые схемы, правила переноса текста и многое другое. Это поможет сделать процесс разработки ещё комфортнее.

Проекты

Для того чтобы каждый раз не искать в системе расположение рабочей папки, можно сохранить эту информацию в редакторе, создав проект. При работе это удобно тем, что позволяет оперативно переключаться между ними.

Для разных редакторов выделение проектов даёт дополнительные возможности. К примеру, если создать проект в WebStorm, то программа считает всё содержимое директорией проекта. После анализа редактор будет выдавать подсказки, например, что ссылка ведёт на несуществующий файл.

Такой анализ даёт возможность безопасно проводить рефакторинг кода, удалять файлы и прочее.

Плагины

Помимо выполнения основной функции — предоставления комфортных условий для написания кода — редакторы могут включать в себя функциональность сторонних приложений. Это делает из простой программы интегрированную среду разработки. В базовую версию у разных редакторов входит разное количество таких приложений.

Обогатить функциональность можно через добавление плагинов. Рассмотрим некоторые подобные возможности.

Система контроля версий

Помимо этого, программа может подсказать, в каких местах были произведены изменения, и как поменялся код по сравнению с предыдущей версией.

Также в удобной форме можно посмотреть: историю коммитов, кто, когда и как изменял файлы и многое другое.

К примеру, через Atom или WebStorm можно сделать commit изменений, выполнить push в удалённый репозиторий и после создать pull request в сервисе GitHub. И все эти действия делаются в рамках редактора.

Возможности редактора при работе с Git

Emmet

Во многие редакторы по умолчанию встроен плагин emmet. С его помощью можно из короткой строки развернуть большой кусок кода.

Используя подобную технику можно в разы ускорить написание разметки.

Консоль

В процессе разработки часто приходится использовать консоль, чтобы установить какую-то зависимость, запустить локальный сервер или для других действий. Во многих редакторах в базовую версию добавлена консоль и её можно открывать внутри программы.

Консоль

Дебаггер

Ещё один удобный инструмент — встроенный дебаггер, позволяющий отлаживать код. Можно выставлять точки останова и искать, в каком месте программы происходит неожиданное поведение.

Отладчик

Единый стиль написания кода в команде

При работе над проектом в команде важно использовать единый стиль написания кода. Иначе будет путаница и тяжелее будет понимать, что писал до тебя другой разработчик. Это проблему помогают решить различные инструменты:

Библиотека плагинов

Какая-то часть из вышеперечисленного по умолчанию встроена в редакторы, а какую-то нужно добавлять, устанавливая плагины. У всех программ, которые рассматриваются в этой статье, есть возможность интегрировать плагины непосредственно в среду разработки.

Также большое значение имеет количество людей, которое использует редактор. Чем популярнее приложение, тем больше сторонние разработчики создают и обновляют плагины для него. А это, в свою очередь, положительно сказывается на опыте использования инструмента конкретным пользователем.

Горячие клавиши

Практически для всех действий в редакторах есть горячие клавиши. Знание этих комбинаций повышает скорость разработки. Стоит их изучить, хотя бы для того, чтобы понять, какие ещё возможности даёт редактор.

Sublime Text 3

Скачать редактор с официального сайта можно здесь.

Расширения для редактора

Для Sublime Text 3 написано множество пакетов, которые делают работу в редакторе более комфортной. Далее рассмотрим ряд таких расширений и посмотрим, как их устанавливать в программу.

После этого программа покажет список пакетов. Здесь можно выбрать и установить нужный пакет. Посмотреть подробное описание каждого расширения для Sublime Text 3 можно на сайте Package Control.

Установка расширений в Sublime Text 3

Условно пакеты можно разделить на несколько типов.

Ускоряющие разработку:

Добавляющие функциональность:

Проверяющие синтаксис:

Изменяющие внешний вид:

Если недостаточно стандартных встроенных тем, то можно установить дополнительные. Примеры тем можно посмотреть на официальном сайте.

Продукт, произведённый командой GitHub Inc. Приятный на вид, кроссплатформенный бесплатный редактор. Имеет встроенную интеграцию с Git и GitHub.

Скачать с официального сайта можно здесь.

Расширения для редактора

Установка расширений в Atom

Список популярных расширений можно посмотреть на официальном сайте.

Условно плагины можно разделить на несколько типов.

Ускоряющие разработку:

Добавляющие функциональность:

Проверяющие синтаксис:

Для того чтобы редактор мог подсвечивать найденные ошибки, нужно установить плагин Linter. После этого нужно выбрать плагин, который добавляет проверку для конкретного языка. Например:

Изменяющие внешний вид:

Visual Studio Code

Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.

В базовой версии есть интеграция с Git и режим отладки кода. Поддерживает, в том числе и через дополнения, большое количество языков.

Расширения для редактора

VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт extensions и в поле ввода ввести интересующий плагин. После этого его можно установить.

Установка расширений в VS code.

Посмотреть список популярных плагинов можно через интерфейс редактора, либо на официальном сайте. Рассмотрим ряд полезных плагинов, которые могут помочь при разработке. Условно их можно разделить на несколько типов.

Добавляющие функциональность:

Проверяющие синтаксис:

Изменяющие внешний вид:

WebStorm

Продукты JetBrains являются полноценными интегрированными средами для разработки. При минимальной настройке редакторы обладают большим количеством возможностей, на изучение которых нужно время. Базово имеет интеграцию с системами контроля версий, есть отладчик кода, статически анализирует содержимое проекта и в случае ошибок указывает на них.

Продукт платный и доступен к использованию по подписке, установить и оформить подписку можно здесь. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.

Расширения для редактора

Из коробки редактор поддерживает большинство возможностей, которые рассматривались в этой статье. Однако, при необходимости можно обогатить функциональность программы через добавление расширений.

Установка расширений в WebStorm.

Вывод

У всех редакторов, которые мы рассмотрели, есть свои особенности и преимущества. При выборе программы стоит отталкиваться от задачи.

Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легковесный и мало тратит ресурсов компьютера.

Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. У него приятный интерфейс и хорошо проработана интеграция с сервисами Git и GitHub.

Для опытных разработчиков отличным решением будет WebStorm. Программа требует минимальных настроек для комфортной разработки и обладает богатой функциональностью.

Некоторой золотой серединой выступает VS Code. C одной стороны, он из коробки обладает большим количеством возможностей, с другой — интуитивно понятный и легко настраиваемый. При этом программа достаточно быстро работает.

Так как при разработке очень много времени приходится проводить в редакторе, стоит хорошо изучить его особенности, понять, что он умеет делать и как может помочь решить типовые задачи.

С опытом приходит понимание того, каким должен быть ваш рабочий инструмент. Современные программы обладают широким спектром особенностей и продолжают развиваться. Изучайте их и не бойтесь пробовать новое.

Попробуйте свои силы на курсе по вёрстке

Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.

Лучшие VS Code расширения / ТОП-10 крутых плагинов для Visual Studio

Visual Studio Code – программа с удобным интерфейсом и множеством функций. Каждый пользователь может добавить функционал при помощи расширений. В статье мы рассмотрим ТОП-10 крутых плагинов.

VS code Icons

Начнем мы подборку с плагина, что является «must have» плагином для любого разработчика и не важно на каком языке вы пишите. За счет плагина VS code Icons все ваши файлы, в том числе папки, будут обладать иконками в зависимости от кода что прописан внутри них.

Этот плагин добавляет крутую визуализацию внутрь ваших проектов и помогает вам быстрее ориентироваться среди сотен различных файлов и папок.

Также рекомендуем посмотреть на расширение Material Icon Theme. Он также позволяет добавить стильные иконки к вашим папкам и файлам.

Prettier

Следующий на очереди плагин Prettier. Он позволяет в автоматическом формате форматировать ваш код с соблюдением всех отступов, пробелов и табов. Другими словами, за счет Prettier ваш код становиться красивым и верным каждый раз когда вы сохраняете файл.

Для работы вам нужно его установить и зайти в настройки. Откройте их в формате кода JSON. В настройки допишите строку «editor.formatOnSave» со значением true. Далее перезапустить всю программу. В таком случае при сохранении файлов они у вас будут форматироваться.

Это максимально удобный плагин, является одним из наиболее популярных плагинов в VS code.

Live Server

Live Server предоставляет возможность любому запустить локальный сервер для своего проекта. Для запуска сервера вам достаточно установить расширение, а далее внутри нужного файла нажмите правой кнопкой мыши и выберите опцию «Open with Live Server».

Большим плюсом сервера является его автоматическая перезагрузка. Вы можете писать код, сохранять файл, а сервер обновиться автоматически в соответсвии с кодом внутри файла.

Bracket Pair Colorizer

Еще один максимально удобный плагин – Bracket Pair Colorizer. Он добавляет подсветку для фигурных скобок и тем самым позволяет вам быстро ориентироваться среди них.

Данный плагин максимально удобен для всех языков программирования, возможно, лишь за исключением Python, Golang и тому подобных языков, где нет фигурных скобок.

Indent Rainbow

Нельзя пройти мимо расширения под названием Indent Rainbow. За счет расширения вы получаете цветовое оформление для отступов внутри проекта.

Каждый отступ выделяется своим цветом и вы никогда не запутаетесь в коде. Этот плагин отлично использовать в связке с прошлым плагином.

GitLens

GitLens – прекрасное расширение для работы c Git. Данное расширение предоставляет вам полную информацию относительно репозитория вашего проекта, а также всех комитов и комментариев что были внесены и оставлены.

При помощи GitLens вы в удобной форме можете наблюдать какие участки кода были добавлены в проект и при этом какие комментарии были оставлены при добавлении того или иного участка кода. Прекрасный плагин для визуализации Git.

Peacock

Цветовая гамма кажется чем-то простым, но все же ей стоит уделять время. Если цвета в редакторе вам нравятся, то вам значительно проще будет даваться написание кода.

За счет плагина Peacock вы можете устанавливать глобальную цветовую гамму для редактора. Вы можете поменять не только цвет текста и цвет заднего фона, но также сможете изменить боковую панель в Visual Studio code.

Faker

Думаю вам часто приходилось выдумывать имена, адреса или прочую информацию лишь с целью чтобы протестировать участок кода в вашем проекте.

Более вам такое делать не придется, так как при помощи плагина Faker вы можете создать фейковую информацию и сразу же подставить её внутрь некой переменной.

Lorem ipsum

Помимо подстановки фейковых данных часто необходимо подставить текст. Для этого можно использовать плагин Lorem ipsum, что подставляет текст рыбу или другими словами текст заглушку.

Better Comments

И конечно же, как мы можем обойтись без комментариев. Сами по себе комментарии обычно невзрачны и их не всегда удобно читать. При помощи плагина Better Comments вы можете создать действительно более хорошие комментарии.

Данный плагин позволяет оформить комментарии в разные цветовые решения, тем самым вы можете более четко выделять важные и не важные участки комментария

Видео на тему

Ниже предлагаем просмотреть соответствующее видео по данной тематике:

10 суперполезных плагинов для Visual Studio Code

Если в качестве IDE ты используешь Visual Studio Code, у тебя есть возможность сделать свою работу намного продуктивнее, установив правильные плагины. Ты можешь скачать их с официального маркерплейса, а мы поможем с выбором. Поехали!

1. Visual Studio Intellicode

Сей продукт является одним из самых загружаемых (3 200 000 скачиваний) и полезных плагинов, которые ты можешь использовать вкупе с Visual Studio Code.

Инструмент создан в помощь разработчикам для интеллектуального автодополнения кода со встроенной поддержкой широкого спектра ЯП.

В VS Intellicode используется машинное обучение для поиска шаблонов, используемых в публичных проектах на гитхабе, которые потом предлагаются тебе во время работы.

2. Git Blame

Кто это натворил?!

Нередко нужно выяснить, кто написал этот кусок кода. Git Blame спешит на помощь. Данный инструмент подскажет, кто последним что-то правил в конкретной строке. Кроме того, ты сможешь увидеть, в каком коммите это произошло.

Очень полезная штука, особенно при работе с чем-то вроде feature branches (изолированная работа каждого разработчика над своей задачей). При использовании feature branches ты ссылаешься на тикет с именем твоей ветки. Поскольку Git Blame сообщает все вплоть до коммита, и, соответственно, до ветки, очень просто выявить нужную строку с изменениями.

3. Prettier

Prettier является одним из лучших плагинов для разработчиков, которые хотят следовать хорошо продуманному набору правил написания кода. Это крутой инструмент для форматирования кода, который позволяет структурировать написанное, следуя строго заданным правилам.

Prettier работает с JavaScript, TypeScript, HTML, CSS, Markdown и GraphQL.

4. JavaScript (ES6) Code Snippets

Каждый веб-разработчик, скорее всего, работал с одним из различных JavaScript-стеков. Независимо от того, какой набор у тебя, написание одного и того же кода в разных проектах понижает производительность.

Code snippets – удобный плагин, предоставляющий заготовленные разработчиками популярные фрагменты JS-кода. Данный инструмент умеет биндить стандартные вызовы JavaScript с простыми горячими клавишами. Когда ты все настроишь и прицепишь часто используемый код к хоткеям, рабочий процесс должен пойти веселее.

5. Sass

Как ты, наверное, уже догадался, этот плагин помогает работать с таблицами стилей. Sass умеет выделять синтаксис, в нем включен автоотступ и автозаполнение, а также присутствует форматирование кода и немного дополнительных шаблонов стилей.

Полезная вещь, которая должна быть в твоем арсенале.

6. Path Intellisense

Path Intellisense – один из тех инструментов, которые обеспечивают повышение производительности в Visual Studio Code. Если ты работаешь над большим количеством проектов, то, очевидно, юзаешь много разных технологий. В таком случае тебе нужен помощник, который будет запоминать гору разных путей в ФС.

Path Intellisence задумывался как простенькое расширение для автоматического заполнения имен файлов, но со временем его оценили многие разработчики. Этот плагин сэкономит массу времени, которое было бы потрачено на путешествие по папкам ОС.

7. Debugger for Chrome

Ты дебажил код в Chrome? Больше не придется покидать Visual Studio Code для отладки JavaScript. Debugger for Chrome, выпущенный корпорацией Майкрософт, позволяет отлаживать исходники непосредственно в коде Visual Studio Code.

8. ESLint

ESLint – это мощная штука, которая статически анализирует твой код для оперативного поиска проблем. Плагин интегрируется в код самостоятельно.

Большинство проблем, которые находит данный инструмент, могут быть автоматически исправлены. Среди них есть и синтаксис: ты больше не будешь испытывать боль от ошибок, вызванных алгоритмами поиска и замены. Вдобавок, плагин имеет массу настроек «под себя».

9. SVG Viewer

Расширение добавляет набор утилит для работы с SVG в коде. Этот продукт позволяет рендерить SVG-файлы не выходя из редактора. Кроме того, этот плагин имеет возможность конвертировать файлы в PNG и генерировать URI schemes.

10. Темы

Поскольку ты смотришь в окно своего редактора каждый день, почему бы не сделать его более привлекательным? Есть тонны плагинов, которые изменяют цветовую схему и значки сайдбара. Некоторые популярные темы доступны совершенно бесплатно: One Monokai, One Dark Pro и Material Icon.

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

Одно из различий между очень хорошими и хорошими программистами заключается в том, какие инструменты они используют. Подбор правильных инструментов способен значительно облегчить разработчику жизнь. Это относится к тонкой настройке интегрированных сред разработки, используемых при написании кода.

Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

1. REST Client

Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.

Это расширение, учитывая то, что у него более миллиона загрузок, весьма популярно. Им пользуется множество программистов. Я уже довольно давно пользуюсь REST Client и полагаю, что это — замечательный инструмент.

С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.

В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.

Работа с REST Client

2. CSS Peek

Если вы занимаетесь веб-разработкой, то CSS Peek — это расширение, которое обязательно должно присутствовать в вашем наборе инструментов. Данное расширение позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Для того чтобы увидеть соответствующий CSS-код, достаточно навести указатель мыши на имя класса элемента или на его ID.

Ниже показан процесс работы с CSS Peek.

Работа с CSS Peek

Но возможности этого расширения идут дальше просмотра стилей. Оно, кроме прочего, позволяет быстро переходить к коду CSS-правил, используемых для стилизации элементов. Это позволяет экономить массу времени при поиске соответствующих селекторов.

3. Beautify

Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.

Самое приятное в этом расширении то, что оно поддаётся глубокой настройке. Например, сюда входит настройка размеров отступов и указание того, должны ли файлы завершаться переводом строки. Beautify подойдёт тем, кто пишет код на разных языках программирования, для каждого из которых можно задавать собственные настройки.

Beautify, с более чем 5 миллионами загрузок, входит в топ-20 самых популярных расширений.

4. Auto Rename Tag

Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.

Если вам нужно, чтобы после ввода скобки, завершающей открывающий тег, автоматически вводился бы закрывающий тег, взгляните на расширение Auto Close Tag. Если у вас есть оба эти расширения, это хорошо поможет вам в написании HTML-кода, сделав ваш труд эффективнее, а результаты вашей работы — единообразнее.

Работа с Auto Rename Tag

5. Quokka.js

Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.

Работа с Quokka.js

6. Night Owl

Чего стоит оптимизация VS Code без использования изумительной темы? Программисты проводят очень много времени, работая в редакторе, поэтому — чем привлекательнее выглядит редактор — тем лучше.

Night Owl — это одна из замечательных тем, используемых многими программистами. В описании к ней сказано, что она рассчитана на тех, кто засиживается за компьютером до поздней ночи.

Но если вам эта тема не нравится — ничего страшного. Существует ещё очень много хороших тем, одна из которых вам точно подойдёт.

7. JavaScript (ES6) code snippets

Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.

Какими расширениями для VS Code пользуетесь вы?

15 плагинов для Visual Studio Code

Как и большинство современных IDE, VSCode имеет множество дополнений, расширяющих его исходные возможности. Мы отобрали 15 плагинов, которые будут полезны любому программисту, работающему в этом редакторе.

Open-In-Browser

По умолчанию, в Visual Studio Code нет возможности открыть файл в браузере. Данное расширение не только добавляет функцию «Открыть в браузере», но и позволит открыть файлы в любом установленном на компьютере браузере.

Quokka

Faker

Позволяет быстро вставлять случайные данные (произвольные имена, адреса, изображения, телефонные номера и др.) в код. У каждой категории есть свои подразделы, что позволяет более точно подстроиться под потребности программиста.

CSS Peek

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

HTML Boilerplate

Prettier

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

Color Info

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

SVG Viewer

Это расширение позволит работать с SVG файлами: вы cможете редактировать 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

Языки программирования и фреймворки

VS Code поддерживает большое количество языков и фреймворков, тем не менее, если используемый вами язык/фреймворк отсутствует, то вы всегда можете скачать его с поддержкой таких фич, как автозаполнение, правильные отступы и др. Такие web-фреймворки, как React Native и Vue также доступны для скачивания.

10 необходимых расширений для VS Code

Перевод статьи Фабьена Лассера «10 essential extensions for VS Code».

Я использую Visual Studio Code в качестве своего основного редактора кода уже больше двух лет. Раньше я работал с Sublime Text – отличной программой (особенно для перехода с Notepad++). Но ребята в Microsoft все время ударно трудятся над тем, чтобы сделать свой редактор самым лучшим, и ежемесячные обновления программы показывают, насколько они увлечены этим делом.

Итак, я выбрал этот редактор, но хороший редактор не имел бы смысла без хороших расширений. Я составил список из 10 (плюс еще немножко) моих фаворитов – расширений, без которых я не могу обойтись. Они сильно облегчают мой рабочий день и в долгосрочной перспективе позволяют мне экономить много времени. Я не расставлял их в определенном порядке.

Color Info

VS Code предоставляет маленькие окошки предпросмотра цветов в файлах CSS. Color Info дает вам возможность получить гораздо лучшее представление о цвете, на который наведена мышь, с указанием значений CMYK или альфа. Это расширение может работать даже как инструмент выбора цвета, что очень удобно.

:emojisens:

Мне нравятся эмодзи. Это расширение позволяет вам вставлять эмодзи напрямую или печатать их коды в ваших файлах. Скажем, вы хотите вставить эмодзи joystick. Просто начните набирать :joy и у вас всплывет окошко с автодополнением, которое позволит напрямую вставить иконку. Если вы наберете ::joy, расширение вставит :joystick: вместе с превьюшкой эмодзи. Это великолепно!

Git Blame

Как следует из названия, это расширение показывает git blame текущей выбранной строки в статус-баре.

Markdown All In One

Я обожаю разметку. Собственно, весь этот сайт [dev.to] побуждает к ее интенсивному использованию, поскольку построен с помощью Hugo. Данное расширение помогает вам писать разметку с помощью сочетания клавиш, например Cmd + B сделает текст жирным, а Cmd + I добавит курсивное начертание. Очень удобно!

Settings Sync

Если вам, как и мне, нравится работать на нескольких разных (иногда виртуальных) машинах, вам пригодится это расширение! Оно позволит вам синхронизировать ваши настройки и расширения благодаря загрузке/выгрузке Github Gist.

TODO Highlight

Как следует из названия, это расширение подсвечивает в коде TODO, FIXME и любые ключевые слова по вашему выбору. Просто наберите где-нибудь TODO:, и расширение подсветит не только его, но также и другие TODO, уже написанные где-нибудь в вашем проекте ранее.

Vetur

Spell Right

Многоязычная, легковесная офлайн-проверка правописания. Spell Right для поиска ошибок использует ваши встроенные словари. Расширение может проверять правописание на любом языке (и даже на нескольких) где угодно в вашем проекте. Но будьте внимательны с большими файлами, поскольку иногда проверка может занять некоторое время. Обычно, по умолчанию, у меня проверка отключена. Ее можно просто вызвать, кликнув на иконку глаза в строке состояния.

EditorConfig for VS Code

Bookmarks

Этим расширением я пользуюсь постоянно! Bookmarks («закладки») это расширение, помещающие маленькие синие закладки на полях вашего файла. Это очень удобно, когда вам надо перемещаться между определенными позициями внутри файла или оставить напоминание где-нибудь в проекте. Для себя я настроил shift + cmd + = для установки закладки и shift + cmd + — для перехода к следующей. Благодаря этому я могу прыгать по файлам без необходимости убирать руки с клавиатуры. Это расширение также добавляет маленькую панель, где видны все активные закладки в текущем проекте. Маст-хэв.

Также достойны упоминания

AutoFileName

Это довольно простое расширение. Просто введите начало названия файла/директории, и оно автоматически дополнит это название. Действительно очень удобно, когда нужно указать на файл внутри node_modules.

cdnjs

Чаще всего я добавляю зависимости в мои Javascript-файлы с помощью Webpack. Но когда мне нужно что-то быстро смоделировать, это расширение прикрывает мне спину. С помощью выпадающего списка команд вы сможете вставлять URL или тэги скрипта/стиля всех библиотек, которыми управляет cdnjs. Довольно удобно.

Итак, это несколько расширений, которыми я пользуюсь ежедневно. Если у вас есть что добавить – поделитесь в комментариях!

Самые полезные плагины в VSCode (по мнению новичка)

Выбор редактора кода

Рано или поздно каждый, кто пытается податься в программирование, сталкивается с тем, что писать в блокноте — дико и неудобно. Первым на арене чаще всего появляется VS Cоde.

Плюсы VS Cоde:

Расширения

То, ради чего, собственно, я и открыла дневник. Итак, редактор предлагает нам множество различных дополнений, которые могут значительно облегчить жизнь во время работы над задачами и проектами и сделать процесс написания кода приятнее и комфортнее.

Устанавливать плагины очень легко, достаточно найти на панели слева значок «Расширения», вбить в поиск интересуемое и установить его.

Опишу сейчас те, которые понравились лично мне.

Live Server. Позволяет сразу увидеть результат работы. Страница, которую вы откроете с помощью этого плагина, будет автоматически перезагружаться после сохранения, то есть вам не придется вручную обновлять страницу.

Bracket pair colorizer разукрасит открывающие и закрывающие скобки в разные цвета, благодаря чему понимать код и искать ошибки/опечатки станет проще.

Auto rename tag. Если вы переименовываете парный тег, то второй (закрывающийся) переименовывается автоматически.

Image Preview. Позволяет вам видеть добавленное изображение прямо в редакторе.

Live Sass Compiler. Компилирует ваши SASS/SCSS файлы в файлы CSS в режиме реального времени, с перезагрузкой браузера

Bookmarks. Помечает строки кода, после чего можно быстро на них перемещаться. Пригодится, если у вас большой объём кода, в котором приходится делать частые изменения.

В конце могу только добавить ссылку на ютуб урок, в котором подробно показывается, как установить редактор и настроить его. Мне он очень помог.

Напишите, какими классными и полезными плагинами пользуетесь вы. Я уверена, что есть еще множество таких, о которых я не слышала, но они бы весьма пригодились.

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

10 лучших расширений VS Code для JavaScript-разработчиков

VS Code — мощный и удобный редактор кода, к тому же бесплатный, чем, вероятно, и объясняется его популярность. В него встроено множество функций, он поддерживает более 30 языков программирования, а количество расширений растет с небывалой скоростью. О десяти самых лучших из них для работы на JavaScript, по версии одного из пользователей сайта Cmsinstallation, рассказываем в новой подборке.

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

1. ESLint

Инструмент для поиска и исправления ошибок в JavaScript-коде и ECMAScript. Может быть настроен для наиболее популярных фреймворков. Вместо того, чтобы вручную запускать ESLint и смотреть на ошибки, инструмент подключается к VS Code и подсвечивает их в редакторе. Устраняются ошибки сразу же обычным щелчком мыши.

2. ToDo Highlights

Одно из самых популярных расширений VS Code. Плагин, который выделяет комментарии, если в них содержится слово ToDo или FixMe.

3. GitLens

Есть много расширений для работы с Git, но то, что выделяет GitLens из общей массы, — это большое и активное сообщество и возможность детальной настройки. Как правило, GitLens используется на больших проектах, где позволяет быстро определять, кто написал конкретную строку (информация отображается в строке состояния) или влиять на объем справочных данных.

4. Styled components

Расширение для тех, кто пользуется библиотекой styled-components в React. С помощью него можно изменять цвет кода.

5. VS Code Icons

Расширение, которое содержит более 100 иконок для файлов.

6. Bookmark

Позволяет искать конкретное место в файле. Расширение разбивает плохо структурированный код на части, по которым легче перемещаться, — так и осуществляется поиск. В последней версии расширения добавили поддержку виртуальных рабочих пространств, удаленной разработки и кроссплатформенную поддержку.

7. Open in Browser

Расширение, с помощью которого можно через контекстное меню открыть страницу в браузере (том, который по умолчанию), оставаясь в редакторе. Позволяет не возиться с консолью ради того, чтобы открыть один файл в браузере, тем самым экономит время.

8. VS Code Themes

9. Import Cost

Плагин сообщает пользователю размер модуля, который разработчик импортирует в проект. Позволяет понять, стоит ли польза, полученная от добавления модуля, увеличения размера проекта.

10. Prettier

По аналогии с ESLint обеспечивает применение стандартизированного стиля кодирования. Плагин Prettier можно использовать прямо в редакторе. Отличие от ESLint в том, что вместо перечисления ошибок он предоставляет разработчику переформатированный вариант кода, уже выглядящий так, как должен выглядеть по правилам.

Может автоматически переформатировать код и привести его к требуемому стилю перед каждым выполнением команды git commit, поэтому подойдет при подготовке кода к отправке в репозиторий проекта.

Полезные расширения VS Code для JavaScript-разработчиков

Недавно мы опубликовали перевод статьи про полезные расширения VS Code для Python-разработчиков. Настала очередь JavaScript!

В прошлый раз читатели делились своими фаворитами в комментариях. Надеемся, что сегодня нам тоже удастся собрать отличную подборку полезных расширений VS Code для JavaScript.

Уже несколько лет я использую PyCharm Pro и WebStorm, IDE от Jetbrains. Поскольку это недешевые продукты, каждый раз, когда я их рекомендую, люди предлагают мне перейти на VS Code, так как этот редактор бесплатный и крутой одновременно. После нескольких таких дискуссий на Reddit я пообещал, что протестирую VS Code в течение пары недель.

Среди важных преимуществ VS Code (помимо, конечно, стоимости «for free»): возможность настройки и экосистема плагинов. Я хотел получить максимум от пробной версии, для этого мне и потребовались плагины. Опять же на Reddit мне посоветовали огромное количество различных расширений, и сегодня я хотел бы поговорить о плагинах для VS Code, которые мне особенно понравились.

Несмотря на мой эксперимент с VS Code, я продолжаю работаю с любимыми PyCharm и WebStorm, так как за все эти годы я уже привык к ним. Их стоимость полностью оправдана ценностью и качеством. При этом VS Code приятно удивил меня: это очень простой и быстрый инструмент.

ESLint

ESLint, без сомнения, является одним из самых популярных расширений среди JS-разработчиков. Оно применяет правила ESLint на коде и отображает результат в редактор. Это позволяет быстро выявлять и исправлять нарушения правил. ESLint будет полезен всем разработчикам на JS, так как помогает повысить производительность и качество кода.

Prettier

Prettier — это «упрямый» (opinionated) инструмент для форматирования кода, который интегрируется с VS Code, Visual Studio, Atom, Vim, Sublime Text и другими редакторами. Удобное небольшое расширение, которое поможет отформатировать код, сделать нужные отступы, а также подсветит ключевые слова, чтобы код легче читался.

Конечно, такие полезные функции снизят трудозатраты на форматирование и, следовательно, увеличат нашу производительность. Благодаря Prettier, читаемость кода будет на очень высоком уровне.

Quokka.js

Расширение Quokka.js обеспечивает быстрое создание прототипов JavaScript в редакторе VS Code. Это песочница в режиме реального времени для JavaScript- и TypeScript-разработчиков. Quokka.js часто называют современным блокнотом для разработчиков на JavaScript.

REST Client

REST Client — это расширение для VS Code, которое позволяет отправлять HTTP-запросы и видеть ответ прямо в VS Code.

Это Postman для VS Code, но удобно встроенный в редактор кода.

REST Client поддерживает API REST и GraphQL.

Скачать REST Client

Debugger for Chrome

Отладка JavaScript может быть достаточно неприятным процессом. Chrome и другие браузеры предлагают отличные инструменты, которые помогут вам в работе.

Тем не менее с ними часто бывает совсем непросто работать. Кроме того, такие инструменты не очень удобны, особенно при использовании фреймворков и множества библиотек.

Debugger for Chrome — это расширение, разработанное Microsoft, которое помогает легко отладить код для каждого небольшого изменения.

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

Запускайте код в Chrome и отлаживайте его в редакторе кода.

Скачать Debugger for Chrome

Live Server

Live Server позволяет запускать локальный сервер разработки с функцией live-reload для статических и динамических страниц. Это не очень актуально для тех, кто работает с фреймворками, которые уже настроили live-reload, например, React. Однако, если вы работаете с другими библиотеками или статическим контентом, то это расширение вам точно пригодится.

Скачать Live Server

Live Share

Это потрясающий инструмент! Я не уверен, что есть что-то подобное для WebStorm. С помощью Live Share можно поделиться своим редактором кода с другими людьми. Он идеально подходит для парного программирования, это особенно актуально сейчас, когда большинство до сих пор работает удаленно из-за пандемии.

Я попробовал, и мне понравилось!

JavaScript (ES6) Code Snippets

Как вы, наверное, заметили, почти все расширения из этого списка повышают производительность, и JavaScript (ES6) Code Snippets не исключение.

Название говорит само за себя! Данное расширение поможет увеличить скорость кодинга за счет работы с заранее заданным набором сниппетов. Сниппеты можно настроить в зависимости от наших предпочтений, установив готовые пакеты или создав собственные.

Загрузить JavaScript (ES6) Code Snippets

Babel JavaScript

За последнее время JavaScript сильно развился. Появилось большое количество фреймворков и библиотек, например, React, Flow, GraphQL, и, как следствие, много новых способов оформлять код.

Babel JavaScript позволяет работать с последней версией синтаксиса JavaScript, а также перечисленных выше библиотек. Расширение предлагает JavaScript-редактору самые последние и красивые версии синтаксиса.

Скачать Babel JavaScript

One Dark Pro

Разработчики проводят в редакторе кода целую вечность, поэтому особенно важно, чтобы мы были довольны его видом и эстетикой. One Dark Pro — это тема для VS Code, которая делает редактор более красивым, похожим на то, к чему я привык.

Скачать One Dark Pro

Вывод

Попробовав VS Code, я был приятно удивлен, осознав, насколько он быстр и надежен.

Настроив его под себя с помощью расширений, я также смог прочувствовать, насколько он мощный.

Поскольку это один из самых популярных редакторов кода на рынке (если не самый популярный), существует огромное сообщество, создающее инструменты и расширения, чтобы сделать его еще лучше. Это как раз то, что мне всегда нравилось в продуктах Jetbrains, и то, что мне нравится сейчас в VS Code.

VS Code — отличный выбор для любого разработчика. Рекомендую! Однако WebStorm и PyCharm по-прежнему занимают особое место в моем сердце.

Пишем плагин для Visual Studio Code. Теория и стандартный плагин

Эта статья продолжает небольшую серию «Создаём ваш первый плагин для…», в которую уже вошли статьи про написания плагина для Grunt и Gulp.

Дисклеймер

Я люблю JavaScript. Мне довольно приятно наблюдать за тем, что этот прекрасный язык программирования вышел за пределы браузера и собирает всё больше и больше областей применения. Так, например, благодаря Electron от GitHub у меня появилось сразу несколько приложений, которые я использую в повседневной жизни. К таким приложениям относится Hain, 1Clipboard, Wagon, Gitify и, конечно же, Visual Studio Code.

Теперь поговорим о приятном для некоторых людей и противном для других. У меня нет симпатий к TypeScript. На то есть свои причины, в основном, связанные с типизацией — не люблю я её, что тут поделать. При этом я не буду отрицать, что когда-нибудь начну использовать TypeScript или подобный язык, компилируемый в JavaScript — всё бывает, мнение может меняться со временем. Однако, в связи с этим, в статье все примеры будут написаны на JavaScript, хотя сам редактор и вся документация к нему написана с применением TypeScript в примерах.

Кстати, я недавно узнал, что создателем TypeScript был Андерс Хейлсберг, который, оказывается, приложил руку к Turbo Pascal, Delphi и C#.

Что-то вместо введения

Герой нашего дня (VS Code) построен на Electron, который подробно рассматривался в статье «Построение Electron приложения. Введение». На момент написания статьи (июнь 2016) в основе редактора лежит Electron версии 0.37.6, что подразумевает под собой Chromium 49-ой ветки и Node.js версии 5.10.0. В репозитории на GitHub уже думают над переходом на новую версию Electron, где версия Chromium поднимется минимум до 51-ой ветки, а Node.js до версии 6.1.0 или выше. Всё это означает, что вы можете писать плагины, используя синтаксис ES2015 без Babel и его альтернатив, а также применяя любой API Node.js.

Не стоит читать эту статью дальше введения, если вы не понимаете фишки, введённые в ES2015. Если говорить конкретно, то от вас требуется понимание деструктуризации, обещаний, стрелочных функций, const и let, а также понимание основ Node.js.

Итак, пожалуй, начнём с того, что плагины в VS Code изолированы от самого редактора и запускаются в отдельном хост-процессе (extension host process), который представляет собой процесс Node.js с возможностью использования VS Code API. Такой подход не позволяет плагинам влиять на производительность редактора при его запуске или в процессе его работы. Для пользователя это означает, что редактор не зависнет на время выполнения задач каким-либо плагином или, если плагин выдаст фатальную ошибку.

Для экономии расхода памяти разработчики также добавили ленивую загрузку плагинов. Это означает, что плагины активируются лишь в тот момент, когда они нужны. Например, если пользователь открывает Markdown-файл, то плагины, работающие с Markdown, будут загружены только в момент открытия файла. Разумеется, мы должны сообщить редактору о том, когда именно он должен активировать какой-либо плагин. О настройке ленивой загрузки мы поговорим позднее в разделе про файл манифеста.

Помимо всего прочего, плагины делятся на три вида в зависимости от функционала:

К первому виду относятся стандартные плагины, которые запускаются в хост-процессе, активируются в нужный момент и не требуют серьёзных вычислений.

Ко второму виду относятся так называемые «языковые серверы». Клиентская часть плагина запускается в хост-процессе, а серверная часть создаёт дополнительный процесс, в котором производятся все сложные вычисления. К такому виду плагинов относятся линтеры.

К третьему виду относят «службы отладки», которые пишутся в виде отдельной программы и взаимодействуют с VS Code по специальному протоколу CDP (VS Code Debug Protocol).

В этой статье будет рассматриваться лишь первый вид плагинов на примере vscode-lebab. Во второй статье разбирается процесс построения второго вида плагинов на примере vscode-puglint.

Манифест плагина

publisher [string]

Имя пользователя, под которым вы зарегистрировались в vsce.

icon [string]

Путь до иконки, которая будет отображаться в магазине расширений. Размер иконки 128×128 пикселей. Также поддерживается SVG формат.

displayName [string]

Название плагина, которое будет отображаться в магазине расширений.

categories [array]

galleryBanner [object]

Настройки оформления страницы расширения в магазине. Используется для того, чтобы иконка расширения и фон подложки были контрастны. Свойство color отвечает за цвет фона, свойство theme за цвет шрифта: dark — белый, light — чёрный.

preview [boolean]

Флаг, позволяющий пометить плагин сообщением о том, что он доступен в режиме предварительного просмотра.

activationEvents [array]

Массив событий, в случае наступления которых плагин будет активирован редактором. Поддерживаются следующие события, активирующие плагин в том случае, если будет:

contributes [object]

С помощью этого поля в package.json разработчик описывает своё расширение. Доступно довольно большое количество всевозможных полей, описывающих:

extensionDependencies [array]

Немного про VS Code API

Как и полагается любому крупному проекту, VS Code имеет довольно обширный API, доступный разработчикам плагинов. Рассмотрим лишь так называемые пространства имён:

Пишем стандартный плагин

Постановка задачи

В этой части статьи я буду описывать процесс написания плагина для VS Code на основе lebab, который автоматически конвертирует JavaScript-код, написанный по стандарту ES5 в ES2015. Это проект является альтернативой проекту Babel, но в обратную сторону.

Манифест

И снова скажу, что написание плагина начинается не с кода на JavaScript, а с манифеста. Первым делом создаём файл package.json и пишем туда пару десятков строк, описывающих плагин. Полный листинг манифеста вы сможете найти в репозитории плагина vscode-lebab. Остановимся именно на тех моментах, которые касаются работы с VS Code.

Во-первых, укажем информацию, которая будет отображаться в маркете:

Во-вторых, укажем массив событий, на которые наш плагин должен откликаться. Про команду lebab.convert я расскажу немного позднее.

Убираем из маркета лишнее

Я очень прошу, убирайте всё лишнее из плагина, иначе я вас вычислю по IP и накажу.

Базовый код

Для начала определим две функции. Первая функция будет иметь имя activate и вызываться в том случае, если плагин был активирован событием, указанным в манифесте. Вторая функция имеет имя deactivate и вызывается в том случае, если плагин был деактивирован. Под деактивацией следует понимать последействие команды, а не удаление плагина. Её предназначение в большинстве плагинов излишне, поэтому она не обязательна. Далее в статье я не буду упоминать функцию деактивации плагина.

Напомню, что в файле манифеста была указана команда lebab.convert — самое время её зарегистрировать. Для регистрации команд существует два метода:

Второй метод используется крайне редко, вследствие того, что, в основном, плагины нацелены на работу с содержимом текстового редактора.

Чисто практически, вы можете обращаться к свойствам объекта и работать с полученными из него данными. Но, разумеется, лучше всего обращаться к этому объекту с помощью определённых методов. На данном этапе нам нужно получить текст файла, чтобы в дальнейшем обработать его, и настройки, определённые в редакторе для нашего плагина.

Настройки редактора нужно получать в момент вызова команды, иначе, если получить их в момент активации плагина, то при обновлении настроек редактора, объект в переменной не обновится.

Далее я не буду рассматривать процесс вызова Lebab, потому что это элементарное действие, не относящееся к VS Code. Покажу лишь тот участок, что отвечает за вставку обработанного текста обратно в окно редактора. Для этого мы обратимся к объекту textEditor и вызовем метод edit с коллбэком, представленным ниже. Конечно же, код должен располагаться после получения текста документа и настроек редактора в функции обратного вызова регистрации команды.

Собственно, это всё, что требуется сделать в обычном плагине для VS Code: получить текст, обработать его и вернуть обратно. Полный листинг кода содержит 52 строки и размещён на GitHub в репозитории vscode-lebab.

Как можно заметить, ничего сложно — простейший JavaScript-код, который разбавлен вызовами необходимых API редактора. В этой статье был рассмотрен простейший случай, когда у вас есть готовое решение и его нужно подружить с редактором. В случае, если готового решения нет, то лучше оформить его в виде npm-пакета по всем канонам (тесты, документация), а уже потом подружить его с редактором. В качестве примеров, если решите писать плагин на JavaScript, вы можете посмотреть код следующих плагинов:

Что-то вместо вывода

В этой статье я помог вам начать писать плагины для VS Code. Многое осталось за кулисами и не рассматривалось, однако вам в любом случае придётся обращаться к документации. Считайте, что эта статья преследует цель показать, что писать плагин для VS Code довольно просто, причём необязательно делать это на TypeScript. Хотя, при этом не стоит забывать, что TypeScript — это всё тот же JavaScript.

Также, советую посмотреть на код, представленный в репозитории VSCode-Sample. Здесь автор собрал примеры взаимодействия с UI редактора, которые, возможно, помогут вам освоиться.

Если вам интересна тема разработки плагинов для VS Code, то добро пожаловать во вторую часть этой статьи, в которой рассматривается процесс написания плагина, использующего языковой сервер.

Что почитать?

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Топ VSCode расширений, которые ускорят вашу разработку на JavaScript

VSCode — это кроссплатформенный редактор с открытым исходным кодом, ставший любимым среди программистов, особенно среди веб-разработчиков. Он быстрый, расширяемый и имеет массу возможностей и настроек. Если вы до сих пор не работали с ним, то советую попробовать.

Для VSCode созданы тысячи расширений. Я намерен представить несколько из них, которые использую каждый день. Приступим!

Quokka.js

Quokka.js — это плагин для JavaScript и TypeScript, который отображает результаты выполнения кода в редакторе, непосредственно во время его написания. Попробуйте сами!

Установив расширение, нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы запустить палитру команд редактора, и затем введите Quokka, чтобы увидеть список доступных команд плагина. Выберите и запустите команду New JavaScript File или нажмите ⌘ + K + J, чтобы создать новый файл. Любой введенный код будет выполнен немедленно.

Bracket Pair Colorizer & Indent Rainbow

Квадратные и круглые скобки — неотъемлемая часть многих языков программирования. В таком языке как Javascript, простая станица может иметь целый поток этих символов, среди которых тяжело отличить пары открытых и закрытых скобок. В этот момент на помощь приходят Bracket Pair Colorizer и Indent Rainbow. Это два разных расширения. Однако, вместе они представляют отличную комбинацию. Эти расширения наполнят ваш редактор морем красок, сделают блоки кода отличимыми друг от друга и придадут им приятный вид.

Без Bracket Pair Colorizer и Indent Rainbow

Установив Bracket Pair Colorizer и Indent Rainbow

Сниппеты

Существует множество сниппетов для разных направлений: JavaScript (или другие языки), React, Redux, Angular, Vue, Jest. Лично я считаю JavaScript сниппеты очень полезными, особенно с тех пор как начал работать преимущественно с JS.

Несколько хороших расширений со сниппетами:

Todo Highlighter

Плагин выделяет TODO/FIXME или другие комментарии в яркие цвета, что довольно тяжело не заметить. Модное нововведение Todo Highlighter — список выделенных комментариев, который выводится в консоли.

Todo Highlighter

Import Cost

Это расширение позволяет увидеть размер импортируемых модулей. Вы сможете понять, в каком месте вы импортируете библиотеку целиком, а в каком конкретную ее часть. Это окажет неоценимую помощь со сборкой проекта в Webpack.

Import Cost

Rest Client

Веб-разработчики часто взаимодействуют с различного рода REST API. Для изучения ссылок и проверки ответов на запрос, применяют такие инструменты как Postman. Так зачем использовать отдельное приложение, когда можно то же самое сделать в редакторе? Поприветствуйте Rest Client. Он позволяет отправлять HTTP-запросы и просматривать ответ непосредственно в Visual Studio Code.

Rest Client

Auto Close Tag & Auto Rename Tag

С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.

Они также работают с JSX и множеством других языков (XML, PHP, Vue, JavaScript, TypeScript, TSX).

Auto Rename Tag

Auto Close Tag

GitLens

Со слов автора, GitLens расширяет возможности Git, встроенного в Visual Studio Code. Плагин включает удивительное количество функций, таких как указание автора, поиск коммитов, история и проводник. Вы можете изучить полное описание этих возможностей здесь. Если вы работаете с Git, то вы обязаны установить этот плагин.

GitLens

Существуют другие расширения, выполняющие специфические задачи. Если GitLens оказался для вас слишком объемным или вам не требуется большая часть его функций, то советую взглянуть на следующий список:

Git Project Manager

GPM позволяет открыть окно с новым репозиторием напрямую из редактора. Проще говоря, вы можете открыть другой репозиторий не покидая VSCode.

После установки данного расширения, пропишите gitProjectManager.baseProjectsFolders в список адресов, содержащих репозитории.

Indenticator

Визуально выделяет текущую глубину отступа. С этим плагином, вы легко различите блоки, расположенные на разных уровнях.

Indenticator

VSCode Icons

Новые иконки придадут редактору привлекательности!

VSCode Icons

Dracula (Theme)

Полюбившийся мне внешний вид.
Dracula theme

Другие плагины, которые могут вам пригодиться:

Лучшие расширения для редактора VSCode

Сделайте максимально комфортной свою работу в редакторе Visual Studio Code при помощи дополнительных расширений. Подборка лучших расширений для VSCode.

Основной редактор которым я пользуюсь для написания кода стал Visual Studio Code (сокращённо VSCode). До этого я работал в редакторе Sublime Text, который полностью удалил через две недели после того как начал юзать VSCode, просто потому что VSCode гораздо круче и быстрее.

В этой статье я хочу рассказать вам о лучших расширениях для редактора VSCode, которыми сам пользуюсь и советую обратить на них ваше внимание.

По умолчанию в VSCode уже установлен плагин Emmet, а вот какие расширения стоит установить, чтобы сделать вашу работу быстрее и комфортнее, читайте дальше.

Расширения для Visual Studio Code

Расширение Project Manager поможет вам легко получать доступ к вашим проектам, независимо от того где они находятся. Вы можете определить свои собственные избранные проекты или выбрать для автоматического обнаружения проектов VSCode, Git, Mercurial и SVN-репозиториев или любой папки.

В общем, любую папку на компьютере вы можете сделать проектом и при помощи этого расширения сможете быстро переключаться между вашими проектами или открывать их в новом редакторе.

Расширение позволяет вам делать закладки на строки файла, о чём сигнализирует метка на полях.

Закладки имеют собственную панель проводника и иконку на левой панели меню, что обеспечивает быстрый доступ к закладкам. Их можно добавлять неограниченное количество.

open in browser

Расширение Open in Browser добавляет возможность быстро открывать в браузере файлы html.

С этим расширением не нужно долго возиться чтобы открыть файл в браузере.

Path Intellisense

Аналогичное расширение Path Autocomplete.

Path Autocomplete

Выполняет тот же функционал что и Path Intellisense, добавляя путь и имена файлов.

В настоящее время у меня отключен Path Intellisense, а включен Path Autocomplete. Я тестирую какое из этих двух расширений быстрее реагирует и даёт подсказки в интелесенс. Пока мне больше нравится Path Autocomplete, впечатление что он быстрее.

file-size

Это расширение показывает в статус баре редактора размер активного файла.

Я искал настройку в параметрах VSCode, чтобы отображать размер файла, но не нашёл. Зато данная небольшая утилита решает эту проблему и выводит в статус-баре редактора информацию о размере файла.

htmltagwrap

Это расширение делает обёртку выделенного фрагмента тэгами HTML.

Если привыкнуть и запомнить команду, то очень круто.

Active File In Status Bar

Bracket Pair Colorizer

Данный плагин позволяет задать цвет для каждой пары скобок, что позволяет визуально контролировать вложенность или правила условий в коде. Работает для круглых (), фигурных <> и квадратных скобок [].

До установки этого плагина у меня были проблемы с закрытием скобок, теперь я по цвету вижу вложенность скобок.

Иконки файлов и папок

VSCode simpler Icons with Angular

Выбираете пункт Тема значков файлов и в командной строке редактора появятся установленные у вас темы значков файлов. Три темы дефолтных от VSCode и то что вы добавите. В списке просто стрелками вверх-вниз листайте темы и иконки тут же будут применяться и отображается в проводнике на файлах. Так быстро подберёте ту тему которая вам нравится.

Повторюсь, что мне понравилась тема VSCode simpler Icons with Angular

Live Server

Запускает локальный сервер разработки с функцией активной перезагрузки для статических и динамических страниц.

Лично я предпочитаю работать с Browsersync через Gulp, который шустрее, функциональней и создаёт меньше нагрузок, но так как не всегда и не в каждый проект устанавливается Gulp, то находится работа и для расширения Live Server.

Профилированные расширения для VSCode

А теперь предложу список расширений для VSCode для специфических направлений.

Работа с Git и Github

Помимо того что VSCode по умолчанию работает с гитом, на Marketplace есть очень много расширений на самый любой вкус для работы с Git и Github. Я меня стоят такие:

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Это расширение позволяет подключаться к серверу по FTP и SFTP протоколам.

Это расширения достаточно молодое (опубликовано в мае 2018 г) и я ожидаю, что оно будет развиваться и обрастать полезным функционалом.

Для командной разработки

В редакторе VSCode можно вести совместную разработку. Для этого есть расширение VS Live Share

Можно расширить функционал совместной разработки и дополнительно накатить звуковой чат и Slack. Для этого Microsoft специально сделал сборку VS Live Share Extension Pack, который установит VS Live Share и все необходимые пакеты

cdnjs

Это расширение осуществляет поиск и подключение javascript-библиотек на сайте cdnjs.com из командной строки редактора VSCode.

vscode-pdf

Просмотр файлов PDF в редакторе VSCode

Это далеко не все расширения которые которыми я пользуюсь и хотел бы порекомендовать. При появлении времени я обязательно буду дополнять данный список расширений для Visual Studio Code. Если вы тоже знаете какие крутые расширения для VSCode, поделитесь пожалуйста в комментариях. Желательно по возможности и ссылку на него. Всё таки поиск достойных расширений отнимает много времени и можно легко пропустить что то интересное.

VSCode хороший и удобный редактор, но что то у меня не получается подключиться к FTP через VSCode. Это вообще реально? Подскажите рабочий плагин для FTP.

Подскажите рабочий плагин для FTP

В статье упоминается расширение RemoteFS. Оно подключает редактор к серверу через FTP. Нормально работает.

На хостинге создаёте пользователя FTP (если не знаете как, обратитесь в тех. поддержку хостинга, они подскажут как). Затем в json-параметрах в настройках редактора вставляете код:

Затем в любое время чтобы подключиться по FTP делаете следующее:

Редактор подключится к серверу и в рабочей области появится структура каталогов и файлов на сервере.

*** Авторизируйтесь чтобы писать комментарии.

Как установить плагины

Плагины позволяют добавлять языки, отладчики и инструменты для поддержки рабочего процесса разработки.

Богатая модель расширяемости VS Code позволяет авторам плагинов подключаться непосредственно к пользовательскому интерфейсу и предоставлять функциональность через те же API, которые используются в VS Code.

В этой статье объясняется, как находить, устанавливать и управлять расширениями из магазина приложений.

Поиск плагинов

Это покажет вам список самых популярных плагинов в редакторе.

Каждое дополенение в списке включает краткое описание, издателя, количество загрузок и пятизвездочный рейтинг. Вы можете кликнуть на него, чтобы отобразить страницу подробностей, где можно узнать больше.

Установка плагинов

Чтобы установить плагин, выберите кнопку Установить. После завершения установки кнопка Установить сменится кнопкой Управление шестеренкой.

Например, давайте установим популярное дополение TODO Highlight. Оно выделяет текст типа ‘TODO:’ и ‘FIXME:’ в вашем исходном коде, чтобы вы могли быстро найти недоделанные разделы.

В окне «Расширения» (Ctrl+Shift+X) введите «todo» в поле поиска, чтобы отфильтровать результаты поиска. Вы должны увидеть дополение TODO Highlight в списке.

Дополнение однозначно идентифицируется по идентификаторам издателя. Если вы выберете TODO Highlight, вы увидите страницу подробностей, где вы можете найти идентификатор плагина, в данном случае wayou.vscode-todo-highlight. Знание идентификатора расширения может быть полезно, если существует несколько плагинов с одинаковыми названиями.

Чтобы увидеть TODO Highlight в действии, откройте любой файл исходного кода и добавьте текст ‘TODO:’, и вы увидите выделенный текст.

Это был лишь один пример того, как установить и использовать плагин. В репозитории есть тысячи расширений, поддерживающих сотни языков программирования и задач.

Все от полнофункциональной поддержки языков Java, Python, Go и C++ до простых расширений, которые создают GUID, изменяют цветовую тему или добавляют виртуальных питомцев в редактор.

На странице подробностей вы можете прочитать README и просмотреть его:

Лучшие расширения JavaScript VSCode для более быстрого программирования

Для VSCode было сделано множество расширений. В этом списке я расскажу, какие есть VS Code плагины, которые я использую ежедневно. Начнем!

Quokka.js

После установки расширения нажмите Ctrl/Cmd + Shift + P, чтобы отобразить командную панель редактора. Затем введите Quokka, чтобы увидеть список доступных команд. Выберите и запустите команду New JavaScript File. Также можно нажать Cmd + K + J, чтобы открыть файл сразу же. Все, что вы будете писать в этом файле, будет тут же проходить отладку.

Bracket Pair Colorizer и Indent Rainbow

Сниппеты

Существует большое количество сниппетов для многих вещей: Javascript (или любой другой язык), React, Redux, Angular, Vue, Jest. Лично мне удобнее всего пользоваться сниппетами для JavaScript, ведь я больше всего работаю на JS.

Хорошие расширения со сниппетами:

JavaScript (ES6) code snippets ;

React-Native/React/Redux snippets для es6/es7 ;

Todo Highlighter

Часто бывает такое, что вы прописываете функцию и думаете, что наверняка есть лучший способ сделать то же самое. Вы оставляете комментарий: «// Нужно переделать позже» или что-то подобное. Затем вы забываете об этой заметке и отправляете код в использование. Надеемся, с Todo Highlighter такого не случится.

Import Cost

Этот плагин позволяет увидеть размер импортируемого модуля. Это очень помогает в работе с такими пакетами, как, к примеру, Webpack. Вы сможете понять, импортируете ли вы всю библиотеку целиком или же только конкретную утилиту.

Однако остается еще одна проблема: это расширение не показывает вес кастомных файлов или модулей.

REST Client

Auto Close Tag и Auto Rename Tag

GitLens

Есть и другие VS Code плагины, которые фокусируются на конкретном функционале. Вы можете установить их, если GitLens кажется слишком крупным или если вы не пользуетесь большинством его функций.

Git Project Manager

Git Project Manager(GPM) позволяет открыть новое окно с git-репозиторием прямо из окна VSCode. По сути теперь вы сможете открыть еще одно хранилище, не закрывая VSCode.

После установки расширения вам нужно будет добавить gitProjectManager.baseProjectsFolders в список URL, которые содержат репозитории.

Indenticator

VSCode Icons

Иконки, благодаря которым редактор станет выглядеть еще приятнее!

VSCode Great Icons ;

Dracula (Theme)

Тема, которая мне нравится.

Другие рекомендации

Выше были представлены VS Code плагины, которыми я пользуюсь постоянно. Какие еще расширения и темы вам нравятся? Расскажите о них в комментариях к этой статье.

Топ-10 расширений VSCode в 2020 году

Перевод статьи «10 Top Visual Studio Code Extensions in 2020».

Visual Studio Code от Microsoft это один из самых популярных редакторов кода. Он и сам по себе обладает целым рядом достоинств, но помимо этого позволяет расширять функционал и таким образом увеличивать продуктивность. VSCode это результат работы Microsoft в сфере открытого исходного кода: редактор в готовой сборке доступен бесплатно, а его исходный код открыт.

Расширяемость за счет плагинов и расширений — одна из причин популярности VSCode. Благодаря этим расширениям можно существенно улучшить базовый функционал редактора и сделать процесс разработки более эффективным и удобным.

1. Import Cost

В процессе разработки мы часто добавляем в свои проекты различные зависимости. И хотя модульная разработка в настоящее время занимает очень важное место в разработке вообще, лучше все же подходить к импортам с осторожностью. Плагин Import Cost для JavaScript и TypeScript позволяет оценивать зависимости на лету.

Import Cost показывает размер зависимости в той же строке, где вы добавляете ее в свой код. Этот легковесный плагин — хороший вспомогательный инструмент для эффективного управления зависимостями. В документации перечислены разные виды синтаксиса, для которых этот плагин показывает размер зависимостей.

А в этой статье создатель плагина рассказывает, что его мотивировало разработать подобный инструмент.

2. File Utils

В том, что касается написания кода в файле, и сам VSCode работает отлично. Но вам может пригодиться функционал, улучшающий ваши возможности в плане управления многочисленными файлами в проекте и зависимостями. Расширение File Utils позволяет осуществлять операции с файлами прямо в палитре команд.

Вы можете вызвать палитру команд и выбрать в ней файл, с которым хотите что-либо сделать. Например, можно создать дубликат (копию) этого файла, переместить его, удалить, переименовать — и все это в дополнение к базовым операциям, касающимся папок. Это полезный плагин, с помощью которого вы сможете управлять файлами проекта, не выходя из VSCode.

3. Project Manager

Расширение File Utils позволяет осуществлять простые операции с файлами, а с плагином Project Manager вы можете зайти гораздо дальше в деле управления проектами. Для начала этот плагин добавляет новую боковую панель для работы с несколькими проектами. При помощи этого расширения вы сможете работать с Git-, SVN- или Mercurial-репозиториями. Кроме того, вы сможете управлять удаленными репозиториями.

Это расширение предоставляет вам удобный функционал, доступный в графическом интерфейсе, но помимо того оно привносит дополнительные команды для работы над проектами. Для кастомизации этих функций по своему вкусу вы можете покопаться в настройках.

Расширение Project Manager обогащает ваш редактор продвинутым функционалом, таким как управление удаленными репозиториями и интерактивные команды, а это существенно улучшает цикл разработки.

4. SVG Viewer

«SVG» расшифровывается как «масштабируемая векторная графика». По сути SVG это текстовые файлы, которые хранят векторные изображения для веба. При открытии SVG-файла в текстовом редакторе обычно отображается текстовое содержимое. Но когда вы работаете над редактированием этих файлов напрямую, вы можете захотеть увидеть, как выглядит изображение.

Плагин SVG Viewer позволяет вам визуализировать SVG-файлы и таким образом экономить время: вам не придется открывать второе приложение, чтобы просмотреть результаты своей работы. Это особенно важно, когда вы просто вносите быстрые правки в SVG.

5. Code Spell Checker

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

Этот пакет обеспечивает подсветку ошибок в файле. Проверка правописания в нем реализована для различных популярных языков программирования. Если внести некоторые изменения в настройки, Code Spell Checker будет работать с указанными типами файлов.

При установке пакета вы получаете словари для американского и британского английского, но можно добавить еще восемь языков и словарь медицинских терминов.

6. Remote — SSH

В силу того, что разработка сейчас по своей природе является распределенной, вам может понадобиться логиниться на удаленном сервере. Например, чтобы обновить или протестировать ваш код. Это можно легко сделать при помощи стороннего SSH-клиента, но зачем же? Ведь есть специальное расширение VSCode, позволяющее удаленно работать на серверах без необходимости выходить из приложения.

Remote — SSH — это плагин от Microsoft. С его помощью вы сможете устанавливать соединение с удаленной средой разработки, а это значит, что в принципе можно вообще не держать код на своей машине. Также благодаря этому плагину вы сможете переключаться между несколькими удаленными средами разработки и выполнять разные задачи в разных системах.

В плагине реализована поддержка подключения к удаленным системам на Linux, Windows и macOS.

Разработка на удаленных серверах в настоящее время имеет большое значение. В связи с этим плагин Remote — SSH является абсолютно необходимым расширением VSCode.

7. Trailing Whitespace Visualizer

Проверить, что в коде нет повторяющихся пробелов — хорошая практика программирования. Имеются в виду повторяющиеся пробелы (или табы), идущие в конце любой строки перед символом новой строки. Они совершенно не нужны в коде и лишь увеличивают размер файла, так что удалить их будет хорошей идеей.

Плагин Trailing Whitespace Visualizer подсвечивает повторяющиеся пробелы в вашем коде, а также в коде коллег, с которым вы работаете.

8. Debugger for Chrome

При написании кода фронтенда (на JavaScript), для проверки, все ли работает, обычно мы запускаем код в браузере. Инструменты разработчика в Chrome позволяют заниматься отладкой JavaScript в консоли — это очень удобно. Плагин Debugger for Chrome интегрирует VSCode в Chrome или другой браузер на базе Chromium, в котором поддерживается Chrome Dev Tools Protocol.

С этим плагином вы получите много функций для отладки, а чтобы ими воспользоваться, вам не придется выходить из редактора.

9. ESLint

ESLint это статический анализатор кода для JavaScript. Он сканирует ваш код в поиске синтаксических ошибок и неэффективных практик кодинга. Расширение ESLint для VSCode позволит вам пользоваться этим инструментом прямо в редакторе. Правда, придется установить ESLint глобально в свою систему.

10. Live Server

Расширение Live Server позволяет запускать локальный сервер разработки для тестирования кода. В нем есть функция перезагрузки в режиме реального времени как для статических, так и для динамических веб-страниц.

В этом расширении можно настроить номер порта и браузер по умолчанию, оно поддерживает HTTPS и прокси.

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

5 расширений и тем для VS Code, которые способны изменить жизнь фронтенд-разработчика

Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких расширениях и темах для популярного редактора VS Code, которые способны улучшить жизнь разработчика.

SCSS IntelliSense

Создание переменных в SCSS — это просто и приятно. А как их запомнить? Вот с этим обычно возникают сложности.

Вот как выглядит работа с расширением SCSS IntelliSense.

Расширение SCSS IntelliSense в действии

Auto Rename Tag

Почему бы не призвать себе на помощь машину, которая помогла бы редактировать теги автоматически? Для того чтобы это сделать, достаточно воспользоваться расширением Auto Rename Tag. Оно, при редактировании открывающего тега, автоматически меняет и закрывающий. То же самое, с точностью до наоборот, происходит и в том случае, если меняют закрывающий тег.

Вот как работает Auto Rename Tag.

Работа с расширением Auto Rename Tag

Duplicate Action

Возможность создания дубликатов файлов и папок с использованием меню, вызываемого щелчком правой кнопкой мыши, настолько полезна, что она должна быть встроена в VS Code. Но редактор этот, и без такой возможности, замечательный, поэтому ему можно простить подобный недочёт.

Расширение Duplicate Action и изменения в контекстном меню файла

CodeStream

Если в двух словах описать CodeStream, то можно сказать, что это расширение сравнимо с системой комментирования кода из будущего.

Многим программистам не нравится покидать свою IDE. Но для того чтобы объяснять что-то коллегам, и чтобы самим задавать вопросы, приходится выходить из привычной среды и пользоваться Trello, Slack, Asana, Bitbucket, Microsoft Teams. CodeStream поддерживает массу инструментов и IDE, что позволяет работать с проблемами и вопросами, не покидая привычную среду редактора кода. Многие, занимаясь работой, стремятся попасть в так называемое «состояние потока». Выход из редактора обычно выводит человека из этого состояния. Благодаря CodeStream вопросы, касающиеся кода, можно решать, не покидая привычной среды.

Обсуждение кода в CodeStream

Night Owl

Night Owl — это одна из лучших тем, когда-либо созданных для IDE. Я, вот уже три года, ежедневно ей пользуюсь. Ниже показан скриншот моего реального рабочего экрана. Название этой темы намекает на то, что она предназначена для тех, кто сидит за компьютером по ночам. Она, и правда, хорошо подходит для ночной работы, не давая глазам перенапрягаться, а мягкие синие тона, используемые в ней, помогают спокойно решать сложные задачи.

Бонус: тема Synthwave ‘84

Эта тема родом из вселенной киберпанка. Она хорошо сочетается с кожаным плащом, с Lamborghini Countach и с генератором дыма. Если вам всё это близко — включайте любимую Vaporwave-музыку и пишите свой прекрасный код до тех пор, пока ваше сознание не влилось в базу данных Нейроманта.

Для того чтобы добиться эффекта свечения текста, после установки этой темы вам придётся с ней немного повозиться. Но вы, уверен, согласитесь с тем, что эта красота стоит того, чтобы приложить к её достижению некоторые усилия.

Тема Synthwave ‘84

Уважаемые читатели! Знаете какие-нибудь интересные расширения и темы для VS Code?

Лучшие «красочные» расширения VSCode

Разработчики проводят много времени за написанием кода. А VSCode — один из самых популярных редакторов на рынке.

Как по мне, персонализация редактора помогает наслаждаться тем временем, которое проводишь в нем. Я поискал и протестировал самые лучшие расширения для VSCode. Многие из них нацелены на повышение продуктивности разработки.

В этой статье я собрал те расширения, которые связаны с «раскрашиванием» редактора.

Indent Rainbow

Этот инструмент позволяет раскрасить отступы в коде. Каждый уровень отступов приобретает свой цвет.

Вы можете также установить Indent Rainbow Palettes от Evondev и создавать собственные палитры. Установите сперва первое расширение, затем второе, а затем подберите себе новую палитру цветов.

Bracket Pair Colorizer

Расширение для раскрашивания пар скобок. Скобки, образующие пару, окрашиваются в один цвет. Это помогает искать потерянные или лишние скобки.

Bracket Pair Colorizer было популярным расширением (больше 4 миллионов установок). Однако теперь оно устарело. Разработчики VSCode обратили внимание на то, что этот функционал очень затребован, и добавили опцию раскрашивания скобок в сам редактор. Включить ее можно, прописав «editor.bracketPairColorization.enabled»: true в настройках.

Использование настроек редактора — лучший вариант с точки зрения производительности. Но если вы почему-то не хотите их менять, можно воспользоваться другим расширением — Rainbow Brackets.

Colorize

Это расширение визуализирует цветовые переменные, подсвечивая их в соответствии с кодом цвета. Очень удобно для перевода hex-кодов и имен переменных.

Peacock

Peacock позволяет раскрасить окна редактора VSCode. Это отличная функция для управления несколькими рабочими пространствами. Когда у вас их несколько, а выглядят они примерно одинаково, легко забыть, в каком вы находитесь. Но яркие цвета Peacock не дадут вам ошибиться. Подбирать подходящие цвета можно самостоятельно.

VSCode Icons

Добавление значков может помочь при навигации по папкам. VSCode Icons имеет обширную библиотеку иконок для самых разнообразных видов файлов.

Благодаря значкам вы сможете просто увидеть, выбрали вы файл TypeScript или JavaScript.

Это расширение также привносит немного цвета и деталей в структуру папок.

TODO Highlight

TODO Highlight поможет настроить список TODO-комментариев и выделить их цветом. Закомментированный код часто можно просто упустить из виду, но не с этим расширением. Яркий оранжевый цвет вам точно бросится в глаза!

TODO и FIXME создаются ключевыми словами. У вас будет возможность настроить их цвет и добавить дополнительные ключевые слова.

Надеюсь, эти расширения помогут вам раскрасить ваш VSCode во все цвета радуги!

Лучшие расширения для редактора VSCode

Расширения для Visual Studio Code

Расширение позволяет вам делать закладки на строки файла, о чём сигнализирует метка на полях.

open in browser

Расширение Open in Browser добавляет возможность быстро открывать в браузере файлы html.

С этим расширением не нужно долго возиться чтобы открыть файл в браузере.

Path Intellisense

Аналогичное расширение Path Autocomplete.

Path Autocomplete

Выполняет тот же функционал что и Path Intellisense, добавляя путь и имена файлов.

file-size

Это расширение показывает в статус баре редактора размер активного файла.

htmltagwrap

Это расширение делает обёртку выделенного фрагмента тэгами HTML.

Если привыкнуть и запомнить команду, то очень круто.

Active File In Status Bar

Bracket Pair Colorizer

Иконки файлов и папок

VSCode simpler Icons with Angular

Повторюсь, что мне понравилась тема VSCode simpler Icons with Angular

Live Server

Профилированные расширения для VSCode

А теперь предложу список расширений для VSCode для специфических направлений.

Работа с Git и Github

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Это расширение позволяет подключаться к серверу по FTP и SFTP протоколам.

Для командной разработки

В редакторе VSCode можно вести совместную разработку. Для этого есть расширение VS Live Share

cdnjs

vscode-pdf

Просмотр файлов PDF в редакторе VSCode

Топ-10 расширений Visual Studio Code для разработки на Python

Хочешь знать больше о Python?

Подпишись на наш канал о Python в Telegram!

Перевод статьи Казза Йокомизо “Top 10 Visual Studio Code extensions for Python development”.

Я уже достаточно долгое время пользуюсь Visual Studio Code (VSCode). Последние два моих проекта я разрабатывал в VSCode. До того я постоянно пользовался Vim, но мне нужно было нечто большее.

VSCode от Microsoft это надежный мультиплатформенный редактор с открытым исходным кодом, который быстро завоевал мою симпатию.

VSCode весьма расширяемый и настраиваемый. Давайте посмотрим на некоторые из расширений, которые могут сделать ваш опыт разработки на Python гораздо приятнее.

1. Python by Microsoft

Расширение с интенсивной поддержкой языка Python (включая Python 3.6). Имеет такие фичи как линтинг, отладка, IntelliSense (автодополнение), навигация по коду, форматирование кода, рефакторинг, модульные тесты, сниппеты и многое другое!

Эта статья была бы неполной без упоминания официально расширения для Python от Microsoft. Я мог бы написать целый пост только о нем одном.

2. Python Docstring от Нильса Вернера

Расширение Visual Studio Code для быстрой генерации докстрингов для функций Python.

Если вы, как и я, придерживаетесь стандартов PEP8, тогда вы пишете много докстрингов. И здесь это расширение приходится как нельзя более кстати.

3. Code Runner от Юна Хана

Название Code Runner («кодозапускатель») говорит само за себя. Это расширение выполняет предложения из разнообразных языков и выдает результат во встроенном окне – Output Window.

Оно экономит время, поскольку вам не приходится переключаться между редактором и терминалом.

4. Anaconda Extension Pack от Microsoft

Anaconda Extension Pack (пакет расширений «Anaconda») это набор расширений, улучшающих опыт пользователей «Anaconda», которые используют Visual Studio Code. Он включает следующий набор расширений Visual Studio Code:

Подсвечивает хвостовые пробелы и моментально удаляет их! Это расширение является переносом популярного плагина Trailing Spaces для Sublime Text.

Поскольку Python является отступозависимым языком, хвостовые пробелы могут приводить к ошибкам.

6. Better Comments от Аарона Бонда

Расширение Better Comments («лучшие комментарии») поможет вам создавать более дружественные к человеку комментарии в вашем коде. С помощью этого расширения вы сможете разбить ваши аннотации на категории:

Лично я не считаю, что комментарии это лишнее. Сколько раз вам случалось вернуться к кодовой базе после перерыва и совершенно не понимать ее? Со мной такое частенько бывает. Вот почему я настоятельно рекомендую людям документировать их код.

А это расширение помогает мне использовать мои комментарии по максимуму.

7. Djaneiro – Django-сниппеты от Скотта Баркмана

Python-расширение от Microsoft, довольно всеобъемлющее. Они также предоставляют сниппеты для Python.

Но вы должны попробовать это расширение Баркмана для сниппетов, относящихся к Django. Это коллекция сниппетов для шаблонов, моделей, представлений, полей и форм Django.

8. flask-snippets от cstrap

Коллекции Flask-сниппетов. Изначально перенесенные из PyCharm, TextMate, SublimeText и другие редакторов/IDE.

Между делом я также хочу упомянуть расширение Jinja от wholroyd. Это расширение добавляет в VS Code поддержку расцветки языка для шаблонизатора языка Jinja.

9. Code Linting

Чтобы включить линтинг в вашем VSCode, нужно сначала установить линтер.

Как только pylint будет установлен в вашем рабочем окружении, он будет работать из коробки.

10. GitLens — сверхмощный Git от Эрика Амодио

GitLens усиливает способности Git, встроенные в Visual Studio Code. Это расширение помогает вам с первого взгляда визуализировать авторство кода с помощью Git blame аннотаций и code lens, беспрепятственно перемещаться и исследовать Git-репозитории, получать ценную информацию с помощью мощных команд сравнения и многое другое.

В конце концов контроль версий это неотъемлемая часть разработки программного обеспечения.

Это был последний пункт нашей десятки. Я надеюсь, вы найдете в этой статье что-то новое и полезное для себя.

9 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.

Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.

Emmet

Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.

Material Theme

Приятная тема для редактора с разными акцентными цветами.

Live Server

Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.

Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»

CSS Peek

Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.

Bracket pair colorizer

Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.

Prettier — code formatter

Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.

Auto rename tag

Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.

Path autocomplete

Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.

HTML CSS Support

Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.

Используем VS Code для Веб-разработки

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.

React и JSX

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:

Последний, впрочем, может быть заменен на XO.

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете

Сниппеты

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Полезные расширения

Align

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Бинды (сочетания клавиш)

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Нет нужного расширения?

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Статьи

Зачем нужно свойство display в CSS

Самый простой способ использовать флексбоксы.

Что должен уметь мидл в разных компаниях

Опыт «Вконтакте», Тинькофф, EPAM и других.

Полупрозрачный градиент над картинкой на чистом CSS

Такой чистый и красивый.

Нужно ли покупать новый компьютер для вёрстки

Реальная история, где главный злодей Фигма.

«Верстать сложно» и еще 6 мифов о программировании

Рушим мифы на раз-два.

Как проверить поддержку CSS-селекторов с помощью JavaScript

Инструкция по использованию @supports selector() на CSS и JavaScript.

34 инструмента для веб-разработчика на каждый день

Полезный софт на каждый день.

Как сделать параллакс

Всё просто и быстро.

Шаблон простого сайта на HTML

Быстро, чётко и по делу.

Как стать JavaScript-разработчиком в 2022

Внутри — пошаговый план и полезные материалы для обучения.

Практикум

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Плагины VS Code для верстки

Уснановка плагинов/расширений VS Code

Список полезных плагинов

Устанавливает интерфейс VS Code на русский язык.

Когда вы переименовываете один HTML-тег, автоматически переименовывается парный тег HTML.

Расширение VSCode, которое поможет вам компилировать / переносить файлы SASS / SCSS в файлы CSS в реальном времени.

Для вставки одного тега внутрь другого (обернуть контент в нужный тэг).

Расширение позволяет идентифицировать совпадающие скобки по цвету. Это расширение особенно полезно для JavaScript.

Расширение позволяет создавать скриншоты выделенного кода.

Подборка расширений VS Code для full stack SDE

Современный full stack SDE, как и любой другой разработчик, имеет свой набор расширений для повседневной IDE. VS Code из-за своей многогранности идеально подходит для full stack, с лёгкостью заменяя кучу инструментов, таких как Android Studio, Xcode, Eclipse, IDEA, NetBeans, Visual Studio, Shell-environments и т. д.

Представляю вашему вниманию подборку из расширений для VS Code, которые использует, как минимум, один full stack SDE.

Docker

Для full stack SDE важно иметь под рукой доступ к любому окружению и при этом не умножать количество ненужных инструментов в надежде, что они когда-нибудь потребуются.

Смысл перечисленных ниже расширений в том, чтобы максимально упростить работу с контейнерами Docker:

Удалённое подключение

Итак, с контейнерами разобрались, но иногда приходится работать из дома, или, к примеру, подключаться к production руками, а старый Termux немножко мозолит глаза. Хотелось бы видеть нормальный проводник боковой панели постоянной IDE.

Тут на помощь приходит набор решений для Remote Development.

Данные расширения помогают забыть о том, что пользователь подключается к удалённому серверу, а не находится в локальной папке:

Syntax Sugar

Современный разработчик тоже человек и любит, когда всё красиво и аккуратно, а значит, в каждом full stack есть доля фронтенда, который не обходится без линтера и инструментов для форматирования и подсветки. А также бэкенд не обходится без highlight’а для различных конфигурационных файлов, а также есть сотни (возможно, тысячи) различных тем для VS Code.

Runners and previewers

Часто нужно запустить простенькую функцию или кастомизируемые команды на родном языке программирования, но поднимать Visual Studio, IntelliJ IDEA или любую другую тяжёлую IDE нет времени. Или нужно всего-то посмотреть HTML файл, но Chrome открывать тяжко. Или вам просто хочется взглянуть, что там в табличке в MySQL происходит, а тут надо консоль открывать и команды вспоминать, а для MS SQL запускать целую SQL Management Studio…

На помощь приходят Code Runners & File Previewers:

Другие инструменты

Иногда нужно немного подумать над архитектурой и порисовать yUML, DFD и так далее. А иногда хочется не открывать Chrome, а просто не вылезать из VS Code и загуглить «javascript reduce vs reduceRight» сразу на StackOverflow, MSDN, Google и ещё чтобы рейты хайлайтило. А ещё бы REST-запрос вызвать или просто открыть какой-то сайт. С этим помогут:

VSCode. 27 расширений для JavaScript разработчика

VSCode — один из лучших редакторов кода на сегодняшний день. Тем не менее удобство и эффективность во многом обеспечивают именно расширения для редактора.

Для VSCode существуют сотни плагинов для разных задач. В этом списке собраны плагины, которые наиболее актуальны для JavaScript разработчика в 2019 году. Итак начнём.

1. Project Snippets

Первый и мой самый любимый — project snippets. Это модификация встроенного в VSCode user snippets.

User snippets позволяет создавать собственные фрагменты кода для последующего использования. Если вы частенько пишите шаблоны вроде этого:

Благодаря user snippets всё, что вам нужно сделать, чтобы вставить шаблон, — это ввести соответствующий префикс.

Пример того, как создаётся сниппет:

Проблема в том, что этот сниппет и префикс сохранятся глобально и будут доступны во всех ваших проектах (в некоторых случаях это может быть очень полезно).

Глобальный файл для сниппетов становится проблемой, когда нужно разделять конкретные варианты использования. Например, когда структура проекта каждый раз отличается:

В JavaScript это отлично сработает, но если вы используете styled-components, такой синтаксис не применим, так как styled components использует обычный CSS.

Project snippets позволяет объявлять сниппеты в рамках проекта так, чтобы сниппеты не обнаруживались в других проектах. Это очень полезно.

2. Better Comments

Чем больше в вашем коде комментариев, тем трудней становиться находить их местоположение. Благодаря Better Comments вы можете назначать цвета для комментариев в зависимости от их важности или значения.

3. Bracket Pair Colorizer

Я влюбился в Bracket Pair Colorizer с первого скриншота и решил сразу же добавить его в свой инструментарий. Это дополнение определённо сделает процесс написания кода более приятным.

4. Material Theme

Material Theme — это крутая тема для VSCode. Выглядит она вот так:

5. @typescript-eslint/parser

Если вы используете TypeScript, вероятно уже задумывались перейти с TSLint конфигурации к ESLint + TypeScript. Сторонники TSLint уже объявили о планах отказаться от него в этом году.

Разработчики постепенно двигаются к переходу на @typescript-eslint/parser и связанные с ним пакеты. С новыми настройками вы всё равно сможете использовать большинство правил ESLint и сохраните совместимость с Prettier.

6. Stylelint

Я использую stylelint по нескольким причинам:

7. Markdownlint + docsify

Для заметок по проекту очень удобно использовать Markdown формат. Он хорошо читается, и к тому же существует множество доступных инструментов, которые помогают облегчить процесс написания текста Markdown. Например markdownlint.

Я также использую docsify, потому что он поддерживает Markdown формат и другие полезные фичи.

8. TODO Highlight

У меня есть привычка записывать задачи прямо в коде, поэтому я использую такие расширения, как TODO Highlight, чтобы не забывать о поставленных задачах.

9. Import Cost

Import Cost — это расширение отображает в редакторе размер пакета, который вы собираетесь импортировать. Полезный побочный эффект в том, что вы начнёте задумываться об эффективности и будете лучше понимать, что делаете.

10. Highlight Matching Tag

Highlight Matching Tag — определяет парные теги и подсвечивает их.

11. vscode-spotify

vscode-spotify позволяет управлять проигрывателем Spotify прямо из редактора VSCode. Вы можете видеть название текущего трека в строке состояния, переключать треки горячими клавишами и др.

12. GraphQL for VSCode

GraphQL становится всё более популярным в JavaScript сообществе. Неудивительно, что появилось расширение GraphQL for VSCode, которое упрощает работу с синтаксисом GraphQL.

13. Indent-Rainbow

Ещё один плагин для удобства навигации в коде. Indent-Rainbow помогает читать код, подсвечивая уровни вложенности. Например:

14. Color Highlight

Color Highlight — определяет цветовые коды и выделяет их соответствующими цветами.

15. Color Picker

Color Picker — это расширение помогает выбирать цвета и генерировать код цвета с помощью графического интерфейса.

16. REST Client

Вы даже можете передать параметры или запросить данные тела в POST-запрос, добавив всего пару строк кода:

На этом функционал расширения не ограничивается, подробнее о нём можно прочитать здесь.

17. Settings Sync

Settings Sync позволяет синхронизировать все ваши настройки, горячие клавиши, сниппеты и расширения для VSCode через ваш gist/GitHub аккаунт.

18. Todo Tree

Todo Tree поможет вам найти все задачи, которые вы создали в коде. Плагин сформирует их в единое древо, которое вы можете просмотреть в левой части панели:

19. Toggle Quotes

Toggle Quotes — это удобное расширение, которое позволяет переключаться между кавычками. Это полезно, когда вам нужно переключиться на обратные кавычки, если собираетесь использовать строковые интерполяции, особенно после того, как Prettier переформатировал кавычки.

20. Better Align

21. Auto Close Tag

Auto Close Tag облегчает написание кода, автоматически закрывая теги. К сожалению, в VSCode нет такой фичи по умолчанию хотя она очень полезна.

22. Sort Lines

Если вас, как и меня, раздражает, когда массив не выравнен, то обратите внимание на расширение Sort lines.

23. VSCode Google Translate

Расширение VSCode Google Translate будет полезно в многоязычном проекте. Для перевода вам не придётся выходить из редактора.

24. Prettier

Это расширение, которое автоматически форматирует код JavaScript, TypeScript и др.

25. Material Icon Theme

Я предпочитаю Material Icon Theme другим «иконочным» темам, потому что здесь легче разобраться с типами файлов, особенно когда вы работаете в тёмной теме.

26. IntelliSense for CSS Class Names in HTML

Расширение помогает заполнять имена классов CSS для HTML атрибута class на основе определений, обнаруженных в вашем проекте.

27. Path Intellisense

Это расширение VSCode для автозаполнения имён файлов.

39 Visual Studio Code Plugins I Have

I have used Visual Studio Code since I enrolled in NYU-ITP(2016)
At that time I used to use Atom & Sublime Text. But now I’m using VSCode and Vim(for server stuff)

The initial title was 39 Visual Studio Code Plugins I Use but during editing, I noticed that I haven’t used some of them anymore and actually, I removed around 10 plugins 😆

Anyway, I want to show the plugins I’m having now. Hopefully, some of you leave a comment to show your sets.

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

This plugin can close html tags automatically. However, sometimes cause typo. Maybe I’m not a good user lol.

Bash Debug

A bash debugger GUI frontend based on awesome bashdb scripts (bashdb now included in package).

Not use often, but sometimes I write bash code, so I keep this.

Bracket Paire Colorizer2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Some languages do not need to use the bracket, but js and c++ need to use it so this plugin helps me a lot.

C/C++ for Visual Studio Code

This preview release of the extension adds language support for C/C++ to Visual Studio Code including:

I use Xcode for C++ since I write C++ for openFrameworks but sometimes write C++ with Visual Studio. (I may need to remove this)

css2react

Convert the current selection between CSS and React’s inline style syntax.

I don’t use often, but sometimes this is really helpful since I don’t write CSS every day.

Docker

The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.

I recently started this because started learning and using Docker.

DotENV

I use this for creating a new nodejs project.

ES7 React/Redux/GraphQL/React-Native snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code`

ESLint 22M

exports autocomplete 44K

Collects ES6 exports from your project and autocompletes them. Upon completion, item is also imported using a relative path. Import is placed after last import in that file.

This is very useful, but sometimes this is tricky for me. For example, I comment out an import on purpose, then I think why this function still active. and need to back to the top lol. But, super nice plugin

GitLens 24.4M

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Just installed and seems really useful to me. Recently, I had worked on several branches and this had helped me to know what I was doing lol

GLSL Lint 21K

This extension supports linting of GLS (OpenGL Shading Language). It uses the OpenGL and OpenGL ES shader validator

I’m writing fragment shader with VSCode.

Hyper JavaScript Snippets 39K

Hyper JavaScript Snippets is a snippets collection for JavaScript and TypeScript. The snippets follow some rules to make it more friendly to intellisense, point-free-style programming etc. Prettier is highly recommanded to work with this extension.

Basically, use cl for console.log. Maybe I need to remove this.

Import Cost 992K

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

Very helpful to know how big libraries are.

JavaScript(ES6)code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

This is good because supports TypeScript.

JSON Viewer

I’m using Chrome’s JSON Viewer, so that is the reason why I use this.

Log File Highlighter 214K

A Visual Studio Code extension for adding color highlighting to log files. It is based on standard conventions for log4net log files but it’s general enough to be useful for other variations of log files as well. The colors are customizable but by default the current color theme’s colors are used.

Just installed a couple of days ago since sounds good. Now I just realized that generally, I use Vim to check log files lol I may not need to this.

npm Intellisense 1.6M

Visual Studio Code plugin that autocompletes npm modules in import statements.

To reduce import errors by type.

Output Colorizer 208K

Language extension for VSCode/Bluemix Code that adds syntax colorization for both the output/debug/extensions panel and *.log files.

Just installed a couple of days ago since sounds good.

Partial Diff 386K

You can compare (diff) text selections within a file, across different files, or to the clipboard.
Multi cursor text selection.
User defined text normalization rules to reduce the noise in the diff >(e.g. replace tab characters to spaces).
User defined text normalization rules can be toggled off without removing them from the configuration.
Compare text in 2 visible editors (i.e. tabs) with one action.
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

I just installed this to understand helpful to me.

Path Autocomplete 836K

Provides path completion for visual studio code.

I guess many are using a similar plugin with other editors. To me, this is one of the most important plugins. I think I’ve been using this a couple of years.

PlantUML 1.5M

Rich PlantUML support for Visual Studio Code.

Polacode 154K

You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts.

To be honest, I have forgotten that I installed this lol. I think I won’t have this next week 😂

Prettier 9.7M

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

I guess most people use this, even people don’t really like 😝
Actually, other teams are using this to make code clean.

Python

A Visual Studio Code extension with rich support for the Python language (for all actively supported versions of the language: 2.7, >=3.5), including features such as IntelliSense, linting, debugging, code navigation, code formatting, Jupyter notebook support, refactoring, variable explorer, test explorer, snippets, and more!

For python and for my personal project, I always try to use python.

Rainbow CSV 1.1M

Just installed a couple of days ago since looks really good. As you know, watching CSV file with an editor isn’t really fun.

React Pure To Class 58K

Replaces pure functional react components with class components. Works both for JavaScript and TypeScript.
Select a block of code, choose React Pure To Class from the Command Palette.

Right now I don’t really use this because the team uses classes, so initially start writing class. Probably I will remove this after publishing this post.

Shader languages support for VS Code 207K

Sometimes I convert my GLSL code to HLSL for Unity. However, I think I may not need this.

Shades of Purple

This is not a plugin but a theme.

NYU’s color is purple so that is the reason why I’m using this now.
If you know a nice one, please let me know in a comment

Simple React Snippets 292K

The essential collection of React Snippets and commands.

To reduce typing.

Sort lines 294K

Sort lines of text in Visual Studio Code. The following types of sorting are supported:

I don’t remember why I have this one.

TODO Highlight 1M

Highlight TODO, FIXME and other annotations within your code.

I use a similar plugin with Xcode.

Trailing Spaces 323K

highlight trailing spaces and delete them in a flash!

I just knew this a couple of days ago. To me, this is an awesome plugin since I leave unnecessary spaces quite often. This can help me to clean code as much as possible.

added the following to remove space

Exit fullscreen mode

TSLint(1.2.2) 2.2M Removed

Adds tslint to VS Code using the TypeScript TSLint language service plugin.
Please refer to the tslint documentation for how to configure the linting rules.

1.0.x was deprecated so recently I switched.

Typescript React code snippets 155K

This extension contains code snippets for React with Typescript.

While I’m writing this post, I notice I have installed snippets plugins too many lol. I think I need to select the best one to me.

vscode-icons 17.3M

Bring icons to your Visual Studio Code (minimum supported version: 1.18.1)

This can make VSCode fun.

vscode-styled-components 515K

Syntax highlighting and IntelliSense for styled-components.

For the project. Before joining the team I didn’t know styled-components, now I like it so much.

WebGl Syntax Hing 659

Learning WebGL to build a fancy website lol

I noticed that I have many unused plugins lol I will need to clean up them since VSCode sometimes is working very slowly.

10 полезных плагинов Visual Studio Code

Все от опытных разработчиков до начинающих джунов хотят упростить себе жизнь. Правильные инструменты могут помочь с этим.

Если в качестве среды разработки вы используете Visual Studio Code, вам повезло. Вы можете установить кучу плагинов и облегчить себе жизнь по максимуму.

Плагины очень влияют на продуктивность и подход к работе. Именно это мы обсудим ниже.

«Сперва мы меняем инструменты, а потом они меняют нас»
— Джефф Безос

Все плагины бесплатны и доступны на Visual Studio Marketplace.

Visual Studio Intellicode

Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.

Этот плагин создан, чтобы помогать разработчикам писать код. Он поддерживает огромное количество языков программирования. Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.

Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также инвестирует в стартапы.

Git Blame

Время от времени вам нужно знать, кто написал определенный кусок кода. Git Blame вам в помощь. Git Blame сообщает вам, когда и кем редактировалась каждая строка файла в последний раз.

Это полезная информация, особенно когда вы работаете с ветвями функций. Так как Git Blame сообщает вам, в каком коммите (то есть в какой ветке) была изменена строка кода, вы знаете, какой тикет вызвал это изменение. Это поможет вам лучше понять причины изменений.

Prettier

Prettier — один из лучших плагинов для разработчиков, которым необходимо следовать четко сформулированному набору правил при разработке. Это замечательный плагин, который позволяет вам использовать пакет Prettier. Prettier — отличный инструмент для структурирования кода.

Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.

JavaScript (ES6) Code Snippets

Каждый разработчик, который хоть немного старается быть в теме, вероятно, работал с одним из стеков JavaScript. Неважно какой фреймворк вы предпочитаете. Общий код в разных проектах должен упростить вам жизнь.

The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.

Как вы, наверное, уже догадались, этот плагин помогает разработчикам, которые работают с таблицами стилей. Как только вы начнете создавать таблицы стилей для своего приложения, вы определенно захотите использовать этот плагин. Sass поддерживает подсветку синтаксиса, автозаполнение и форматирование.

Path Intellisense

Path Intellisense — верный способ увеличить вашу продуктивность во время написания кода. Если вы работаете над многими проектами одновременно и используете слишком много разных технологий, вам наверняка понадобится удобный инструмент, который сможет запомнить для вас имена путей файла. Этот плагин сэкономит вам кучу времени, которое в противном случае было бы потрачено впустую на поиск нужного каталога.
Path Intellisence задумывался как простое расширение для автозаполнения имен файлов. Но с тех пор он стал ценным помощником в наборе инструментов большинства разработчиков.

Debugger for Chrome

Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code

ESLint

Плагин ESLint встраивает ESLint в Visual Studio Code. ESLint это инструмент, который статически анализирует ваш код, чтобы быстро находить проблемы.
Большинство проблем, обнаруженных ESLint, могут быть исправлены автоматически. Исправления ESLint учитывают синтаксис, и поэтому вы не столкнетесь с ошибками, вызванными традиционными алгоритмами поиска и замены. Кроме того, ESLint гибко настраиваемый.

SVG Viewer

Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.

Themes

Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.

10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков

Visual Studio Code, вероятно, можно назвать лучшим современным редактором кода. Если вы пока с ним не работаете — то вам, по крайней мере, стоит на него взглянуть. Для VS Code написано великое множество расширений, которые размещают в каталоге Marketplace, удобный доступ к которому организован из самого редактора.

Существуют расширения для отладки и форматирования кода, расширения, облегчающие работу с различными платформами (вроде Heroku, GitHub, Docker, Azure) и технологиями. В Marketplace можно найти темы для редактора, линтеры, средства, облегчающие ввод повторяющихся фрагментов кода, и многое другое.

Автор материала, перевод которого мы публикуем сегодня, отобрал 10 лучших VS Code-расширений, предназначенных преимущественно для тех, кто занимается фронтенд-разработкой, то есть, работает с HTML, CSS, JavaScript и с различными веб-фреймворками.

Предварительные сведения

Если раньше вы не работали с VS Code, но хотите попробовать этот редактор — загрузить его можно здесь. А вот, если интересно, материал, в котором продемонстрированы его возможности.

После загрузки и установки VS Code откройте панель расширений.

Далее, воспользовавшись полем поиска, найдите интересующее вас расширение, изучите сведения о нём, и, если решите что оно вам нужно, установите его. Средства поиска расширений выглядят так, как показано на рисунке ниже.

Поиск расширений для VS Code в Marketplace

Теперь поговорим о расширениях.

Live Server

Расширение Live Server

Это замечательное расширение предназначено для создания локального сервера, используемого в ходе разработки для размещения на нём статических и динамических страниц. После установки этого расширения на панели задач появится кнопка Go Live, которая позволяет запускать сервер. Нажатие этой кнопки в ходе редактирования HTML-страницы приведёт к тому, что эта страница будет открыта в браузере. Сервер поддерживает интерактивную перезагрузку страниц, которая производится после внесения изменений в код и сохранения соответствующих файлов.

Live Sass Compiler

Расширение Live Sass Compiler

Это расширение, в интерактивном режиме, компилирует SCSS-файлы в CSS-файлы. Делается это очень быстро. Предварительный просмотр результатов применения скомпилированных стилей в браузере можно запустить кнопкой Watch my sass в панели задач. Это расширение, как и только что рассмотренное, поддерживает интерактивную перезагрузку материалов.

Javascript (ES6) Code Snippets

Расширение Javascript (ES6) Code Snippets

Это расширение примечательно тем, что у него имеется более 2 миллионов загрузок, и, судя по всему, популярность его со временем лишь растёт. Оно даёт в распоряжение разработчика программные конструкции (сниппеты), подходящие для использования в файлах следующих типов:

Это — официальное расширение Node Package Manager (npm) для VS Code. Оно всемерно облегчает работу с файлом package.json. В частности, оно выводит предупреждения об отражённых в файле, но не установленных зависимостях, равно как и о тех, которые установлены, но в package.json не зарегистрированы. Оно помогает выявлять пакеты, версии которых не соответствуют правилам, заданным в package.json, и предоставляет в распоряжении разработчика удобные средства для запуска команд npm.

ESLint

Prettier

Это весьма популярное расширение может похвастаться почти четырьмя миллионами загрузок. Оно помогает форматировать JavaScript-код, что позволяет поддерживать единообразие кодовой базы и улучшает читабельность программ. В Marketplace есть похожее расширение, Beautify, тоже довольно популярное.

CSS Peek

Расширение CSS Peek

Это полезное расширение пригодится при работе с разметкой страниц, идентифицируя и выводя, на основании имён классов и идентификаторов элементов, применённые к ним стили. Оно помогает экономить время, избавляя разработчика от необходимости постоянно переключаться между HTML и CSS-файлами. Конечно, подобные задачи можно решать, просматривая соответствующие файлы в режиме разделения экрана, но работать в таком стиле нравится далеко не всем.

Angular 6 snippets

Расширение Angular 6 snippets

Это — официальное расширение, предлагающее разработчикам сниппеты для Angular 6. Соответствующий код следует руководству по стилю Angular, использование этого расширения ускоряет процесс разработки Angular-проектов, в частности, за счёт автодополнения кода. Оно поддерживает TypeScript, синтаксис сервис-воркеров, RxJS, ngRx и даже Angular Material. Если вы разрабатываете в VS Code Angular-приложения и ещё не пользуетесь этим расширением, то вам, определённо, стоит на него взглянуть.

Vetur

Это — официальное Vue.js-расширение для VS Code с впечатляющим количеством загрузок, которых у него более 5 миллионов. Оно предназначено для облегчения разработки Vue.js-приложений. Vetur умеет проверять код на наличие ошибок, поддерживает автодополнение и сниппеты.

Debugger for Chrome

Расширение Debugger for Chrome

Это — официальное расширение для VS Code, предназначенное для отладки JS-кода средствами Google Chrome. В настоящее время оно является одним из наиболее широко используемых VS Code-расширений.

Итоги

Мы рассмотрели всего десяток расширений для VS Code, а на самом деле их существует очень и очень много. Вполне возможно, исследуя каталог Marketplace, вы найдёте там что-то такое, что покажется вам гораздо более полезным, чем те расширения, о которых шла речь. Однако большинство из них способно оказать огромную помощь любому фронтенд-разработчику. Надеемся, они пригодятся и вам.

Если тема расширений для VS Code вам интересна — вот ещё один наш материал о них, ориентированный на JS-разработчиков. Публикуя тот материал, мы задавали читателям вопрос о том, какими расширениями они пользуются. Тогда оказалось, что это — Code Outline, Todo Tree и GitHub. Сегодня, уважаемые читатели, мы хотим задать вам тот же вопрос. Какие расширения для VS Code вам нравятся?

15 Best VSCode Extensions For Better Programming 2021

It’s time to declutter your VSCode toolbox, and just keep the important ones, here’s your reference.

“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld

I heard someone said, ‘let’s just install every vscode extensions that we find interesting.’ and I was like — ‘I’ll pray for your machines.”

A year ago when I was still working as a Mobile Developer, trying to save resources from memory to performance, I was really conscious of decluttering every tool I have, not just in VSCode of course.

VScode is a powerful tool, but it can also be a pain in the as* if not handled properly.

Imagine having to use Android Studio, XCode, Chrome, and VSCode, something’s gonna explode in a few minutes, I mean unless you’ve had one of the best laptops or machines in the world, but for most of us, we don’t.

So it’s probably time to clean up some stuff in our VSCode toolbox, but use this list as your reference for the tools that you need to keep.

After over 4 years of working as a professional developer, I am sharing with you these 15 Best VSCode extensions that I have been using for years now.

These extensions that are listed are not just for productivity, but it also helps a lot of developers become better programmers.

Programming is already so hard to learn, and leaving the small repetitive tasks from these helpers is quite convenient.

These extensions are my favorite, and I couldn’t thank enough the authors of these tools.

Auto-Close Tag

Using this tool is non-negotiable, every developer needs to use this in their vscode toolbox, it will not only catch possible ‘stupid’ errors but it is very handy, you really don’t have to spend your precious energy thinking about the small stuff like making sure you don’t forget to close your tag.

It has over 4 million downloads for a reason.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Используем VS Code для Веб-разработки

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

React и JSX

Последний, впрочем, может быть заменен на XO.

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете

Сниппеты

Полезные расширения

Align

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Бинды (сочетания клавиш)

Нет нужного расширения?

Заключение

[Из песочницы] Расширения VSCode, которые облегчат разработку на JavaScript и Vue

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.

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

HTML & CSS

Верстка и написание стилей — это часто монотонная задача, поэтому вашу работу могут облегчить и ускорить следующие расширения:

JavaScript

Для работы с Vue существует не так много годных расширений, ниже несколько из наиболее полезных:

VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:

Рабочее окружение и процесс разработки

Для продуктивной работы было бы неплохо иметь помощников в виде дополнений, подсвечивающих простые ошибки, советующие стиль написания и прочие удобные подсказки/действия. Попробуйте воспользоваться следующими расширениями:

Оформление редактора

Так же может быть интересно

Надеюсь, что данный список будет вам полезен, буду рад дополнениям.

Must-have плагины и несколько полезностей для С\С++ разработки в VS Code

Удивительно, но до сих пор на Хабре нет хорошей подборки плагинов для Visual Studio Code для тех, кто пишет на С/С++. Microsoft в своем блоге опубликовали только статью, совсем базового уровня с инструкцией по настройке. Но большинство читателей Хабра, тем более из разработчиков, обойдется без такой подробной инструкции. Есть только несколько подборок для веб-разработчиков, но не для С++.

Наверное это связано с тем, что большинство С++ разработчиков использует тяжеловесные IDE, в первую очередь конечно же Visual Studio.

Но в Linux и MacOS с полноценными IDE всё не так просто, да и тяжелая среда разработки не всегда нужна или просто не хочется ее использовать.

Я же хочу обратить ваше внимание на полезные плагины, которые облегчают жизнь и работу, а также рассказать про полезные настройки и особенности VS Code, которые вы могли просто упустить.

Вопрос считать VS Code IDE или только редактором кода весьма холиварный и не является целью этой статьи. Я буду всё-таки считать её IDE, так как минимальными усилиями она предлагает основные сценарии IDE, такие как автодополнение и отладка.

Немного истории

Первая IDE, которую я использовал начиная свой путь разработчиком была, уже историческая, Borland C++ 2.0. Потом я пересел на Visual Studio 6.0 и оставался (да и сейчас остаюсь) фанатом этой IDE. Но в какой-то момент возникла необходимость писать под Linux (это был, наверное, 2006 год). В Linux, первое время, я был шоке от отсутствия серьезных IDE — пробовал Eclipse, мучился и плевался. Не буду вдаваться в историю, но в итоге я разобрался с Make, CMake, научился быстро писать соответствующие файлы, потом были линкер скрипты, gdb, kdb и много всего интересного. В это время я полюбил и активно использовал vim на протяжении лет 5. После чего постепенно переключился на Sublime Text, затем на его вторую версию, а сейчас уже на третью.

Теперь я уже меньше пишу кода, и больше занимаюсь развитием продуктов и процессов, но периодически писать все же приходится — это и личные проекты и помощь нашим партнерам со встраиванием нашего SDK.

А так как SDK у нас не только для Windows, но и для Linux и MacOS, то и код приходится писать в них. В прошлом году я попробовал VS Code, и он стал для меня хорошей альтернативой Sublime Text.

Если коротко их сравнить, то Sublime Text, на мой личный взгляд, даёт больше возможностей по настройке и по работе, но VS Code больше даёт из коробки. И если под рукой нет личной подборки расширений для Sublime Text или если вы вообще никогда этим редактором не пользовались, то Visual Studio Code —отличная штука.

Начну с нескольких очень полезных расширений. Их для С\С++ разработчика в VS Code не так много и главный из них это конечно:

C/C++ for Visual Studio Code

Ссылка на marketplace

Это основное расширения для поддержки С\С++ в VS Code, которое разрабатывается Microsoft. Подробное описание всего, что оно даёт есть на странице в маркете, я же здесь упомяну только самое главное (на мой взгляд конечно):

Надо отметить, что Microsoft большие молодцы и постоянно обновляют это расширение. Причем новые возможности этого расширения публикуются только в dev блоге от Microsoft и не очень заметны. Поэтому я решил рассказать тут о самых новых из них.

Глобальные настройки для IntelliSense

В мае 2018 в VS Code добавили возможность задать любые параметры для IntelliSense в пользовательском settings.json. Эти настройки автоматически применяются ко всем проектам.

Очень полезная штука когда большинство проектов, с которыми вы работаете используют общий набор include, одинаковый компилятор и так далее.

Поддержка встроенного терминала при отладке

В декабре 2018 года Microsoft добавила возможность по отладке С\С++ приложений во встроенном терминале, вместо открытия отдельного окна с терминалом. Управляется эта возможность параметром externalConsole в launch.json.

Пока поддерживается только cppdbg и только на Linux и Windows, но в MacOS тоже обещали завезти в скором времени. Выглядит это так:

Комментарии для документирования

Эту штуку добавили буквально в прошлом месяце. Рассказывать тут особо нечего, поэтому просто приведу пример от Microsoft.

Пишем простой класс Box и добавляем комментарии в стандартном формате:

Комментарий ассоциируется с классами или функциями членам класса и показываются во всплывающих подсказках при наведении на соответствующий объект.

Выглядит это так:

Работа с контейнерами

В последнем обновлении от 6 февраля Microsoft добавила работу с С++ в Docker контейнерах. Теперь вы можете не только собирать код в контейнерах, но и отлаживать его внутри контейнеров. Подробности — в блоге Microsoft.

Сам я контейнерами по работе не пользуюсь — нет необходимости. Но наверняка это многим будет полезно, поэтому я и решил включить это в статью.

Ну а теперь возвращаемся к другим расширениям для VS Code, которые помогут вам при разработке.

cquery

Ещё один достаточно глобальный плагин для С/С++/Objective-C разработчика в VS Code. Основная особенность — расширение было спроектировано и протестировано на очень больших проектах, например, на Chromium. Поэтому пригодится там, где стандартное расширение от Microsoft и его IntelliSense пасует (такое часто случает когда у вас больше 100Мб С++ исходников).

Список всех основных возможностей такой:

Расширение весьма полезное, но на github нет активности с ноября 2018 года. И судя по issue — Is this project dead? #867 проект действительно остановился в развитии. Знамя подхватил форк https://github.com/MaskRay/ccls, но я его пока не проверял, поэтому рекомендовать не могу. Скорее всего ccls со временем просто заменит cquery.

Easy C++ projects

Если два предыдущих расширения были глобальные с большим количеством возможностей, то это выполняет простую функцию — создание простого проекта для MSVC, GCC или Clang.
Дополнительно умеет:

Работает это так:

CMake Tools

Как очевидно из названия, расширение добавляет поддержку CMake. Как подсказали в комментариях, можно конечно все прописывать руками, но с расширением будет удобнее.
После установки надо будет сделать минимальную настройку. Выбрать toolchain:

После чего выбрать конфигурацию для сборки:

И все. Можно работать.
Расширение также умеет само генерировать для проектов простейшие CMake файлы.

Todo Tree

Расширений для создания TODO списков для VS Code несколько. Вы можете выбирать любое. Мне больше всего понравилось именно это. Единственный недостаток — оно требует https://github.com/BurntSushi/ripgrep, который не везде есть из коробки и ставится не очень удобно. В стандартных репозиториях Debian его пока нет.

Результат работы выглядит так:

GitLens

Как следует из названия расширения — оно улучшает работу с git. Надо отметить, что по-умолчанию в VS Code уже встроена некоторая поддержка git, но весьма ограниченная.

Основная фишка GitLens — показ прямо в редактируемой строке кто и в каком коммите менял её последний раз. Расширение также добавляет расширенный поиск по истории файла, поиск по коммитам, удобный вид для сравнения нескольких версий файла и многое другое. Для демонстрации работы я просто вставлю gif со страницы marketа, который наглядно показывает возможности расширения.

Git History

Ещё одно расширение улучшающее работу с git, а именно показ истории. Почему в GitLens мне так и не удалось найти подходящее отображении истории проекта со всеми ветками. Если кто-то знает, как подобный вид (см. ниже) сделать с помощью GitLens обязательно напишите в комментариях, буду очень благодарен.

vscode-icons

Одно из многочисленных расширений, которое добавляет иконки для файлов и каталогов в Explorer панель. Расширений таких в маркете масса, а это является самым популярным. Можете смело выбирать любое другое, мне понравились именно эти иконки.

Settings Sync

Ещё одно полезное расширение, назначение которого очевидно из названия.

Для синхронизации ваших настроек используется GitHub account token и Gist. Лично для меня — одно из самых полезных расширений, так как я использую и Windows, и Linux, и Mac.

Code Spell Checker

Если ваш английский пока далек от идеала или вы хотите предотвратить опечатки, то это расширение определенно не будет лишним. При необходимости можно добавить поддержку русского языка.

Из приятных особенностей — не только подчеркивает ошибочные слова, но и предлагает корректные варианты.

WakaTime

ссылка на marketplace
WakaTime — это сервис, который показывает красивую статистику\графики\метрики по вашему программированию. Штука исключительно эстетическая, но мне очень нравится. Расширение соответственно добавляет поддержку сервиса при работе в VSCode. Про сам сервис можно почитать тут.

Пример красивых графиков:

Основные возможности сервиса бесплатные и подписки не требуют.

На этом с расширениями всё. Хочется также поделится несколькими полезными настройками самого VS Code, которые могут быть полезны сообществу.

Несколько полезных настроек

По умолчанию VSCode отправляет телеметрию при падении, а также некоторые данные и информацию об ошибках в Microsoft. Если вас по каким-то причинам это не устраивает, то смело отключайте в настройках:

Следующую настройку я сам обнаружил только при написании статьи. ZenMode позволяет вам скрыть все лишние окна и меню и оставить только текущий файл с кодом. Теперь буду постоянно пользоваться на планшете, когда приходится что-то пробовать в коде. На планшете остальные окна часто не нужны, а полезного пространства очень не хватает. Рекомендую!

20 лучших тем Visual Studio Code, которые вы должны использовать

Visual Studio Code от Microsoft, возможно, является одним из лучших редакторов кода. Благодаря обширной коллекции расширений, поддерживаемых сообществом, вы можете использовать VS Code для удовлетворения почти всех ваших потребностей в программировании.

Приложение доступно в Windows, macOS и Linux, что делает его идеальной программой для написания кода независимо от операционной системы. Одним из ключевых аспектов VS Code является его настраиваемость и надежные возможности создания тем.

Мы связали все темы, представленные в этой статье. Все, что вам нужно сделать, это кликнуть ссылки, чтобы посетить Visual Studio Marketplace, и нажать кнопку «Установить».

Вы также можете искать эти темы в разделе «Расширения» VS Code.

1. Ariake Dark

Ariake Dark — это тема VS Code, вдохновленная традиционными цветами Японии. Излишне говорить, что его внешний вид приятен визуально.

Скачать Темная тема Ariake

2. Pink pine

Вы получаете две дополнительные темы, а именно Rosé Pine Dawn и Rosé Pine Moon, с разными цветами фона, сохраняя при этом верную цветовую схему.

3. Celestial

Celestial — это более мрачная версия другой популярной темы VS Code, Horizon. Хотя Horizon — отличная тема сама по себе, Celestial предлагает более темный цвет фона, который я предпочитаю.

Хотя Celestial — мой личный фаворит в этом списке, он может быть приобретенным вкусом, если вы не часто используете и не цените действительно темные темы.

Вы можете попробовать Horizon (прокрутите вниз до шестой темы в этом списке), если вам не нужен такой темный фон, но вам нравится используемая здесь цветовая схема.

4. В постели до 19:00.

В постели к 19:00 — это тема от создателя широко используемой темы VS Code Night Owl (добавлена на седьмую позицию в этом списке).

Как следует из названия, эта тема лучше всего подходит для тех, кто не часто ложится допоздна на сеансы программирования. Эта тема имеет отличные уровни контрастности, чтобы помочь вам легко различать различные элементы в коде.

Скачать В постели по теме 19:00

Примечание: есть проблемы со сном? Ознакомьтесь с нашими любимыми приложениями ASMR, которые помогут вам заснуть.

5. ReUI

Если вы ищете тему VS Code, скорее всего, вы хотя бы раз посетили официальный сайт React JS. Если вам нравится цветовая палитра, используемая во фрагментах кода веб-сайта React, тема ReUI переносит ее в VS Code. В результате получилась эстетическая тема с приятными для глаз цветами.

6. Горизонт

Как упоминалось ранее, Horizon — это основа Небесной темы. Horizon — это теплая тема с богатой цветовой палитрой, которая выделяется из общей массы.

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

7. Night Owl

Night Owl — это тема, созданная с учетом доступности. Он предлагает аккуратный контраст для лучшей читаемости, а цветовая схема здесь такова, что не будет неудобно для людей с дальтонизмом. Эта тема отвечает потребностям тех, кто часто работает допоздна.

Скачать Тема Ночной Совы

8. Andromeda

Andromeda — это тема с яркими цветами и темным фоном. Разработчик также создал вариант этой темы с выделенными курсивом ключевыми словами, которые хорошо сочетаются со шрифтами, включая Operator Mono и Catograph Mono. Также есть вариант с рамкой, если вам нравится различать несколько вкладок.

9. Nord

Тема Nord VS Code основана на цветовой палитре Nord от Arctic Ice Studio, вдохновленной красотой Арктики.

Одна примечательная часть Nord заключается в том, что его цветовая схема распространяется даже на популярные сторонние расширения синтаксиса, чтобы предложить вам унифицированный опыт.

Если вам нравятся минимальные настройки, вам, вероятно, понравится эта тема. Однако при ярком освещении он может выглядеть слишком бледным.

10. Tokyo Night

Как следует из названия, Tokyo Night — это тема, посвященная красивым ночным огням в центре Токио. Он намеренно устанавливает низкую контрастность многих элементов пользовательского интерфейса, чтобы не отвлекать программистов.

Тема поставляется в комплекте с двумя дополнительными вариантами, а именно Tokyo Night Light и Tokyo Night Storm. В листинге темы разработчик рекомендует отключить выделение семантического синтаксиса в настройках для достижения наилучших результатов.

Существуют также конфигурации для отключения курсива, увеличения яркости текста Codelens и настройки активных и неактивных границ.

Скачать Ночная тема Токио

11. Mayukai Mirage

Mayukai Mirage черпает вдохновение из нескольких других тем VS Code, включая тему Ayu, тему Material, Monokai, Andromeda и Gruvbox Darktooth.

По словам создателя, эта тема идеально подходит для дневной работы над программированием. Существует семь различных вариантов Mayukai, включая Mirage, Semantic Mirage, Dark, Mirage Gruvbox Darktooth, Mono, Alucard и Sunset.

Скачать Тема Mayukai Mirage

12. One Dark Pro

До того, как VS Code стал массовым, редактор кода Atom был предпочтительным выбором многих разработчиков, и нельзя отрицать, что тема Atom One Dark выглядит великолепно.

Если вам не хватает одной темной темы Atom, то One Dark Pro — это то, что вам нужно установить на VS Code. Создатели этой темы также включили в список фрагменты, которые помогут вам настроить цвета и добавить курсив в пользовательский интерфейс.

Скачать Тема One Dark Pro

13. LaserWave

LaserWave — это тема, вдохновленная синтвейвом 80-х, с теплым ретро-дизайном. В настоящее время он поддерживает Python, React JS, Angular, Ruby, Markdown, Java, C # и Dart.

Если вы ищете тему, которая не является темной и хорошо сочетается с вашим плейлистом lo-fi, вы не ошибетесь с LaserWave. У него уникальное ощущение, и оно вам обязательно понравится.

14. Даркула

Даркула (не путать с популярным Дракула Официальный) переносит знакомую тему Darcula, которую можно увидеть в IDE Jetbrains и Android Studio, в VS Code.

Тем не менее, создатель указывает, что есть несколько модификаций, которые должны улучшить работу программистов.

Вы можете использовать эту тему для унифицированного взаимодействия, если используете предложения IDE Jetbrains.

15. Огни большого города

Еще одна замечательная тема VS Code — City Lights, в которой преобладают матовые темно-синие тона. Он поддерживает более восьми популярных языков программирования.

Пока вы пробуете эту тему, убедитесь, что вы не пропустите пакет значков City Lights с более чем 60 значками типов файлов. Он также доступен для других популярных редакторов кода, таких как Sublime Text и Atom.

Скачать Тема «Огни большого города»

16. Quiet Light

Quiet Light — это официальный порт темы Quiet Light, созданный сначала для текстового редактора Espresso на Mac. Хотя VS Code поставляется с темой Quiet Light, эта версия настолько хороша, насколько и может быть, поскольку была разработана первоначальным дизайнером.

Тема поддерживает HTML / CSS / LESS / SCSS, JavaScript, PHP, Python, Markdown и другие. Если вам нравится тема Quiet Light по умолчанию, скорее всего, она вам понравится.

Скачать Тихая светлая тема

17. Тема GitHub

GitHub — это официальная тема VS Code, которая привносит возможности GitHub в VS Code. Если вам нравится внешний вид платформы для размещения кода, вы почувствуете себя как дома, переключившись на эту тему.

18. Light Pro

Brackets Light Pro переносит светлую тему редактора кода Adobe Brackets в VS Code. Если вы переходите на VS Code из Brackets, поскольку Adobe готова прекратить поддержку Brackets с 1 сентября 2021 года, вам понравится использовать тему Brackets Light Pro.

Рекомендуемые шрифты и значки для этой темы — Fantasque Sans Mono и VSCode Great Icons.

Скачать Brackets Light Pro Тема

19. Aofuji Light

Aofuji Light — это минималистичная тема для VS Code. Эта тема относительно новая, и подсветка синтаксиса была протестирована с файлами HTML, JavaScript, CSS и Markdown.

Если вы предпочитаете светлые темы, вы можете попробовать Aofuji Light, чтобы убедиться, что он идеально вписывается в ваш рабочий процесс.

Скачать Светлая тема Aofuji

20. Bluloco Light

Наконец, у нас есть тема Bluloco Light. Это форк темы One Light с приятной визуально цветовой палитрой Bluloco. Эта тема выглядит хорошо, даже если у вас включен режим Apple NightShift, по словам создателя. Это означает, что тема хорошо сочетается с фильтром синего света.

Скачать Тема Bluloco Light

Это наш выбор из лучших тем Visual Studio Code. Мы надеемся, что эта статья поможет вам выбрать новую тему и придаст общий вид вашей настройке кодирования.

Итак, какая из этих тем Visual Studio Code вам нравится больше всего? Дайте нам знать в комментариях ниже. Кроме того, если вы используете тему, которую мы не упомянули, но которая должна быть в списке, не стесняйтесь поделиться ею с другими в комментариях.

10 Visual Studio Code расширений для рефакторинга и работы с tech debt

В этой статье мы поговорим о полезных extensions для VS Code, которые помогут вам с рефакторингом вашего проекта и работой с тех долгом

1. Glean

Glean предоставляет инструменты рефакторинга проектов на React. Основные фичи:

2. Stepsize

Stepsize будет полезен для команд, чтобы отслеживать и определять приоритеты тех долга прямо в VS Code.

Что может плагин:

3. P42 JavaScript Assistant: Refactoring Hints & Automation

P42 JavaScript Assistant добавляет 49 автоматических рефакторингов, и других экшинов для JavaScript и TypeScript в VS Code.

4. Abracadabra

В VS Code уже есть базовые функции рефакторинга. Abracadabra расширяет возможности рефакторинга в vs code:

5. TODO Highlight

Если вы любите юзать в коде теги TODO и FIXME, но при этом забиваете на них, этот плагин решит вашу проблему. Он выделяет в коде фразы TODO или FIXME.

6. Todo Tree

Расширение Todo Tree собирает все ваши todoшки и fixme, разбросанные по коду, в одно дерево в левой панели vs code

7. Comment Anchors

Comment Anchors позволяют размещать «якоря» в комментариях. Якоря можно использовать для трекинга TODO, написания заметок, упрощать навигацию по файлам.

Comment Anchors предоставляют множество вариантов конфигурации, позволяющих адаптировать это расширение к вашему личному рабочему процессу и повысить производительность.

8. New Relic CodeStream

У экстеншина есть несколько интеграций:

Скачать New Relic CodeStream можно тут.

9. SonarLint

SonarLint позволяет исправлять проблемы кодом до того, как они обнаружаться во время релиза, у SonarLint есть такие фичи как: средство проверки орфографии, SonarLint выделяет ошибки и уязвимости безопасности при написании кода с четкими инструкциями по исправлению, чтобы вы могли исправить их еще до того, как вы закоммитите код. SonarLint в VS Code поддерживает анализ кода JavaScript, TypeScript, Python, Java, HTML и PHP.

10. Code Runner

Настройка vs code

Разберём, как установить и настроить новый редактор кода vs code.

Заходим на официальный сайт программы код вс и скачиваем установщик.

Программа работает под windows, mac os и linux.

После загрузки нас перекинет на страницу с документацией.

Вернёмся к программе vs code и запустим её.

Плагины для vs code

Поменять язык в vs code Система вс кода сама определит, что на компьютере установлен русский язык и предложит установить языковой пакет.

Вручную установить можно из панели управления выбрать пункт меню расширения.

В поле ввода пишем слово russian.

Найдутся плагины для языка, устанавливаем языковой пакет.

All autocomplete плагин помогает сразу писать класс в css, не вспоминая как он был в html.

Autoprefixer помогает расставлять префиксы в css.

Beautify. Если код поехал, стал не упорядочен, то мы запускаем плагин Beautify и он расставляет всё по правилам.

Bootstrap v4 snippets. Готовые участки кода от четвертой версии Bootstrap.

Помогает быстро вставить кнопку, форму или прогресс бар через поиск сниппета.

Eslint. Позволяет проверять правильно ли написан javascript код.

8 GitHub.

Live Sass compiler. Компилирует внутри программы вс код файлы стилей.

Twig расширение даёт подсветку кода при работе с шаблонами open cart.

12 GistExtension. Эта функция позволяет использовать свои Gist.

Заходим или регистрируемся на сайт GistGithub.

Внутри мы создаём свои кусочки кодов, которые могут понадобиться.

В вс коде зажимаем клавишу F1 выбираем gist open block, и мы увидим все наши кусочки кода, которые можем добавить в наш проект.

Не терять время их искать.

Также когда мы написали новый код, который может быть, понадобиться в будущем, то сохраняем его в интернет через create new block.

Проверяем, появился ли он на сайте GitHub.

Настройка параметров vs code

Слева редактора будет панель ActivityBar, она даёт доступ к отладке и к установке расширений.

Эту панель можно убрать, учится вызывать всё горячими клавишам.

Для настройки редактора перейдём в файл settings и видим выпадающее меню параметров, нажимаем на этот пункт.

Поменяем несколько параметров, которые улучшают работу в редакторе вс код.

В верхней части в поле поиска пишем:

Emme для вс кода

Emmet встроенный плагин работает вначале как подсказка структуры, которая будет. Как можно быстро верстать плагином emmet читать тут.

Клавишей Tab разворачивается код.

Терминал в вс коде

Консоль кода очень удобна.

Вызываем её через меню терминал, создать Terminal.

Пишем команду gulp и изнутри запускается окно с нашим проектом. Нет лишнего действия, когда нужно переходить в консоль.

В параметре пользователя Terminal.integrated можно поменять консоль на другую.

Тему для цветовой схемы также можно менять в настройках.

По умолчанию, стоит лучшая тема с цветами.

Как проверить встроенный live reloader? В нижней части экрана есть кнопка Go live нажимаем её и сразу открывается окно браузера.

Переходим на новый редактор кода vs code и делаем настройки под себя.

Выбор лучшего редактора кода для веб-разработчика в 2018 году

Перевод статьи Каталина Вейзила «Choosing the best code editor as a web developer in 2018».

Использование подходящего редактора кода это отличный способ обеспечить эффективный и продуктивный процесс разработки. Современные редакторы не только ускоряют работу. Они также предоставляют широкий ассортимент инструментов, которые уменьшают количество шагов, необходимых для выполнения определенных задач.

В этой статье мы рассмотрим несколько самых лучших, современных и кросс-платформенных редакторов кода, которыми вы можете начать пользоваться прямо сейчас.

1. Visual Studio Code

Visual Studio Code это бесплатный кросс-платформенный редактор кода, разработанный Microsoft. Программа имеет открытый исходный код. Исходя из опроса, проведенного Stack Overflow в 2017 году, это один из самых популярных редакторов кода, которым пользуются больше 24% разработчиков.

Он оснащен доступным набором инструментов для редактирования и отладки. Редактор легко интегрируется с другими сервисами. Его собственные свойства также легко расширить.

Новая функция Live Share предоставляет возможности для парного программирования, благодаря чему вы и ваша команда можете с легкостью работать над одной базой кода. Вам не придется для этого конфигурировать инструменты разработки или возиться с настройками окружения.

Кроме того, среди особенностей VS Code мы видим Git-интеграцию, IntelliSense (технология автодополнения), подсветку синтаксиса для самых популярных языков программирования и много других прекрасных функций.

Если вам этого недостаточно, вы можете с легкостью улучшить и кастомизировать VS Code благодаря коллекции плагинов, поставляемых Microsoft или создаваемых сообществом.

2. Sublime Text 3

Sublime Text 3 имеет бесплатную и премиум-версию. Это кросс-платформенный редактор кода. Он не только легковесный и очень шустрый в работе, но также и расширяемый.

По умолчанию Sublime Text 3 предоставляет базовое автодополнение, подсветку синтаксиса и функционал сворачивания (фолдинга). Но используя Package Control в Sublime Text, вы можете расширить последний и добавить больше «примочек»: инструменты отладки, новые теми, поддержку intellisense и т. п.

В последней версии Sublime (3.1) также улучшено использование памяти (в некоторых случаях до 30%), появился рендеринг текста с поддержкой лигатур, усовершенствовано взаимодействие пользователя с программой, определение синтаксиса и добавлены новые цветовые схемы.

3. Atom

Atom это еще один бесплатный, кросс-платформенный редактор с открытым исходным кодом. Он создан и выпущен GitHub.

По умолчанию Atom предоставляет подсветку синтаксиса, дополнение и сворачивание кода, а также встроенную поддержку десятков языков программирования.

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

Подобно VS Code, он также оснащен мощным инструментом для парного программирования – Teletype. Это дает возможность нескольким разработчикам присоединяться к изолированной сессии и работать совместно.

Atom можно расширить с помощью Atom-IDE – набора опциональных пакетов.

4. Vim

Vim это мощный консольный редактор с открытым кодом. Призван быть, как кольцо всевластия у Толкина, «Единым, чтоб всеми править». Vim предустановлен практически в любом UNIX. Особенность этого редактора — он на 100% управляем с помощью клавиатуры (но если хотите, то можете пользоваться и мышью тоже). Главное в нем не красивый внешний вид, а функциональность.

Хотя это очень мощный редактор, его довольно непросто изучить. Но если вам это удастся, Vim покажет чудеса производительности: для выполнения некоторых задач, обычно отнимающих время, потребуется лишь несколько нажатий клавиш.

По сравнению с другими (графическими) редакторами, такими как Visual Studio Code, Sublime или Atom, Vim предоставляет тот же функционал (если хорошо настроен), но использует лишь часть системной памяти и загружается моментально.

5. Emacs

Emacs это еще один редактор кода на базе UNIX. Он написан на Lisp и может посоревноваться с Vim в юзабилити и расширяемости.

По умолчанию, он предоставляет режимы редактирования с распознаванием контента, включая подсветку синтаксиса для многих типов файлов, полную встроенную документацию и вводное руководство для новых пользователей.

Emacs очень настраиваемый и имеет первоклассную поддержку Lisp и других функциональных языков. Если вы знакомы с Lisp, то можете и сами написать расширение для этого редактора, поскольку он бесплатный и имеет открытый исходный код.

Вы можете настроить Emacs по своему усмотрению и внедрить функционал, выходящий за рамки редактирования кода, включая планирование проекта, использование Emacs в качестве почтового клиента, программы для чтения новостей, календаря и многое другое.

Подобно Vim, Emacs сложен в изучении: чтобы освоиться с ним и начать использовать его в полную силу, может понадобиться некоторое время.

Однако, в отличие от Vim, Emacs не предустановлен в каждом Unix, и использование памяти у него немного выше, особенно, если вы его расширите с помощью плагинов.

6. SpaceMacs

SpaceMacs это созданный и поддерживаемый сообществом редактор кода на основе Emacs. Он предоставляет подсветку синтаксиса для основных языков, а также инструменты тестирования и отладки.

Этот редактор пытается совместить сильные стороны Vim и Emacs, позволяя пользователям выбирать предпочтительный для них стиль редактирования.

SpaceMacs создан с учетом четырех основных принципов: мнемоники, понятности, последовательности и способности к конфигурации большим количеством людей.

Таким образом, используя SpaceMacs, вы можете быть уверены, что каждое сочетание клавиш организовано при помощи последовательных, мнемонических префиксов (например, «p» означает «project»). Благодаря этому использование редактора становится интуитивно понятным.

У SpaceMacs очень активное и услужливое сообщество, к которому вы можете присоединиться, чтобы получить помощь и помогать другим людям.

7. Notepad++

Notepad++ это развитый редактор кода, выпущенный в 2003 году и доступный только на платформе Windows.

Он не только прошел проверку временем, но также и стал вторым по популярности редактором кода в опросе StackOverflow за 2017 год. Им пользуются больше 34% разработчиков.

Notepad++ очень быстрый. Он поддерживает разнообразные языки программирования прямо из коробки, но широко известен как отличный редактор для HTML-кода.

Среди его особенностей можно назвать редактирование в разных вкладках, поддержку внешних плагинов, таких как макросы, умную подсветку синтаксиса, интеграцию компилятора, автодополнение и проставление отступов.

8. Brackets

Brackets это кросс-платформенный редактор с открытым исходным кодом, разработанный и выпущенный Adobe под лицензией MIT.

Он был создан с нуля специально для веб-дизайнеров и фронтенд-разработчиков, работающих преимущественно с JavaScript, HTML и CSS.

Brackets также поставляется с основными стандартными свойствами, включая автодополнение, подсветку синтаксиса для многих языков программирования, поддержку быстрого редактирования и разнообразных препроцессоров.

К его отличительным особенностям можно отнести опцию предпросмотра Live Preview. С ее помощью разработчик может открыть текущий документ в Chrome и просматривать, как этот документ отображается в браузере.

В Brackets также есть свойство «extract», позволяющее разработчикам подтягивать цвета, размеры, градиенты, шрифты и другие важные данные из PSD-файла в готовый к использованию CSS-файл.

Наконец, Brackets очень хорошо настраивается, а его основной функционал можно увеличить с помощью расширений, доступных в официальном реестре.

9. TextMate

TextMate считается «недостающим редактором» для Mac OS, сочетающим графический пользовательский интерфейс и системную структуру UNIX.

По умолчанию этот редактор имеет собственный мощный функционал, включая поиск и замену, выбор колонок, сворачиваемые блоки кода, дополнение кода, базовая подсветка синтаксиса для десятков языков программирования и многое другое.

TextMate также имеет преимущества в виде сильного сообщества и доступной документации. Плагины и темы есть как официальные, так и представленные пользователями.

10. Coda 2

Coda 2 это хороший редактор кода для Mac OS и iOS. Он разработан и выпущен Panic Inc — компанией, которая дала нам Transmit, Prompt и, наконец, Firewatch (игра с местом действия в пустынях Вайоминга).

Coda это мощный редактор кода, спроектированный с мыслями о производительности и эффективности. У него современный и интуитивно понятный пользовательский интерфейс. Программа поставляется с такими функциями как дополнение кода, подсветка синтаксиса для различных языков, поддержка MySQL, локальная индексация и т. д.

Редактор имеет встроенный функционал для открытия и управления вашими локальными и удаленными файлами, а также встроенный терминал для быстрого доступа. В плане документации и поддержки Coda также не пасет задних – у редактора есть очень активное сообщество.

Если функционала, установленного по умолчанию, вам недостаточно, вы можете выбрать плагины для его расширения. Они разрабатываются как Panic Inc., так и сообществом.

Заключение

Выбор лучшего редактор кода всегда субъективен. Но я думаю, что лучше всего перепробовать их все по нескольку дней, чтобы понять, какой подходит именно вам.

Как только вы найдете подходящий для себя редактор, остановите на нем свой выбор и изучите его вдоль и поперек. Таким образом вы дадите ему шанс доказать, что это действительно лучший редактор, обеспечивающий вам самую высокую продуктивность в работе.

10 лучших расширений VSCode для использования в 2021 году

Visual Studio Code, поддерживаемый Microsoft, является одним из самых популярных редакторов с открытым исходным кодом. VSCode стремится предложить все необходимые инструменты, сокращая при этом сложные рабочие процессы полных IDE. Многие программисты предпочитают VS Code, потому что он предлагает множество расширений для дополнительной функциональности, производительности, отладки и скорости.

В этом кратком руководстве мы рассмотрим 10 основных расширений VS Code, которые любой веб-разработчик должен использовать в 2021 году. Мы обсудим, что они делают и как они могут облегчить вашу жизнь кодирования. Давайте прыгнем!

Bracket Pair Colorizer

Раскраска пара скобок расширения VS сопоставляет соответствующие скобки в вашем коде с тем же цветом. Это очень помогает, когда вы работаете с такими вещами, как вложенные компоненты, объекты или функции, у которых есть квадратные или круглые скобки.

С помощью этого простого расширения намного проще найти подходящие пары и понять ваш код. Самым большим преимуществом этого расширения является улучшенная навигация и доступность. Это также облегчает другим чтение и понимание вашего кода.

Better Comments

Better Comments — это расширение, используемое для написания удобных для человека комментариев в вашем коде, которое полезно для вас и всех, кто читает исходный код (особенно для команд). Описательные, понятные для человека комментарии экономят так много времени для всех участников.

С этим расширением VS вы можете использовать следующие символы после двойной косой черты, //чтобы упростить комментирование:

Better Comments

Сниппеты — отличное дополнение для повышения производительности. Snippets — это набор различных расширений для наиболее часто используемых языков программирования. Например, React Snippet — это популярное расширение, которое позволяет вам использовать и создавать сокращения для того, что вы делаете снова и снова.

Некоторые популярные варианты:

CSS Peak

CSS Peak — отличное расширение для веб-разработчиков, поскольку оно позволяет «заглядывать» в стили для классов CSS, идентификаторов и даже тегов HTML. Это расширение похоже на функцию скобок, называемую встроенными редакторами CSS.

CSS Peak поддерживает отслеживание определения символов для любого селектора CSS, например:

Prettier

Расширение Prettier — это средство форматирования, которое помогает поддерживать согласованный стиль кода. Вы можете настроить свои параметры так, как вам нужно, и сохранить их с помощью ярлыков. Prettier — один из самых популярных форматеров кода, набравший более 38,5 тысяч звезд на GitHub.

Prettier автоматически исправит проблемы с форматированием в вашем коде, например исправит сочетание одинарных и двойных кавычек или нерегулярное использование точек с запятой.

Это расширение работает со следующими технологиями: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML и другими.

Relative Path

Относительный путь — отличное расширение для написания операторов импорта. Вы можете легко получить относительный путь к любому файлу, используя ярлыки в вашем рабочем пространстве. Вместо поиска местоположения файла вам нужно только имя файла, а расширение предоставит относительный путь от текущего местоположения к этому целевому файлу.

Примечание. Потребуется некоторая настройка, если вы работаете с большим монорепозиторием.

Icons

Значки позволяют создавать наглядные значки, помогающие различать файлы и папки. Это делает ваш код более наглядным, поэтому вам будет легче работать в команде, вернуться к коду через некоторое время или даже просто сделать работу более увлекательной. Например, вы можете изменить цвет значка папки по умолчанию с помощью палитры команд.

Есть несколько различных расширений иконок, в том числе

GitLens

Расширение GitLens объединяет возможности Git с VSCode, что позволяет визуализировать авторство кода через Git. GitLens отлично подходит для лучшего понимания кода, поэтому вы можете узнать, кто, почему и когда был изменен код. Это также позволяет вам изучить историю и эволюцию кодовой базы.

Он также имеет множество других функций, таких как:

Import Cost

Расширение стоимости импорта помогает повысить производительность, показывая примерный размер пакета импорта. Это помогает избежать проблем, отслеживая размер добавленных зависимостей.

Если размер импорта слишком велик, расширение «Стоимость импорта» предупредит вас, чтобы вы могли перенастроить его в соответствии с установленными вами требованиями.

Markdown All in One

Markdown All in One — очень полезное расширение для всего, что связано с уценкой. Он добавляет такие функции, как автоматический предварительный просмотр, ярлыки, автозаполнение синтаксиса и многое другое. Markdown обычно используется во многих областях техники, и это расширение упрощает работу, повышая производительность и скорость.

С Markdown All in One вы можете использовать ярлыки для изменения текста и добавления таких вещей, как полужирный, курсив и т. Д. Он также имеет полезную автоматизацию для работы с такими вещами, как списки и математика. Вот несколько общих команд:

10 PostCSS плагинов, которые сэкономят время вашему верстальщику

У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.

Волна хайпа уже давно прошла, в последнее время про PostCSS говорят очень мало. Многие новички даже не знают, что это такое. Думаю самое время посмотреть на этот инструмент с точки зрения практического использования в самых обычных проектах, где люди решают задачи, а не играются с модными технологиями.

PostCSS vs SASS

Ох… Видимо стоит сказать пару слов про это. Думаю сейчас редкий верстальщик не встречался с препроцессорами. SASS или любимый мною LESS, реже Stylus, применяют и на больших проектах, и на маленьких. Кто-то пытается выжимать из них максимум, кто-то использует минималистичный набор – вложенность, переменные, импорты. Но, так или иначе, эти инструменты помогают с вопросами синтаксиса. Они делают так, чтобы нам было удобнее писать код.

Года два-три назад PostCSS постоянно сравнивали с препроцессорами. И это понятно. Формально с его помощью можно сделать все то же самое, сделать какой-то синтаксис, который будет удобнее, чем чистый CSS. Но все это вызывало бурления в массах, в основном потому, что каждый с помощью PostCSS делал что-то свое. Бесчисленные неизвестные плагины, миллионы комбинаций и кроме автора того или иного конфига никто не понимал, как он работает и что делает. Это как Vim или Emacs – можно из них сделать космический корабль, но научить другого разработчика им пользоваться будет очень непросто.

Но если эти сравнения отбросить, то PostCSS – это инструмент, который позволяет взять наш CSS и что-то с ним сделать. Никто не мешает использовать SASS ради синтаксиса, а после сборки воткнуть PostCSS и что-то сделать с результатом. Они друг другу не противоречат.

Старое – не значит неработающее

В последнее время у нас модно создавать комбайны, которые умеют делать все, что только в голову придет, и их разработка никогда не прекращается. А если в репозитории уже пару месяцев нет свежих коммитов, то все – можно считать, что он устарел и пользоваться им теперь – не комильфо. Я утрирую, конечно, но думаю вы и сами замечали, до какого абсурда это иногда доходит.

В мире PostCSS обычно один плагин решает одну задачу. Можно тут увидеть элементы философии Unix. Из этого следует логичный вывод – если плагин уже решает свою задачу, то больше с ним ничего особо делать не нужно. Вы можете встретить плагины, которые годами не обновлялись, но это не значит, что они вдруг перестали решать задачи, для которых были созданы.

Но приступим… Я собрал десяток плагинов, которые на практике показали свою способность упрощать жизнь верстальщикам и экономить время при разработке. Но вы всегда можете добавить что-то в комментариях.

№1. Doiuse

Думаю все мы сталкивались с такой проблемой: пишешь код, проверяешь в хроме – все ок. Проверяешь в FF – ок. А потом в мобильном Safari все разваливается. Или в Edge. И ты сидишь и не понимаешь, что не так. Потом долго пялишься в код, пьешь чай, и вдруг приходит озарение, что какое-то свойство не поддерживается в каком-то браузере. Идешь на caniuse и видишь подтвержение очевидного.

Конечно, с опытом руки сами запоминают, какие свойства нужно избегать, но всякое бывает. Можно не выспаться, могут быть сжатые сроки и нервы, может поменяться список браузеров, которые нужно поддерживать. И тут опыт начнет подводить. Doiuse – это инструмент, который очень выручает в таких ситуациях.

Принцип работы прост – мы скармливаем ему список браузеров и наш CSS. Плагин идет в базу caniuse и в реальном времени выдает нам ответ, что мы поиспользовали из того, что не поддерживается.

Список браузеров мы можем задавать прямо в package.json. Просто и удобно. PostCSS использует browserslist и, если вы не видели раньше, то выглядит это примерно так:

Также есть конфиг самого doiuse, в котором можно заставить его игнорировать некоторые группы свойств, если вы уверены, что это ни на что не влияет. Например если вы используете полифилы или от потери поддержки какого-то свойства ничего не изменится:

Стандартный лог, который дает плагин, не очень читаемый. Он содержит много информации и воспринимать его не очень удобно. Но это дело поправимое. В том же конфиге мы можем сделать свою функцию для формирования лога.

Используйте console.log чтобы сообразить, как устроен объект, который передает PostCSS в эту функцию. Там много всего интересного.

Моя практика показала, что самый удобный вариант – это выводить селекторы и конкрентые свойства, которые не поддерживаются, без уточнения браузеров и строк кода. Если в проекте используется БЭМ или какие-то аналоги, и код компонентов распределен по отдельным файлам, то такой подход позволяет быстро находить проблемное место не нагружая мозг.

Чтобы не писать специальные последовательности символов для цветов в консоли, можно подключить пакет colors, с ним будет удобнее.

При сборке будет примерно такой вывод в консоли:

№2. Autoprefixer

Даже как-то неловко про него говорить, но уж слишком часто вижу людей, которые в 2019 году пишут префиксы руками и еще уверяют окружающих, что они точно знают, какие из них нужны, а какие – нет. Такие действия приводят к тому, что код зарастает кучей ненужных префиксов и становится совершенно нечитаемым. Это влияет на производительность труда. С другой стороны, если нужна поддержка динозавров, то всегда можно что-то забыть. Так что от ручного труда при решении этой задачи стоит избавляться.

Автопрефиксер работает все с той же базой caniuse, использует тот же browserslist и может добавлять в CSS те префиксы, которые действительно нужны в указанных нами браузерах. При этом сам код становится чище, а работа идет быстрее.

№3. Stylelint

Когда много и быстро печатаешь, то рано или поздно начинаешь допускать много ошибок, совершенно их не замечая. Глаз замыливается. В случае с CSS это может давать забавный (на самом деле нет) эффект, когда ты смотришь в браузер – видишь проблему с версткой. Смотришь в код – ее там нет. Смотришь в браузер – она есть. А в коде – нет. В результате можно долго искать сложную проблему, совершенно не замечая, что просто очепятался. Чтобы такого не было, придумали линтеры.

Stylelint – это популярный вариант. Он умеет работать с синтаксисами основных препроцессоров, знает о последних веяниях в CSS, можно настраивать на свой вкус – конфиги похожи на те, что у eslint. Формально этот инструмент можно использовать и сам по себе, без PostCSS, но не упомянуть его здесь было бы неправильно.

№4. Postcss-flexbugs-fixes

Или в более широком смысле postcss-fixes, в состав которого этот плагин входит. Медленно, но верно, флексы вытесняют старый подход к верстке на флоатах. Это хорошо, но все мы знаем, что с ними связан набор багов. Они описаны в репозитории flexbugs. Некоторые из них требуют к себе особого внимания, но также есть несколько штук, которые настолько простые, что постоянно вылетают из головы. Например IE игнорирует функцию calc в сокращенной записи свойства flex. Это не так часто нужно, но если понадобится, то руки могут сами написать сокращенный вариант и потом придется долго думать, в чем проблема. К счастью это дело можно исправить в автоматическом режиме. На помощь приходит плагин postcss-flexbugs-fixes.

В примере с calc он найдет в коде фрагменты вроде этого:

Просто и удобно.

№5. Postcss-preset-env

Раз уж мы говорим про поддержку браузерами, то будет не лишним сказать про postcss-preset-env. Раньше ту же роль выполнял cssnext. Этот плагин будет полезен, если вы интересуетесь новыми веяниями в CSS.

Многие из нововведений технически можно реализовать и старыми методами, просто это будет долго, многословно и некрасиво. Preset-env помогает писать код по-новому, экономить на этом время, а потом преобразовывать его в старый надежный вариант. Разумеется, некоторые вещи вроде кастомных свойств совсем не реализованы в старых браузерах, так что там будут применяться фолбеки.

Как можно догадаться по названию инструмента, он напоминает одноименный пресет у Babel. Здесь все так же – много преобразователей, собранных в один стабильный набор. Некоторые преобразования требуют последующее подключение скриптов-полифилов на клиенте, но большинство реализуется чисто средствами CSS. Насколько я понимаю, для Stage2+ скрипты не нужны. Во всяком случае не сталкивался с их необходимостью. Поправьте меня, если я что-то там пропустил.

№6. Postcss-animation

Часто слышу от разных людей (в основном это бэкендеры, которые не очень сильны в CSS), что они хотят использовать отдельные анимации из animate.css, но считают плохой идеей подключать всю библиотеку целиком. Вполне логично. Но в результате они тратят много времени пытаясь повторить эти анимации самостоятельно.

Плагин postcss-animation очень ускоряет этот процесс. Мы пишем только название анимации, например:

А он сам подтягивает из animate.css реализацию и вставляет ее в код.

№7. List-selectors

Когда у вас есть несколько верстальщиков и много стилей, встает вопрос о code review, о том, что было бы неплохо иногда глазами видеть общую картину со всеми селекторами, которые у нас есть. Знать, какие ID используются, есть ли селекторы по тегам или насколько соблюдается принятая методология. Особенно это важно, когда вы проверяете код новичка, который может писать странные вещи, которые формально будут работать, но фактически будут идти вразрез с принятыми соглашениями (далеко не везде эти соглашения хорошо зафиксированы и есть возможность такие вещи автоматизировать). Самому пролистывать многочисленные файлы со стилями, чтобы проверить адекватность селекторов, долго. Нужен способ вычленить их и показать отдельно. List-selectors как раз решает эту задачу.

Точно так же, как и doiuse, этот плагин позволяет использовать свою функцию для подготовки информации к выводу на экран. Можно вывести только то, что интересует, или раскрасить все в разные цвета. Как пример:

В этом примере получится длинный-длинный список селекторов:

№8. Immutable-CSS

Еще одна вещь, за которой стоит следить – это перебивание стилей из сторонних библиотек. Если мы подключили какую-то библиотеку, а потом начинаем для селекторов из нее писать свои стили, то в конечном счете получаем запутанный код, в котором не разобрать, что откуда взялось. Это может приводить к случайным багам, которые потом отнимают слишком много времени на ровном месте. Чем больше раз мы что-то переопределяем, тем сложнее в конечном счете понять, что происходит, хотя сама проблема, которую нужно решить, может быть очень простой. В этой ситуации может пригодиться инструмент под названием immutable-css.

В целом принцип его работы прост: берет файлы со стилями, если находит совпадения по селекторам – начинает возмущаться:

Единственная проблема у данного инструмента – это то, что он не поддерживает не-CSS синтаксис. Так что если в проекте используются препроцессоры, то сравнивать приходится уже собранные файлы. Но в целом, если задача состоит в том, чтобы просто убедиться, что никто случайно не переписал стили из сторонней библиотеки, то это не так важно.

№9. Bye-Bye!

Думаю всем знакома ситуация, когда мы постепенно добавляем какие-то компоненты на работающий сайт. Какие-то из них отправляются сразу в продакшен, а какие-то долго сидят и ждут своей очереди (например сверстать-то мы сверстали, а не бэкенде еще что-то не доделали). Что-то может быть экспериментом или временным решением на праздники. Ситуаций может быть много, но их объединяет то, что у нас набирается куча компонентов, а на боевом сайте используются лишь малая часть из них. Было бы хорошо убрать все, что не используется, из текущей сборки. Это может заметно уменьшить ее размер, а также снизить головную боль в перспективе, когда нужно будет делать редизайн к примеру, и встанет вопрос, что же из всего этого действительно нужно переписывать сейчас, а что — нет.

Есть разные подходы к этому вопросу. На ум сразу приходит uncss. Этот инструмент в автоматическом режиме определяет, какие стили используются на страницах и убирает лишнее. Но на практике это почти всегда приводит к тому, что никто не знает, что реально используется, а что – нет. А еще я все время сомневаюсь, не удалил ли этот инструмент чего лишнего. Но это наверное уже моя паранойя. Хотя.

Bye-bye – это более простой инструмент, которому мы сами скармливаем список селекторов, которые нужно убрать из CSS. Причем можно использовать регулярные выражения. Если вы применяете БЭМ или что-то еще в этом духе, то одной простой регуляркой можно удалять блок со всем, что к нему относится. Bye-bye!

Такой подход оказался довольно удобным. Сразу ясно, какие стили сейчас еще не используются или были убраны за ненадобностью, при этом все исходники на месте, все настройки в одном файле, ничего не потеряется, не вызывает трудностей сделать несколько разных сборок, а главное – решение простое и предсказуемое.

№10. PostCSS-trolling

Все предыдущие инструменты могут незначительно повысить производительность труда ваших верстальщиков, но этот дает просто феноменальные результаты. Очень рекомендую.

Заключение

PostCSS – это хорошее подспорье для верстальщика. Если им не злоупотреблять, конечно. Для многих проблем, отнимающих много времени, есть готовые решения в виде плагинов, и, хотя они зачастую не развиваются и кажутся заброшенными, это не мешает их использовать.

7 многообещающих расширений VS Code 2021 года

К старту курса по Fullstack-разработке на Python делимся подборкой расширений Visual Studio Code, среди которых вы найдёте генератор документации для кода JavaScript на базе ИИ и лёгкий, простой клиент REST API. За подробностями приглашаем под кат.

Результаты недавнего опроса разработчиков на Stack Overflow только подтверждают лидерство VS Code.

Во многом такая популярность объясняется огромной библиотекой расширений, позволяющей легко использовать сторонние API. Также можно создавать собственные расширения и публиковать их в магазине расширений VS Code.

В 2021 году вышло много новых расширений VS Code, тепло принятых разработчиками. Рассмотрим те, что привлекли моё внимание. Надеюсь, это поможет вам стать продуктивнее.

1. GitHub Copilot

Начнём с популярного ИИ, созданного GitHub и Codex OpenAI, для генерирования кода на основе представленного вами контекста.

Использующие VS Code или JetBrains разработчики будут в восторге: в Copilot предлагаются целые блоки кода для большинства языков программирования. Хотите большего? Можно буквально общаться с Copilot из своей IDE. Загружаем расширение, привязываем свою учётную запись GitHub и авторизуемся (вступаем в список ожидания Copilot, если ещё не сделали это).

Придётся подождать, пока вам откроют доступ: это делают вручную.

Мы протестировали с GitHub Copilot ряд готовых фрагментов кода на JavaScript и Swift — результаты приличные. Начните писать функцию или просто добавьте комментарий о том, чего хотите от кода, — и получите от Copilot хороший код:

Изображение автора

Возможности Copilot поистине безграничны. Нам удалось быстро создать функции для проверки строки-палиндрома, электронной почты, паролей и не только.

Напишите «current price of Bitcoin and Ethereum» («Текущая цена биткоина и эфириума»), и Copilot сгенерирует нужную функцию в режиме реального времени. Но самое ценное — Copilot копирует функциональность почти всех посвящённых готовым фрагментам кода расширений VS Code.

2. Thunder Client

Тестирование API — важная часть рутинного рабочего процесса. Один из главных инструментов разработчика здесь — это Postman, используемый также для проверки конечных точек API перед их интеграцией в приложения.

Но при работе с VS Code и тестировании API часто происходит переключение контекста (точнее, приложений). Поможет Thunder Client — легковесный, чистый и простой инструмент расширения клиента Rest API.

Он позволяет быстро тестировать конечные точки API кодовой базы в самом редакторе, минимизируя переключение вкладок. Бесскриптовые тесты делают его прекрасной альтернативой облегчённого Postman:

3. Snipped

Делясь друг с другом фрагментами кода в соцсетях, мы обычно копируем и вставляем их в carbon.now.sh, а затем экспортируем скриншоты. Snipped делает всё это автоматически прямо в редакторе VS Code, сохраняя скриншоты в буфере обмена:

4. Lorem.space

Следующее расширение VS Code идеально для создания прототипа веб-приложения с фиктивным содержимым. Lorem.space — генератор случайных изображений-заполнителей разных категорий.

По CMD + Shift + P, выбираем из выпадающего списка Lorem.space, категорию (пицца, гамбургер, лицо или мебель), задаём длину и ширину — lorem.space сгенерирует URL-адрес изображения-заполнителя:

5. AI Doc Writer для JavaScript и TypeScript

У разработчиков обычно разное отношение к написанию документации: одни это приветствуют, другие считают накладными расходами. AI Doc Writer — новое расширение от Mintlify, с которым писать документацию интересно и увлекательно.

Посмотрите: при выборе пробельных символов функции создаётся совершенно иная документация:

Изображение автора

Поисковая система Mintlify — ещё одно расширение VS Code. Оно позволяет находить сниппеты, записывая поисковые запросы на естественном языке, и даже спрашивать о назначении той или иной части кода. На момент написания этой статьи расширение — в закрытой бета-версии.

Пока расширение изъято из магазина VS Code.

6. Blockman

Хотите выделить часть кода, чтобы обратить внимание на какой-то его блок или изучить потоки управления? Blockman разбивает код на блоки, позволяя менять их цвета и глубину, переключать фокус и выполнять другие настройки. Посмотрите, как хорошо Blockman работает с отступом:

7. Live Frame

Live Frame — ещё одно расширение VS Code, которое минимизирует переключение контекста, позволяя запускать и просматривать изменения веб-приложений в самом редакторе. Переключения между VS Code и браузером теперь в прошлом. Кроме того, с Live Frame можно записывать или показывать интерактивные руководства с демонстрацией:

На этом я заканчиваю свой обзор. Спасибо за ваше внимание.

Прокачать ваши навыки или погрузиться в IT впервые вы сможете на наших курсах:

Краткий каталог курсов и профессий

Data Science и Machine Learning

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.

Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.

1. Project Snippets

Расширение Project Snippets, мой фаворит на все времена, создано на основе встроенного в VS Code инструмента User Snippets.

Если вы не знакомы с этой стандартной возможностью VS Code, то знайте, что она позволяет пользователю оформлять собственные фрагменты кода в виде так называемых сниппетов. Делается это для того, чтобы многократно использовать их в своих проектах. Что значит «многократно использовать»?

Рассмотрим пример. Предположим, вы обнаруживаете, что вам часто приходится писать один и тот же шаблонный код. Например — такой:

Подобный код можно оформить в виде сниппета. В результате, вместо того, чтобы вводить всё это с клавиатуры (или копировать откуда-нибудь), вам нужно будет лишь ввести так называемый префикс, после чего в редакторе появится код, соответствующий этому префиксу.

Создадим сниппет на основе фрагмента вышеприведённого кода. Для этого файл typescriptreact.json нужно привести к следующему виду:

Некоторое неудобство использования глобальных сниппетов заключается в том, что они оказываются доступными для всех разрабатываемых вами проектов (впрочем, в некоторых случаях, для сниппетов общего назначения, это, наоборот, удобно). Но некоторые проекты могут быть сконфигурированы по-особенному. В результате, если то, что используется в таких проектах, не нужно во всех проектах, глобальный файл сниппетов может оказаться не лучшим решением задачи оформления фрагментов многократно используемого кода.

Предположим, в некоем проекте используется особая структура папок. Для упрощения работы над этим проектом в файле typescriptreact.json может быть подготовлено нечто, подобное следующему коду:

Такие конструкции совершенно нормально могут применяться в JavaScript. Но что если мы используем в качестве инструмента для стилизации проекта библиотеку styled-components? В таком случае подобный синтаксис нас не устроит. Ведь в styled-components используются обычные CSS-конструкции!

Собственно говоря, здесь нам на помощь и приходит расширение Project Snippets.

Это расширение позволяет создавать сниппеты, действующие на уровне проекта или рабочего пространства. Такие сниппеты не конфликтуют со сниппетами, созданными для других проектов и не мешают при работе с ними. Это очень удобно.

2. Better Comments

Если вам нравится писать комментарии в своём коде, тогда вы, вероятно, сталкивались с тем, что иногда непросто бывает найти комментарий, написанный когда-то давно. Причиной этого может быть то, что код может немного разрастись.

С помощью расширения Better Comments можно выделять комментарии разными цветами.

Использование расширения Better Comments

3. Bracket Pair Colorizer

Когда мне довелось впервые увидеть скриншоты с результатами работы расширения Bracket Pair Colorizer, мне стало ясно, что это расширение просто обязано появиться в моём наборе инструментов.

Программирование — это моя страсть, и цветовое выделение скобок — это то, что, определённо, помогает мне полнее наслаждаться этим занятием.

Использование расширения Bracket Pair Colorizer

4. Material Theme

Тема Material, представленная расширением Material Theme, это грандиозное явление, которое теперь доступно и любителям VS Code. Её использование позволяет привести код к следующему виду.

Оформление кода с использованием темы Material

Это, должно быть, одна из лучших существующих тем.

5. @typescript-eslint/parser

Если вы пишете на TypeScript — вам, скорее всего, стоит рассмотреть возможность перевода своих TSLint-конфигураций на typescript-eslint. Дело в том, что, по некоторым данным, поддержка TSLint компанией Palantir будет через некоторое время прекращена. Вместо TSLint там будет использоваться typescript-eslint.

Проекты постепенно переходят на использование пакета @typescript-eslint/parser и связанных с ним пакетов. Делается это в стремлении подготовиться к будущим изменениям экосистемы TS-разработки. Если вам нравится Prettier, то вы сможете пользоваться этим инструментом, задействовав при этом большинство правил ESLint.

6. Stylelint

Stylelint — это тот инструмент, который всегда используется в моих проектах. Это так по нескольким причинам:

7. Markdownlint + docsify

Не знаю о том, как другие разработчики делают заметки во время мозговых штурмов, но мне нравится делать записи в формате Markdown. Это простой и удобный формат. Существует множество инструментов, которые помогают писать Markdown-тексты. Среди таких инструментов можно отметить markdownlint.

Я, кроме того, обычно использую во всех своих проектах docsify. Этот инструмент поддерживает формат Markdown и другие полезные возможности.

8. TODO Highlight

У меня есть привычка — писать прямо в коде заметки по поводу того, что нужно сделать в проекте. В результате мне интересны расширения вроде TODO Highlight. Это расширение помогает работать с TODO-заметками.

9. Import Cost

Расширение Import Cost принадлежит к разряду инструментов, полезность которых можно ощутить при их первом применении. Однако после того как подобным инструментом некоторое время попользуются, может оказаться так, что нужды в нём больше не возникнет. Дело в том, что со временем разработчик уже точно знает о том, какие именно сведения выдаст подобное средство. Однако я, всё равно, рекомендую некоторое время этим расширением попользоваться. Вполне может оказаться так, что оно принесёт вам пользу.

10. Highlight Matching Tag

Иногда поиск закрывающей части некоего тега может превратиться в непростое занятие. В таких случаях полезным может оказаться расширение Highlight Matching Tag.

Использование расширения Highlight Matching Tag

11. vscode-spotify

Иногда мне надоедает то, что в процессе работы в VS Code приходится постоянно переходить в музыкальный проигрыватель для того, чтобы переключить трек, а потом опять возвращаться к своим делам.

Эту проблему мне помогает решить расширение vscode-spotify, которое позволяет управлять проигрывателем Spotify прямо из VS Code.

Благодаря этому расширению можно видеть в статус-баре редактора сведения о проигрываемой композиции. Для переключения записей можно использовать горячие клавиши, управлять Spotify из VS Code можно и с использованием кнопок.

12. GraphQL for VSCode

Популярность технологии GraphQL растёт, примеры её применения можно увидеть практически во всех уголках JavaScript-разработки. Поэтому многим, скорее всего, пригодится расширение GraphQL for VSCode.

Это расширение поддерживает подсветку синтаксиса GraphQL, линтинг, автозавершение кода.

Я много пользуюсь Gatsby, поэтому мне ежедневно приходится читать GraphQL-код. Расширение GraphQL for VSCode мне в этом помогает.

13. Indent-Rainbow

Расширение Indent-Rainbow похоже на вышеописанное расширение Highlight Matching Tag. Если иногда вам непросто бывает разобраться в отступах — это расширение поможет вам справиться с проблемой, улучшив читаемость кода. Вот пример его использования.

Использование расширения Indent-Rainbow

14. Color Highlight

Color Highlight — это одно из тех расширений, о котором меня спрашивают: «Где удалось его найти?». Данное расширение помогает в работе с цветом. Выглядит это так, как показано ниже.

Использование расширения Color Highlight

15. Color Picker

Color Picker — это расширение для VS Code, которое предлагает пользователю графический интерфейс, помогающий выбирать цвета для использования в CSS.

16. REST Client

Когда мне довелось впервые попробовать расширение REST Client — мне оно не показалось особенно полезным. Оно не выдерживало сравнения с чем-то вроде Postman.

Но постепенно оказалось, что это расширение оказывает огромное положительное влияние на мою работу. Особенно — тогда, когда мне нужно было тестировать некие API.

При работе с ним достаточно, например, создать новый файл, в котором будет всего одна строчка:

Использование расширения REST Client

Это расширение, кроме того, позволяет настраивать параметры или данные для POST-запросов. Делается это с помощью буквально пары строк кода:

Подобная конструкция приведёт к выполнению POST-запроса с параметрами < "email": "someemail@gmail.com", "password": 1 >.

И это, на самом деле, лишь предельно сжатое описание возможностей данного расширения.

17. Settings Sync

Мне очень не нравилось, при настройке нового рабочего места, составлять списки используемых мной расширений, потом сохранять их в чём-то вроде Evernote, потом всё это вручную восстанавливать.

Автоматизировать этот процесс мне удалось с помощью расширения Settings Sync.

18. Todo Tree

Расширение Todo Tree помогает находить TODO-комментарии в коде проектов. Оно оформляет эти комментарии в формате дерева, выводимого в левой части экрана.

Использование расширения Todo Tree

19. Toggle Quotes

Toggle Quotes — это интересное расширение, которое позволяет менять вид используемых в коде кавычек. Оно оказывается очень кстати, например, в тех случаях, когда нужно изменить обычные кавычки на обратные кавычки (backticks). Это может понадобиться при интерполяции строк и может оказаться особенно полезным тогда, когда Prettier оформил строки с использованием обычных одинарных кавычек.

Использование расширения Toggle Quotes

20. Better Align

Расширение Better Align позволяет выравнивать код без его предварительного выделения.

21. Auto Close Tag

Этой простой и удобной функции нет в стандартных возможностях VS Code, поэтому данное расширение я считаю весьма полезным.

22. Sort Lines

Мне не нравятся массивы, элементы которых расположены не в алфавитном порядке. Быстро справиться с этой проблемой мне помогает расширение Sort Lines. Если вам тоже не нравятся подобные массивы — оно может пригодиться и вам.

23. VSCode Google Translate

Возможно, я — единственный человек, который считает полезным расширение VSCode Google Translate. Но мне оно помогает, так как мне приходится принимать участие в работе над проектами, над которыми вместе со мной трудятся люди, говорящие на разных языках. Это расширение может пригодиться тем, кто, для перевода чего-либо, не хочет сворачивать VS Code.

24. Prettier

Prettier — это расширение для VS Code, которое умеет автоматически форматировать код, написанный на JavaScript, на TypeScript и на других языках.

25. Material Icon Theme

Значки из пакета Material Icon Theme мне нравятся больше, чем другие. С их помощью гораздо легче различать типы файлов. Особенно это справедливо для тех случаев, когда в VS Code используется тёмная тема.

26. IntelliSense for CSS class names in HTML

27. Path Intellisense

Расширение Path Intellisense помогает автоматически завершать ввод имён файлов.

Итоги

Надеемся, среди расширений для VS Code, о которых вы только что прочли, найдётся что-то такое, что вам пригодится.

Уважаемые читатели! Какие расширения для VS Code вы добавили бы к тем, о которых шла речь в этой статье?

Полезные плагины (расширения) для Visual Studio

В этой подборке я перечислил удобные и полезные плагины, которыми я пользуюсь ежедневно, и которые помогают мне в работе.

Ниже представлен список плагинов (расширений, plugins), установленных у меня в среде разработки Visual Studio. В основном, это плагины для веб-разработки, но есть и некоторые другие. В прикрепленном видео более подробно рассказывается о настройке и возможностях упоминаемых расширений.

ZenCoding: это аналог плагина EMMET, адаптированный под Visual Studio. Плагин позволяет быстро генерировать HTML-разметку, используя синтаксис CSS. Также в комплект входит генератор Lorem Ipsum, генератор Lorem Pixel, генератор PlaceHold.it.

Syntax Highlighting Pack: плагин добавляет дополнительную подсветку синтаксиса и поддержку сниппетов для многих языков программирования, включая Clojure, Go, Jade, Lua, Swift, Ruby и прочие.

HTML Snippet Pack: плагин позволяет более продуктивно работать с разметкой HTML (генерация, автозакрытие тегов). Отлично дополняет ранее объявленный ZenCoding.

Editor Enhancements: плагин добавляет такую функциональность как HTML/URL encoding, трансформация и сортировка выделенного участка текста, хеширование по различным алгоритмам.

File Icons: добавляет привлекательные иконки для различных типов файлов, которые не может распознать Visual Studio.

File Nesting: плагин автоматически совмещает файлы в древовидную структуру, основываясь на имени файла. Также позволяет принудительно вкладывать файлы различных типов.

Image Optimizer: плагин добавляет возможность оптимизации изображений прямо из Visual Studio. Оптимизировать можно JPEG (MozJPEG компрессия), PNG (Zopfli компрессия), обычные и анимированные GIF. Также можно сохранить изображение в виде строки base64 dataURI.

Open Command Line: плагин добавляет поддержку консолей различных типов, включая cmd, PowerShell, Bash и другие.

Bundler and Minifier: плагин позволяет реализовывать связывание и минификацию файлов JavaScript, CSS, HTML.

Web Compiler: расширение позволяет компилировать файлы LESS, Sass Stylus, JSX, ES6 и CoffeeScript.

CSS Tools: плагин добавляет улучшения для CSS-редактора в Visual Studio, такие как превью обозначенного шрифта или картинки, подсказки для цветов, Drag ‘n drop некоторых элементов и другие.

Подборка будет по возможности дополняться. Возможно, я не использую многие полезные плагины, так как не знаю о них. Кидайте в комментарии свои плагины, которыми пользуетесь Вы.

The Best VS Code Extensions For Vue Developers

Last Updated on January 6, 2021

Adding the right VS Code Extensions to Visual Studio can make your life as a developer so much easier.

They can help with formatting, scalability, enforcing best practices, and so automate so many of the forgettable tasks in our dev process. They can also just be fun extensions that make our code look prettier / easier to write.

As a Vue enthusiast, I’ve spent time looking for the best VS Code Extensions for Vue developers. Here are some of the ones that have made my life so much simpler.

Essential Extensions

Here are some of the plugins that I believe are essential for Vue development.

If you only download one VS Code extension from this list, it has to be Volar.

It provides Vue specific syntax highlighting, snippets for common snippets, and so much more that every Vue developer needs.

Volar adds high-performance tooling for Vue language support and comes ready to handle type checks!

Volar is very well maintained – it even comes with Vue3 Typescript support.

There’s not really too much else to say about Volar – just get it. It’ll make your development so much better.

If you have Vetur (the old Vue tooling) installed, make sure to disable it after installing Volar.

Most developers are familiar with ESLint – one of the most popular linter tools that helps keep your code consistent with best practices and readable across large codebases.

Vue has its own ESLint Plugin to check the syntax of single file components. I think it’s one of the best tools for writing maintainable and scalable code.

There’s nothing worse than looking at some old code and not even knowing where to start debugging it.

ESLint can help you stay organized, and with increasing support for Vue3, you’ll be writing scalable Vue projects.

People often get ESLint and Prettier mixed up, but while ESLint is a linter, Prettier is a formatter.

This means that Prettier makes sure your code is all consistently formatted (semi-colons, trailing commas, indents, etc) but does not throw errors for code quality errors like ESLint (like no-unused-vars ).

So if you want to enforce a strict formatting structure to your project, add VS Code and a prettierrc file to start declaring your rules!

Quality of Life Extensions

The thing I like about Vue is you don’t need tons of plugins to get up and running. The rest of this list is entirely optional based on your preferences.

Github Pilot gives you suggestions for code from an AI model that has analyzed billions of lines of publice code.

GitLens by GitKraken «supercharges Git inside VS Code». It brings several features:

While this is essential when you’re working in teams, I use it in personal projects as well. Knowing when I wrote a line and being able to quickly access the specific commit helps provide context as to why I wrote a certain line or what functionality it’s tied to.

Some VS Code Settings

Active Indent Highlights

A subtle way to get all the functionality is by changing the color of the indent stroke.

This will create a more clearly defined line between the opening and closing tags of your DOM element, conditional statement, and anything else that causes different indent levels.

I like having the active section have a light color that stands out, without being distracting.

To get this, we have to change some of our VS Code settings by cmd + p > Preferences: Open Settings (JSON)

Источники: