Visual Studio Code
Visual Studio Code is a code editor in layman’s terms. Visual Studio Code is “a free editor that helps the programmer write code, helps in debugging, and corrects the code using the intelli-sense method ”.
In normal terms, it facilitates the user’s ability to write the code easily. Many say it is half an IDE and half an editor, but the decision is up to the coders. Any program/software we see or use works on the code running in the background. Traditionally, coding was done in traditional or basic editors like Notepad! These editors used to provide basic support to the coders.
Some were so basic that writing basic English-level programs was very difficult. As time went by, some programming languages needed a specific framework and support for further coding and development, which was impossible using these editors. VI Editor, or Sublime Text Editor, is one of the many kinds of editors that came into existence. VS Code is the most prominent, which supports almost every coding language. Its features let the user modify the editor as per the usage, which means the user can download the libraries from the internet and integrate them with the code as per his requirements.
ADVERTISEMENT
Popular Course in this category
SILHOUETTE STUDIO Training
Web development, programming languages, Software testing & others
Table of Content
- Introduction to Visual Studio Code
- Visual Studio Code Features
- Installation and Setup
- Extensions and Customization
- Create a new project in VS Code
- Difference Between Visual Studio vs Visual Studio Code
Visual Studio Code Features
Visual Studio Code has some very unique features. They are listed below:
- Language Support: VS Code supports a wide range of programming languages, including but not limited to JavaScript, TypeScript, Python, C#, Java, Go, Ruby, and others.
- Intelli-Sense: It can detect if any snippet of code is left incomplete. Also, common variable syntax and variable declarations are made automatically. Ex: If a certain variable is being used in the program and the user has forgotten to declare it, intelli-sense will declare it for the user.
- Extensions and Support: Usually supports all the programming languages, but if the user/programmer wants to use a programming language that is not supported, he can download and use the extension. And performance-wise, the extension doesn’t slow down the editor as it runs as a separate process.
- Repository: With the ever-increasing demand for the code, secure and timely storage is equally important. It is connected with Git or can be connected with any other repository for pulling or saving the instances.
- Web-Support: Comes with built-in support for Web applications. So web applications can be built and supported in VSC.
- Hierarchy Structure: The code files are located in files and folders. The required code files also have some files that may be required for other complex projects. These files can be deleted as per convenience.
- Improving Code: Some code snippets can be declared a bit differently, which might help the user in the code. This function prompts the user, wherever necessary, to change it to the suggested option.
- Terminal Support: Often, the user must start from the root of the directory to start with a particular action; an in-built terminal or console provides user support to not switch between two screens for the same.
- Multi-Projects: Multiple projects containing multiple files/folders can be opened simultaneously. These projects/folders might or might not be related to each other.
- Git Support: Resources can be pulled from Git Hub Repo online and vice-versa; saving can be done too. Resource pulling also means cloning the code made available on the internet. This code can later be changed and saved.
- Git Integration: With VS Code’s built-in Git integration, you can perform version control tasks directly within the editor. You can stage, commit, and push changes, view diffs, and manage branches without switching to a separate Git client.
- Command Palette: The Command Palette is a useful tool that allows you to quickly execute commands and access various functionalities with just a few keystrokes. It offers a fast and efficient way to navigate the editor and perform actions without relying on menus and toolbars.
- Debugging Support: VS Code offers a robust debugging experience. It lets you set breakpoints, inspect variables, step through code, and handle exceptions. This makes finding and fixing bugs in your applications a more manageable task.
Installation and Setup
Below are the different steps to Install Visual Studio Code:
1. Visit the official Visual Studio Code website: https://code.visualstudio.com/
2. To get the software, click the “Download” button on the website. The system will recognize your operating system and recommend the suitable version for download – whether it’s Windows, macOS, or Linux.
3. After downloading the installer file, find it on your computer and run it. Once the Installer has opened, it will ask you to accept the terms and conditions of Visual Studio Code. Click “I accept the agreement” and the “Next” button.
4. In the next process, You have to choose the appropriate location to install Visual Studio Code. You can keep the default location or select a different one according to your preference, then click the Next button.
5. The same goes for the Visual Studio Code shortcut on your desktop or in the Start menu.
6. Decide whether you would like to add the “Open with Code” function to the context menu when right-clicking on files and folders, and select the below options accordingly.
7. To proceed with the installation setup, click the “Install” button.
Please wait for the installation process; it might take around one minute.
8. Once the installation setup for Visual Studio Code is complete, a window will appear, as shown below. Check the box for “Launch Visual Studio Code” and then click on the “Finish” button.
You can launch Visual Studio Code by locating its icon in the Start menu (for Windows) or Applications folder (for macOS). For Linux, you can launch it through the application launcher or by typing the “code” command in the terminal. When you first open Visual Studio Code, a welcome screen will appear. You can either close it or explore the available features and extensions.
Congratulations! You have successfully installed Visual Studio Code, which is now ready for use.
Extensions and Customization in Visual Studio Code
Extensions for 2023
VS Code extensions are add-ons that can improve the functionality of the program. They can offer language support, debugging capabilities, external service integration, and productivity tools. To add an extension, you can access the Extensions view either by clicking on the square icon located in the sidebar or by using the shortcut Ctrl+Shift+X (for Windows/Linux) or Cmd+Shift+X (for macOS). In the Extensions view, you can browse different extensions, read their descriptions, and easily install them with just one click.
Some popular extensions include:
- ESLint: For JavaScript and TypeScript developers, there’s a popular extension that integrates ESLint, a well-known linter, into VS Code. This helpful tool can catch common code errors and enforce code style conventions.
- Prettier: It is a code formatter extension available that supports multiple programming languages and can automatically format your code to ensure consistent styles.
- GitLens: This feature improves the integration of Git by offering comprehensive annotations, blame annotations, and extensive details about code modifications within the editor.
- Live Server: You can set up a local development server with live reload capabilities to see any real-time changes you make to your HTML, CSS, and JavaScript files.
Customization
Various customization features are available in VS Code to personalize your coding environment. You can explore some of the features mentioned below:
- Themes: With VS Code, you can customize the editor’s appearance with various themes. You can select a light or dark theme or browse the Marketplace to find and install third-party themes. Customizing your theme can reduce eye strain during extended coding sessions or in expressing your personal style.
- Custom icons: Custom icons in icon packs can replace the default ones in your sidebar, providing your workspace with a new and visually appealing appearance. Additionally, this can make it simpler to differentiate between various file types or components.
- Settings: In VS Code, many settings are available to customize the editor to your liking. These settings include formatting, IntelliSense, keybindings, and more. You can access them using the command palette (Ctrl+Shift+P or Cmd+Shift+P) or File > Preferences > Settings.
- Keybindings: In VS Code, many settings are available for you to customize the editor to your liking. These settings include formatting, IntelliSense, keybindings, and more.
Create a new project in Visual Studio Code
Here is an example of creating a new html project in Visual Studio code:
1. First, you need to create a folder to locate your HTML project. We have created a folder as Project
2. Open your Visual Studio code Application.
3. Click on the open folder. Select the project folder which we have created in the first step.
4. To create a new file, click on the new file option below and give the file a name with the “.html” extension, such as “new.html”.
An Html file will be created, and the screen will appear below.
5. Add the basic structure of an HTML document inside the newly created HTML file. You can use the following code as a starting point.
Code:
New Html Project body Welcome to Educba
Asia's Largest Online Learning Platform
6. Save the HTML file by pressing “Ctrl+S” (or “Cmd+S” on macOS) or by going to “File”> “Save”.
7. To view the HTML file in a web browser, right-click on the file located in the Explorer sidebar. Then, choose “Open with Live Server” (if you have the Live Server extension installed) or “Reveal in file explorer”. This will open the HTML file in your default web browser.
The output of the following code, which we used.
You have successfully created an HTML project in Visual Studio Code. Feel free to keep editing the HTML file, adding more files to your project, and exploring the numerous features and extensions available in Visual Studio Code to improve your development experience.
Difference Between Visual Studio vs Visual Studio Code
Here’s a difference between Visual Studio and Visual Studio Code:
| Points | Visual Studio | Visual Studio Code |
| Type | Integrated Development Environment | Lightweight Code Editor |
| Target Applications | Desktop, Web, Mobile, and Cloud | General-purpose Web Development |
| Platform Focus | Windows | Cross-platform (Windows, macOS, Linux) |
| Tools and Features | Comprehensive and Rich | Essential and Streamlined |
| Learning Curve | Steeper | Relatively Lower |
| Programming Languages | .NET, C#, and Windows Forms | Multi-language Support |
| Extensibility | Yes | Highly Extensible through Extensions |
| Integrated Terminal | Available | Available |
| Frameworks and Libraries | Extensive | Basic |
| Popular Usage | Enterprise and Large-scale Projects | Small-scale Projects, Web Development |
Frequently Asked Questions (FAQs)
Q1. Can I use Visual Studio Code for web development?
Ans: Absolutely! Many people use Visual Studio Code to construct websites. It is appropriate for web development projects since it supports HTML, CSS, and JavaScript and has features like IntelliSense, debugging, and an integrated terminal.
Q2. Can I customize the appearance of Visual Studio Code?
Ans: Yes, It enables a great deal of visual customization. You can personalize the look of panels and toolbars, install custom icon packs, and select a variety of themes.
Q3. Is Visual Studio Code suitable for large-scale projects?
Ans: Both small and large-scale projects frequently use Visual Studio Code. Although it is a simple editor, IntelliSense, debugging tools, and extensions are significant capabilities that can help create intricate programs.
Q4: Is Visual Studio Code only for Microsoft technologies?
Ans: No, Visual Studio Code is compatible with a wide range of programming languages and frameworks, including some not confined to Microsoft products. It is a flexible editor that programmers from many ecosystems utilize.
Conclusion
With advancements in technology day by day, Visual Studio Code will play a pivotal role in software development. With its ever-evolving features and soon-to-be-added new settings, enabling users to work with it from anywhere, it is certainly “THE THING” to keep one ahead of everyone in this ever-increasing IT market.
Recommended Articles
We hope that this EDUCBA information on “Visual Studio Code” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
- MonoDevelop vs Visual Studio
- Code Generator JavaScript
- What is Google Data Studio?
- Code Generator Tools
Программирование на C, C# и Java
Уроки программирования, алгоритмы, статьи, исходники, примеры программ и полезные советы
ОСТОРОЖНО МОШЕННИКИ! В последнее время в соиальных сетях учстились случаи педложения помощи в написании прогамм от лиц, прикрвающихся сайтом vscode.ru. Мы никогда не пишем первыми и не размещаем никакие материалы в псторонних группах ВК. Для связи с нами используйте исключительно эти контакт: vscoderu@yandex.ru, https://vk.com/vscode
Поменять тему в Visual Studio
Ознакомившись с этим материалом, вы узнаете как поменять тему в Visual Studio.
Для того, чтобы изменить фон в Visual Studio (в версиях 2013, 2015), необходимо в строке меню нажать кнопку «Сервис», затем выбрать пункт «Параметры».
В появившемся окне «Параметры» нажать на группу «Общие» (слева) и в выпадающем списке «Цветовая тема» (справа) выбрать нужную тему: «Светлую», «Синюю» или «Темную».
Для завершения нажмите кнопку «ОК». Готово!
Как сменить цвет дизайна visual studio
Практическое руководство. Персонализация интегрированной среды разработки и редактора Visual Studio
В этой статье мы настроим цветовую тему Visual Studio. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена темная тема. Далее рассмотрим, как изменить ее на другую цветовую тему.
В строке меню выберите Сервис > Параметры.
В списке параметров выберите Среда > Общие.
В списке Цветовая тема выберите нужную тему: заданную по умолчанию темную тему, синюю тему, синюю тему с повышенной контрастностью или светлую тему. Также можно выбрать параметр Использовать настройки системы, чтобы выбрать тему, используемую в Windows.
При изменении цветовой темы шрифты текста и их размер в интегрированной среде разработки возвращаются к значениям по умолчанию или ранее настроенным значениям.
Требуется больше тем? Ознакомьтесь с широким набором настраиваемых тем в магазине Visual Studio Marketplace. Дополнительные сведения о примерах новых настраиваемых тем Visual Studio 2022 на основе VS Code см. в записи блога Новая коллекция тем Visual Studio.
Из этой статьи вы узнаете, как переключить синюю цветовую тему Visual Studio на темный режим. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена синяя тема. Давайте изменим ее на тему Темная.
В строке меню, где расположены такие вкладки, как Файл и Правка, выберите Сервис > Параметры.
На странице параметров Среда > Общие измените значение параметра Цветовая тема на Темная и нажмите кнопку ОК.
Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.
Вы можете создать собственные темы, установив конструктор цветовых тем Visual Studio из Visual Studio Marketplace.
Из этой статьи вы узнаете, как переключить синюю цветовую тему Visual Studio на темный режим. Мы также настроим цвета для двух различных типов текста в редакторе кода.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Настройка цветовой темы для интегрированной среды разработки
По умолчанию в пользовательском интерфейсе Visual Studio установлена синяя тема. Давайте изменим ее на тему Темная.
В строке меню, где расположены такие вкладки, как Файл и Правка, выберите Сервис > Параметры.
На странице параметров Среда > Общие измените значение параметра Цветовая тема на Темная и нажмите кнопку ОК.
Цветовая тема для всей среды разработки (IDE) Visual Studio изменяется на Темная.
Вы можете выбрать дополнительные предопределенные темы, установив редактор цветовых тем Visual Studio из Visual Studio Marketplace. Когда вы установите это средство, в раскрывающемся списке Цветовая тема появятся дополнительные темы.
Изменение цветов текста в редакторе
Теперь настроим несколько цветов текста для редактора. Сначала создадим XML-файл, чтобы просмотреть цвета по умолчанию.
В строке меню выберите Файл > Создать > Файл.
В диалоговом окне Новый файл в разделе Общие выберите XML-файл и нажмите кнопку Открыть.
Вставьте приведенный ниже XML-код под строкой с .
Обратите внимание, что цвет номеров строк бирюзовый, а атрибутов XML (например ) — голубой. Давайте изменим цвет этих элементов.
Чтобы открыть диалоговое окно Параметры, в строке меню выберите Сервис > Параметры.
В разделе Среда выберите категорию Шрифты и цвета.
Обратите внимание, что в поле Показать параметры для указано значение Текстовый редактор,—именно это нам и нужно. Раскройте список, чтобы узнать, для каких еще элементов можно настроить шрифты и цвет текста.
Чтобы изменить цвет номера строки, в списке Отображение элементов выберите Номер строки. В поле Основной цвет элемента выберите Оливковый.
Некоторые языки имеют собственные параметры шрифтов и цветов. Если вы являетесь разработчиком на C++ и хотите изменить цвет, используемый для выделения функций, найдите элемент Функции C++ в списке Отображение элементов.
Прежде чем закрыть диалоговое окно, давайте также изменим цвет атрибутов XML. В списке Отображение элементов прокрутите вниз до элемента Атрибут XML и выберите его. В поле Основной цвет элемента выберите Травяной. Нажмите ОК, чтобы сохранить изменения и закрыть диалоговое окно.
Теперь цвет номеров строк станет оливковым, а цвет XML-атрибутов — ярко-травяным. Если открыть файл другого типа, например файл с кодом C++ и C#, цвет номеров строк также станет оливковым.
Мы изучили только некоторые способы настраивать цвета в Visual Studio. Ознакомьтесь с другими возможностями в диалоговом окне Параметры, чтобы настроить Visual Studio в соответствии со своими предпочтениями.
Color Themes
Color themes let you modify the colors in Visual Studio Code’s user interface to suit your preferences and work environment.
Selecting the Color Theme
- In VS Code, open the Color Theme picker with File >Preferences >Color Theme. (Code >Preferences >Color Theme on macOS).
- You can also use the keyboard shortcut ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T ) to display the picker.
- Use the cursor keys to preview the colors of the theme.
- Select the theme you want and press Enter .
The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).
Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace specific theme. To do so, set a theme in the Workspace settings.
Color Themes from the Marketplace
There are several out-of-the-box color themes in VS Code for you to try.
Many more themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, install it and restart VS Code and the new theme will be available.
You can search for themes in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) search box using the @category:»themes» filter.
Auto switch based on OS color scheme
Windows and macOS support light and dark color schemes. There is a setting, window.autoDetectColorScheme , that instructs VS Code to listen to changes to the OS’s color scheme and switch to a matching theme accordingly.
To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes with the settings:
- workbench.preferredLightColorTheme — defaults to «Default Light+»
- workbench.preferredDarkColorTheme — defaults to «Default Dark+»
- workbench.preferredHighContrastColorTheme — defaults to «Default High Contrast»
- workbench.preferredHighContrastLightColorTheme — defaults to «Default High Contrast Light»
Customizing a Color Theme
Workbench colors
You can customize your active color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings.
To set the colors of VS Code UI elements such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons, and more, use workbench.colorCustomizations .
You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.
To customize a specific theme only, use the following syntax:
If a customization applies to more than one themes, you can name multiple themes or use * as wildcard at the beginning and the end of the name:
Editor syntax highlighting
To tune the editor’s syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file:
A pre-configured set of syntax tokens (‘comments’, ‘strings’, . ) is available for the most common constructs. If you want more, you can do so by directly specifying TextMate theme color rules:
Note: Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go to the Color Theme guide for more information.
Again, to customize specific themes, you can do this in one of the following ways:
Editor semantic highlighting
Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service’s symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:
The «Tomorrow Night Blue» color theme without semantic highlighting:
The «Tomorrow Night Blue» color theme with semantic highlighting:
Notice the color differences based on language service symbol understanding:
- line 10: languageModes is colored as a parameter.
- line 11: Range and Position are colored as classes and document as a parameter.
- line 13: getFoldingRanges is colored as a function.
The settings editor.semanticHighlighting.enabled serves as the main control on whether semantic highlighting is applied. It can have values true , false , and configuredByTheme .
- true and false turn semantic highlighting on or off for all themes.
- configuredByTheme is the default and lets each theme control whether semantic highlighting is enabled or not. All the themes that ship with VS Code (for example, the «Dark+» default) have semantic highlighting enabled by default.
Users can override the theme setting by:
When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic token will be rendered with that color, without the need for any additional coloring rules.
Additional styling rules can be configured by the user in editor.semanticTokenColorCustomizations» :
To see what semantic tokens are computed and how they are styled, users can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.
If semantic tokens are available for the language at the given position and enabled by theme, the inspect tool shows a section semantic token type . The section shows the semantic token information (type and any number of modifiers) as well as the styling rules that apply.
More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.
Creating your own Color Theme
Creating and publishing a theme extension is easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.
VS Code’s Yeoman extension generator will help you generate the rest of the extension.
See the Create a new Color Theme topic in our Extension API section to learn more.
Remove default Color Themes
If you’d like to remove some of the default themes shipped with VS Code from the Color Theme picker, you can disable them from the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ). Open the . More Actions dropdown menu from the top of the Extensions view, select Show Built-in Extensions, and you’ll see a THEMES section listing the default themes.
You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.
File Icon Themes
File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.
Selecting the File Icon Theme
- In VS Code, open the File Icon Theme picker with File >Preferences >File Icon Theme. (Code >Preferences >File Icon Theme on macOS).
- You can also use the Preferences: File Icon Theme command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).
- Use the cursor keys to preview the icons of the theme.
- Select the theme you want and hit Enter .
By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once a file icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.
VS code ships with two file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file icon theme picker and you’ll see a query for file icon themes (tag:icon-theme) in the Extensions view.
You can also browse the VS Code Marketplace site directly to find available themes.
The active File Icon theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).
Creating your own File Icon Theme
You can create your own File Icon Theme from icons (preferably SVG), see the File Icon Theme topic in our Extension API section for details.
Next steps
Themes are just one way to customize VS Code. If you’d like to learn more about VS Code customization and extensibility, try these topics:
Как сменить цвет дизайна visual studio
Когда люди пишут инструкции — они такие скучные и непонятные, в которых еще нужно и разбираться! У нас все просто!
Открываем программу VS Code.
Идем — файл — параметры — цветовая тема:
В новом окне выбираем тему. список тем слева, просто кликайте оп названию темы — она установится автоматически. справа строка прокрутки.
Если тем не хватило, то можно перейти по ссылке внизу ссылки.
Горячие клавиши сменить тему на «Visual Studio Code«?
Не буду повторять тот путь, что уже выше проделывали.
Быстрая смена тем на «Visual Studio Code«
Зажали клавишу ctrl(не отпускаем. ) — далее K и далее T
Как поставить светлую тему «Visual Studio Code«?
Как мы уже выше выяснили, быстрый доступ к темам. нажимаем:
Как поставить темную тему «Visual Studio Code«?
И далее выбираем темную тему
Загрузить сторонние темы «Visual Studio Code«?
Если вам вдруг. не хватило перечисленных тем, то можно загрузить сторонние темы.
ctrl + K ctrl + T
Установить дополнительные цветовые темы.
Загрузить сторонние темы ‘Visual Studio Code‘?
Слева открываем строку поиска нажав по кнопке «extensions»(ctrl + shift + X)
В строке вводим:
Выбор сторонне темы «Visual Studio Code«?
И в двух случаях попадаем в одно и то же место:
Я пытался я прокрутить до самого низа. когда кончится список сторонних тем . но у меня не получилось — может у вас получится!?
Похожие публикации:
- Google partner setup что это
- Yellow pages xiaomi что это
- Где хранится музыка на андроиде
- Как в автокад 2016 построить координатную сетку
Цвет html текста в редакторе VSCode
Для изменения стиля оформления независимо от выбранной темы добавьте в файл settings.json :
"editor.tokenColorCustomizations": < "textMateRules": [ < "scope": "text.html", "settings": < "foreground": "#ff0000" >> ] >
Хотя правильнее будет переопределять цвета указывая конкретную тему, например Default Light+ :
"editor.tokenColorCustomizations": < "[Default Light+]": < "textMateRules": [ < "scope": "text.html", "settings": < "foreground": "#ff0000" >> ] > >
Что-бы узнать название выделяемого элемента (или scope ) нажимаем в VS Code комбинацию Ctrl + Shift + P (или просто F1 ), вводим команду Developer: Inspect TM Scopes и выбираем мышкой нужный элемент, после чего откроется окошко с подробной информацией об элементе, и внизу будут перечислены все примененные к элементу имена scop’ов.