Easy VS Code Text Color Customization!

Easily customize the colors of your in-code text tokens in VS Code. The following steps explain how to change the colors of the text within your code files while working in VS Code. It will change the syntax colors for different tokens to colors of your choice. Tokens are the different parts of the coding syntax such as variables, strings, operators, numbers, functions, types, etc. Tokens in coding languages are almost like the equivalent of different parts of grammar in literary languages. So, imagine nouns, verbs, adjectives, prepositions, adverbs, interjections, et.al., being color coded. For example, all nouns would be blue, and verbs would be red, adjectives purple, and so on. If you are new to coding and ever got an error when compiling your code that says, “unexpected token _ in expression” and wondered what the heck a token is – now you know. So, if you have that error, just look at the token stated, and make sure you have all your matching curly braces, parenthesis, quotations, and ending semicolons in place before rethinking your whole code. The steps in this tutorial will work for VS Code in browser, the VS Code desktop application, VS Code in GitHub Codespaces, and in VS Code in the GitHub Codespaces app. This how-to video is the simplest way to change the color of some of the most basic tokens. To change other more advanced tokens, please refer to tutorials on using TextMate scopes, semantic color customizations and workbench color customizations. The following link is a great place to get started learning more in depth about changing format and color anywhere you want in vs code. https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide Step 1. In VS Code, have a code file open so you can view your token color changes Step 2. In the far top left menu go to File -- Preferences -- Settings a. A tab will open that says Settings Step 3. At the top of the Settings window in the ‘Search settings’ search bar – type ‘Token Color Customizations’ a. This search will show three different results related to color customizations. The one we want is ‘Editor: Token Color Customizations’ Step 4. Under ‘Editor: Token Color Customizations’ select ‘Edit in settings.json’ a. Another tab will open that says ‘settings.json’ with some code related to settings Step 5. In your settings.json window, find the line of code that says ‘“editor.tokenColorCustomizations”’ and put your cursor between the two curly braces that follow this line of code. At this point it should be empty between the braces. Step 6. In double quotes, type the name of the token you would like to change the color of followed by a colon Step 7. Type a space after the colon and in double quotations, type the hexadecimal number for the color you would like to have the token changed to. This will be in a format such as #00fa08. A # followed by 6 letters and/or numbers. Make sure to include the #. a. There are many resources online to find the hexadecimal number for colors. For my example, I used https://color-hex.com/. There, I could look at the color swatches then just copy and paste the hexadecimal of the color I wanted. Step 8. If you want to change more than one token color, put a coma after the line of code you just finished typing, hit Enter, then do the same steps you did for the token above. Just change the token name in the first quotations to a different token type you would like to change, with a different hexadecimal number in the second quotation for the new color. Step 9. Save the settings.json file with Ctrl+s or File -- Save. Switch to the tab with your code file you opened in the first step to view the color changes you made. I recommend viewing the code file after each token color change to make sure everything is matching the color change that you wanted. Music Attribution: Terra Mystica by Alexander Nakarada | https://www.serpentsoundstudios.com Attribution 4.0 International (CC BY 4.0) https://creativecommons.org/licenses/by/4.0/ Keywords: syntax, highlighting, color, edit, color, customizations, vs code, token, tokens, easy, tutorial, change, text, languages, variables, comments, operators, keywords, catbyte, how-to, computer, coding, theme.

Видео Easy VS Code Text Color Customization! автора Вводный курс по JavaScript для начинающих