Появился сервис для быстрого и бесплатного создания своих тем для Visual Studio Code
Отличное решение для тех, кто давно хотел оформить VS Code под себя, но не никак не мог найти подходящую тему.
Разработчик Майк Тромба (Mike Tromba) представил сервис VS Code Theme Studio. Он позволяет создавать собственные темы для Visual Studio Code в интуитивно понятном веб-интерфейсе. После завершения работы пользователь получает JSON-файл с параметрами темы.
На сайте доступны две опции. Первая — создание темы с нуля. Пользователь указывает, какой тип ему нужен: светлая или тёмная тема. После этого открывается интерфейс визуального редактора, который предлагает 3 вкладки:
- Colors — настройка цветовой схемы интерфейса.
- Editor — настройка цветовой схемы редактора VS Code.
- Syntax — настройка цветовой схемы подсветки синтаксиса.
Вторая опция — форк готового шаблона и его изменение в том же визуальном редакторе.
На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
В планах у разработчика — реализовать автоматическое добавление созданной темы на маркетплейс Visual Studio Code. Сейчас пользователи могут только скачать файл JSON. Публиковать тему на маркетплейсе нужно самостоятельно.
Возможно ли в Visual C++ 2010 Express поменять светлую тему на темную?
Чем отличается Microsoft Visual C++ 2010 Express от Visual Studio 2010 Ultimate
Подскажите пожалуйста, в чем разница Microsoft Visual C++ 2010 Express от Visual Studio 2010.
Какое отличие между Visual C++ от Visual C++ 2010 Express
Подскажите какая разница между какимто стандартным Visual C++ от Visual C++ 2010 Express. Что.
Подключить тёмную тему
Как подключить тёмную тему (по умолчанию — светлая)
Visual C++ 2010 Express
Помогите решить задачу! С++
Заблокирован
Сообщение от AlexCH1 
Подскажите пожалуйста возможно ли в Visual C++2010 экспрес выпуск поменять светлую тему на темную
e 10-ки кроме как настраивать вручную цвета фона цветовых схем не было, у 2012 тема меняется здесь
Заблокирован
AlexCH1, для 10-ки попробуй поковыряйся здесь Tools/Options, я лично не настраивал цвета но такая возможность есть
Регистрация: 22.01.2016
Сообщений: 70
Спасибо все получилось
5501 / 4269 / 1213
Регистрация: 12.10.2013
Сообщений: 12,280
Записей в блоге: 2
Сообщение от Unknownx
e 10-ки кроме как настраивать вручную цвета фона цветовых схем не было
Для VS2010 есть специальное расширение, в котором несколько есть несколько заданных цветовых схем и возможность создавать свои. Гуглите ThemeManagerPackage.
10 лучших тем для VS Code
VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
C/C++ Themes
Новая тема от Microsoft. Доступна в тёмной и светлой версиях, а ещё в фирменных расцветках Visual Studio 2017.
One Dark Pro
Знаменитая тема от Atom. Славится цветовыми сочетаниями и приятным стилем. Подойдёт для любителей тёмного режима. Доступна в четырёх версиях.
GitHub Theme
Для любителей классических тем GitHub. Доступна в девяти версиях.
Dracula Official
Ещё один вариант тёмной темы, которую часто используют дизайнеры. Доступна в классической тёмной и мягкой версиях с менее контрастными цветами.
Winter is Coming Theme
Для любителей синенького. Доступна в тёмной, светлой и версии без курсива.
Monokai Pro
Цель темы — фокусировка только на коде. Доступна в шести версиях.
Night Owl
Тема для ночного и дневного использования, где подобран идеальный контраст цвета. Удобно, когда вы любите поработать ночью. Доступна в тёмной, светлой и версии без курсива.
Ayu
Простая тема с яркими цветами. Доступна в шести версиях — светлой, тёмной, с рамкой и версии mirage с серым фоном.
Shades of Purple
Тема с яркими оттенками фиолетового. Благодаря хорошо подобранным цветовым выделениям, удобно ориентироваться в коде. Доступна в тёмной и очень тёмной версиях.
Noctis
Коллекция светлых и тёмных тем с хорошим сочетанием тёплых и холодных оттенков. Доступна аж в 11 версиях. Точно найдёте на свой вкус.
Материалы по теме
- 10 полезных плагинов VS Code для вёрстки
- 18 полезных плагинов JavaScript в VS Code
- 10 горячих клавиш VS Code, которые ускорят вашу работу
- 34 инструмента для веб-разработчика на каждый день
- Лучшие тайм-трекеры для программистов
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
- 9 июня 2023
17 полезных плагинов JavaScript в VS Code
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
- 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023
Как собрать проект на Webpack
Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.
Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.
- 7 апреля 2023
Webpack: инструкция по применению
Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.
Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.
CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:
npm install copy-webpack-plugin --save-dev После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:
const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.
Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.
�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.
Копирование нескольких файлов
Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .
Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.
const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.
Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin , их подробное описание можно прочитать в документации.
Другие способы
Кроме CopyWebpackPlugin , существуют и другие плагины и загрузчики, их также часто называют лоадерами, которые позволяют копировать статические файлы в каталог сборки.
Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :
npm install file-loader --save-dev Затем добавьте его в конфигурационный файл webpack.config.js :
module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.
Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.
Для использования url-loader необходимо его установить:
npm install url-loader --save-dev Затем добавить в конфигурационный файл webpack.config.js :
module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.
Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.
- 30 марта 2023
Всегда перед глазами: 15 лучших тем VS Code на 2022 год
Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за обширный набор функций, среди которых отладка, рефакторинг, подсветка синтаксиса, богатая экосистема расширений и разнообразные темы. Цель последних — повысить опыт и производительность разработчиков. Подборкой с лучшими из них поделились авторы блога ThemeSelection.
Курс Микросервисная архитектура.
програма, яка допоможе опанувати головні принципи розробки мікросервісної архітектури, щоби ви могли проєктувати незалежні сервіси, а потім інтегрувати їх в одну систему. Практики буде багато.
One Dark Pro
Количество установок: 4,4 млн.
Культовая тема от Atom для Visual Code. Подходит для разработчиков, которые предпочитают темный режим. Одна из самых популярных тем, что, вероятно, обусловлено хорошим сочетанием цветовых схем и визуально приятным стилем.
Возможно вам будет интересен курс по разработке от наших партнеров Mate Academy. Получить качественно новые знания вам помогут практикующие специалисты и грамотно составленная программа обучения.
Dracula official
Количество установок: 2,9 млн.
Курс Frontend.
Онлайн курс з працевлаштуванням, ставай суперніндзя, який може з нуля створити сайт.
Еще одна темная тема, которую можно найти еще более чем в 180 приложениях. Подойдет для дизайнеров. Считается одной из самых популярных тем для VS Code.
GitHub Theme
Количество установок: 2,7 млн.
Классическая GitHub-тема, доступная в версиях light, dark, light default, dark default и dark dimmed. Популярна среди разработчиков, которым нравятся классические темы GitHub.
Winter is Coming Theme
Количество установок: 1,4 млн.
Вдохновлена такими темами, как Visual Studio Dark+, Monokai и Old Hope. В сборке темная, темная без курсива и светлая тема. Синий фон этой темы вдохновлен темой Night Owl.