Home » today » Technology » Change the code color of Vscode

Change the code color of Vscode

Introduction

Do you think the default code color of vscode is ugly?

In this article, I will teach you how to change the color of the program code😎

For those who have not installed vscode yet, you can read this article:

Vscode — Preliminary exploration

change color

Everyone first selects a working directory. For those who don’t know how to do it, you can refer to this article first:

Vscode + Python — Development environment setup (Windows)

Then press “ctrl + shift + P”, you should see a window with a search bar appear, enter “inspect” in the search bar, as shown below:

Then click “Inspect Editor Tokens…” in the picture above, and a window will appear first. Then use the left mouse button to click anywhere in your code, and the current foreground of that code will be displayed in the window. Color and its type name, as shown in the red arrow below

The program code in the picture above is python, and then my left mouse button is clicked on the “print” part. You can see that the current color of my print is “DCDCAA” (hexadecimal color code), and then Its type name is “entity.name.function”. You should remember this name because you will need to use this name to change the code color later.

Then press “ctrl + shift + P” again, search for “settings” in the search bar, and then select “Open User Settings (JSON)”, as shown below

After clicking, you will find a file called “settings.json” opened, then enter the following in the file:

(If you already have the following in your settings.json, you don’t need to enter it)

“editor.tokenColorCustomizations”:
“textMateRules”: [
]
,

As shown in the picture:

Then enter the type name of the code you just found and the color you want in “textMateRules”. The format and picture are as follows:

“scope”: “code type name”,
“settings”:
“foreground”: “#color”,

,

In the picture above, I changed all the code belonging to the “entity.name.function” type to green. The picture below is the result after the change.

Summary of steps

First use “Inspect Editor tokens” to check the type name of the code you want to change, and then go to “settings.json” to modify it.

Conclusion

Everyone should have learned it😄😄😄

Welcome to sponsor👍👍👍

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.