Customizing Vscode Code Color: A Step-by-Step Guide

2023-12-06 06:59:49
Introduction: Do you think the default code color of vscode is ugly? In this article, I will teach you how to change the code color. For those who have not installed vscode, you can read this article: Vscode — Preliminary article. Let’s change the color first. Select 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) and then press “ctrl + shift + P”. You should see a dialog box with The search bar window appears, enter “inspect” in the search bar, as shown below: Then click “Inspect Editor Tokens…” in the above picture, and then a window will appear first, then use the left mouse button to click on your program. Anywhere in the code, the current foreground color of that code and its type name will be displayed in the window, as shown by the red arrow in the picture below. The code in the picture above is python, and then my left mouse button clicks ” print” part, you can see that the current color of my print is “DCDCAA” (hexadecimal color code), and its type name is called “entity.name.function”. You should remember this name because You need to change the code color through this name later, then press “ctrl + shift + P” again, search for “settings” in the search bar, and then select “Open User Settings (JSON)”, after clicking as shown below, You will find that a file called “settings.json” is opened, and then enter the following in the file: (If your settings.json already has the following, you do not 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”: “Program 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 a summary of the results after the change. First use “Inspect Editor tokens” 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????????????
1701846367
#Change #code #color #Vscode