Let's look at the effects of two of them:
Generally speaking, we don't need to recreate a color theme. First of all, we need to choose a favorite color theme (or find a color theme that is most similar to our own ideas), and then make some adjustments on this basis. In addition, if you want to publish the color theme to Microsoft's Visual Studio code extension store, you need to register a Microsoft developer account and publish it through the vsce tool, which will be explained in detail below.
Color theme in tmTheme format
Many years ago, TextMate was one of the most popular code editors. The file suffix of its color theme is. Tmttheme, referred to as tmTheme format for short in this paper. The color theme of Visual Studio Studio adopts the standard TextMate theme format. We can refer to this article to write a Textmate grammar: some lessons can be roughly understood as: after the editor parses the code, each element will be assigned a scope. This scope indicates whether this element is a keyword, a constant or a punctuation mark, and the text style of the corresponding scope is defined through a file in tmTheme format.
According to this article, we can know that the following is a list of common ranges:
comment
constant
Constant. Character. Escape
Constant. Language
Constant. Numbers
Declaration. Section Entity. Name. Section
Statements. Labels
Decorative folding
Entity. Name. Function
Entity. Name. Label
Entity. Name. Type
Entity. Other. Attribute-Name
entity.other.inherited-class
invalid
Invalid. deprecated. trailing- blank
key word
Keywords. Control. Import
Keyword. operator.js
Marks. titles
Tag. list
Price increase. quotation
Meta embedded
Meta preprocessor
Meta.section Entity. Name. Section
Meta. tag
Storage; stock
Storage. Type. Method
line
String source
String. no quotation marks
Support. class
Support. constant
Support. Function
Support type
Support variable
Text source
changeable
Variables. Language
Variables. Others
Variables. parameters
The following is a code snippet of a tmTheme format file:
& ltdict & gt
& ltkey & gt name & lt/key >
& lt/string & gt； keywords & lt/string >
& ltkey & gt range & lt/key >
& lt string & gtkeyword.control, keyword.other, variable.language, storage.type, storage.modifier, keyword.function & lt/string & gt；;
& ltkey & gt setting & lt/key >
& ltdict & gt
& ltkey & gt prospect & lt/key >
& lt string & gt # 0808d1< /string & gt；
& lt/dict & gt；
& lt/dict & gt；
& ltdict & gt
& ltkey & gt name & lt/key >
& lt/string & gt； invalid & lt/string >
& ltkey & gt range & lt/key >
& lt/string & gt； invalid & lt/string >
& ltkey & gt setting & lt/key >
& ltdict & gt
& ltkey & gt prospect & lt/key >
& lt string & gt # CD 3131< /string & gt；
& lt/dict & gt；
& lt/dict & gt；
As can be seen from the above code, in fact, this file in tmTheme format looks quite simple, but it is difficult for beginners to know how to write scope, which will be explained step by step below.
Create a color theme project
According to the official document, we first execute the following command to install the Yeoman code generation tool to create a default color theme project:
$ npm installation -g yo generator-code
After the installation is completed, enter ~/. Vscode/extensions directory, and execute the following command to start the generator:
$ yo code
Note: ~/. Directory represented by vscode/extensions. Vscode/extensions in the user root directory. The reason for creating a new project here is that it can be used locally without publishing to the extension library, which is convenient for debugging.
Select New Color Theme to create a color theme project:
_ - _ ╭——————————————————————————╮
||| │ Welcome to Vision │
|-(o)-| │ Studio code extension │
` - ? │ generator │
( _? u ` _)╰——————————————————————————╯
/_ _ _ A _ _ \/
| ~ |
__'.___.'__
? ` | ? hello
What kind of extension do you want to create?
New extension (TypeScript)
New extension (JavaScript)
New color theme
New language support
New code fragment
Then I need to fill in some questions interactively on the command line. The following is what I filled in during the execution:
What kind of extension do you want to create? New color theme
URL (/app/？ 23C4FA & lt/string & gt；
& lt/dict & gt；
& lt/dict & gt；
The first item, name, represents the name we gave to the rule; Scope is the applicable scope. For example, if multiple items can be separated by commas, then the range value of a user-defined constant is a constant. Personality, unchanged. Others; Settings are specific style information, such as color values.
As can be seen from the source code, the only supported styles are foreground and fontStyle, while background can be seen from the comments that Visual Studio code is temporarily not supported for some reason.
If the scope value is template.expression, it can be considered as the CSS class selector token.template.expression in the developer's tool demonstration video mentioned above, and the variable name of the template string is presented in HTML.
It should be noted that if the definition of scope is not written in detail, other elements may be mismatched, resulting in good parts and bad parts, and it is not easy to be perfect.
Publish to extended storage
To publish the extension to the extended storage so that more people can use it, we need to use the vsce command-line tool and refer to the document vsce-Publishing Tool Reference. The following are the basic steps:
Install the vsce command line tool. Execute the command npm install -g vsce.
Register a Visual Studio Team Services account and get an access token.
Create a publisher. Execute the command vsce create-publisher.
Log in to Publisher. Execute the command vsce login.
Loosen the extension rod. Execute the command vsce publish.
Please refer to the corresponding official documents for detailed operation steps.
This article does not elaborate on how to create a Visual Studio code color theme, but only mentions a few points that I think are key in the tossing process and difficult to find in the document. It is the nature of programmers to love tossing. I hope this article can make you take fewer detours and play your favorite Visual Studio code.