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-музыку и пишите свой прекрасный код до тех пор, пока ваше сознание не влилось в базу данных Нейроманта.
Для того чтобы добиться эффекта свечения текста, после установки этой темы вам придётся с ней немного повозиться. Но вы, уверен, согласитесь с тем, что эта красота стоит того, чтобы приложить к её достижению некоторые усилия.
Уважаемые читатели! Знаете какие-нибудь интересные расширения и темы для VS Code?
Самые полезные плагины и красивейшие темы для VS Code
Visual Studio Code от Microsoft является очень легким, но при этом достаточно мощным и удобным инструментом для редактирования кода. Несмотря на его обширный встроенный функционал, он легко дополняется как сторонними, так и официальными плагинами.
Встречайте – подборка лучших плагинов, а также красивых и лаконичных тем оформления для VS Code!
Live Server
Пожалуй, самый полезный плагин для верстальщиков. Открывает в соседнем с вашим кодом окне вкладку в браузере, которая будет в реальном времени демонстрировать отображение вашего сайта, автоматически при этом обновляясь. Надоело переключаться между окнами редактора кода и браузера? Устали постоянно обновлять страничку браузера? Тогда этот плагин просто создан для вас!
Polacode
Данный плагин подойдет тем, кто любит красиво оформлять свои репозитории в GitHub’е (либо делать красивые скриншоты кода, чтобы отсылать его потом друзьям). Всего в пару кликов вы можете поместить выделенный участок кода в красиво оформленную рамочку в стиле скриншотов с macOS, а также настроить эту рамочку и сохранить получившийся результат картинкой. Кстати, если у вас стоит какая-нибудь тема, то данный плагин сохранит цвет фона и подсветку синтаксиса для участка кода на самом скриншоте. Одним словом – очень полезный плагин.
P.S. У официальной версии плагина имеются проблемы с работоспособностью на свежих версиях VS Code, ниже прикреплена ссылка на рабочую версию уже от другого автора с добавленной настройкой получающихся скриншотов.
Prettier
Форматирование кода. Если данное словосочетание рождает в вашей голове ужасные ассоциации и гневные воспоминания, то данный плагин, скорее всего, станет для вас находкой даже похлеще, чем Америка для Христофора Колумба. Очень рекомендуется для использования в работе с коллегами, чтобы на споры по поводу стиля кода уходило намного меньше времени (его можно потратить на более полезные занятия).
Всего-то и нужно, что установить сам плагин. Вуаля – можете писать код, как вам заблагорассудится, а Prettier отбросит вопрос форматирования кода в дальний ящик, сделав все за вас по своему код-стайлу.
Quokka.js
Устали при написании кода каждый раз запускать его, чтобы проверить работоспособность какого-то участка? Данный плагин решит вашу проблему, ведь он отображает результат выполнения кода прямо в самом редакторе кода. Удобно ведь, да? А сколько времени экономит, убирая нужду в постоянном запуске кода после каждой правки!
Скачать плагин можно на этой странице.
Rest client
При работе с различными API, чтобы не тыкать пальцем в небо, вы, наверное, используете различные сторонние программы для отправки HTTP-запросов, вроде Postman, да? Забудьте про все это, ведь данный плагин позволяет вам отправлять HTTP-запросы и просматривать ответы на них прямо в окне VS Code, отбрасывая нужду в переключении между окнами и задействовании иных программ, кроме самого редактора.
Auto Rename Tag
И снова полезный плагин для верстальщиков. При редактировании HTML/XML-тегов в начале он автоматически редактирует их и в конце. Простой плагин, но как сильно сокращает количество рутинных действий в работе. Как говорится, мелочь, а приятно!
TODO Highlight
Очень любите помечать участки кода тегами TODO и FIXME, но затем забываете о том, что нужно что-то починить или переделать? Данный плагин решит вашу проблему и будет выделять в коде фразы TODO или FIXME. А если таковыми вы ничего не помечаете, то вам не составит труда вставить туда и свои любимые теги, плагин будет и их выделять.
Страница в магазине расширений VS Code.
Faker
Предположим, у вас есть участок кода, который работает с данными из базы данных, но вам нужны просто случайно сгенерированные данные, а не взятые из БД. На помощь вам придет Faker, а точнее, сделанный на его основе плагин для VS Code. Достаточно при заполнении полей лишь вызвать соответствующую категорию данных – в нужное поле впишется случайно сгенерированное значение. Категории бывают разные, начиная с имен и заканчивая ссылкой на случайное фото.
Ознакомиться с возможностями инструмента можно на данной странице.
Bookmarks
Данный плагин упрощает перемещение в огромном пространстве кода, оставляя «книжные » закладки на определенных строчках. В общем, название плагина говорит само за себя.
Image Preview
Если в вашем коде уже присутствуют ссылки на какие-то изображения/иконки, то данный плагин покажет вам их в маленьком окошке слева от порядкового номера строки. Пригодится верстальщикам, чтобы не путаться во множестве иконок.
Бонус: лучшие темы для Visual Studio Code
Все эти практичные и полезные плагины – это, конечно, хорошо, но мы совсем забыли про внешний вид редактора кода, а ведь оформление является очень важным аспектом программирования, определяющим визуальное удовольствие от взаимодействия с программой. Здесь не будет комментариев, просто небольшая подборка очень красивых и, по моему мнению, лаконичных тем.
На этом мой топ подходит к концу. Надеюсь, что разработка в Visual Studio Code теперь будет приносить вам намного больше удовольствия. Удачи!
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. Создатели этой темы также включили в список фрагменты, которые помогут вам настроить цвета и добавить курсив в пользовательский интерфейс.
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 вам нравится больше всего? Дайте нам знать в комментариях ниже. Кроме того, если вы используете тему, которую мы не упомянули, но которая должна быть в списке, не стесняйтесь поделиться ею с другими в комментариях.
VSCode Тема Реактивной Документации
У React есть эта потрясающая документация с большим количеством примеров кода. Он говорит, что документы используют Цветовая схема Oceanic Next для примеров кода, чего явно нет. (например, цвет ключевого слова this или class methods )
Кто-нибудь знает, какая цветовая тема на самом деле используется?
4 ответа
Я не смог найти тот, который на самом деле был верен сайту, поэтому я сделал его (он достаточно близок для меня, но не стесняйтесь открывать вопросы на repo, если что-то вас беспокоит).
Вы можете загрузить его прямо с торговой площадки VS Code, в частности, здесь,
Немного предыстории
Я использовал ссылку, предоставленную Основная тема React в этой теме Reddit, а также общие цвета, используемые в тема. Наконец, я тщательно просмотрел сам сайт и старался придерживаться его как можно больше.
Я использую его ежедневно на базе кода React / React Native / Vue.js / Python + Django, и он выглядит хорошо и везде читается (по моему скромному мнению).
Во всяком случае, это немного, но это честная работа.
Как это выглядит?
Я просто хотел, чтобы фон был как можно более темным и содержал «затемненную» версию;) но это дело вкуса, и вы находитесь там, где хотите быть.
Кто-то задал этот вопрос в Reddit и получил ответ от участника основной команды React:
Я думаю, что Джо (дизайнер, который придумал общий текущий дизайн) выбрал эти цвета темы из своей палитры Photoshop. Это настраиваемая тема, но вы можете получить цвета из GitHub. Вы можете найти цветовую схему здесь следующим образом: https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#L11
Цветовая схема связана с:
Тем не менее, я не уверен, как настроить или создать тему, чтобы включить эти цвета.
Theme oceanic next vs code что это
Oceanic Next Color Scheme
Colorful Sublime Text 2/3 color scheme optimized for babel-sublime JavaScript syntax highlighter.
Oceanic Next was also ported to:
Oceanic Next inspired another schemes which extend syntax or change some of its aspects:
There is a list of colors used in Oceanic Next. Check it before porting the color scheme to another environment.
Companion Sublime UI Themes
Theme is inspired by Base16 Ocean Dark Theme which was my long time favorite and based on Oceanic Eighties Color Scheme.
If you’d like to help with development of the color scheme please follow these simple rules:
or consider donating through PayPal 💰
MIT Licensed
About
📐 Sublime Text color scheme ready for next generation JavaScript syntax