Skip to content

Commit 4c43c04

Browse files
author
Greg Van Liew
committed
Edits
1 parent 21ff762 commit 4c43c04

File tree

3 files changed

+22
-11
lines changed

3 files changed

+22
-11
lines changed

api/get-started/extension-anatomy.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ Let's take a closer look of `Hello Code` sample's source code and see how these
3838

3939
You can read more about the configuration files:
4040

41-
- `launch.json` used to configure VS Code [Debugging](/docs/editor/debugging.md)
42-
- `tasks.json` for defining VS Code [Tasks](/docs/editor/tasks.md)
41+
- `launch.json` used to configure VS Code [Debugging](/docs/editor/debugging)
42+
- `tasks.json` for defining VS Code [Tasks](/docs/editor/tasks)
4343
- `tsconfig.json` consult the TypeScript [Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
4444

4545
However, let's focus on `package.json` and `extensions.ts`, which are essential to understanding the `Hello Code` extension.

api/get-started/wrapping-up.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ In the [Your First Extension](/api/get-started/your-first-extension) topic, you
99

1010
This section includes topics that help you develop high-quality VS Code extension. For example, you can learn
1111

12-
- How to add integration tests for your extension
12+
- How to add [integration tests](/api/working-with-extensions/testing-extensions) for your extension
1313
- How to publish your extension to [VS Code Marketplace](https://marketplace.visualstudio.com/)
14-
- How to set up Continuous Integration for your extension
14+
- How to set up [Continuous Integration](/api/working-with-extensions/continous-integration) (CI) for your extension
1515

1616
## Extension Capabilities
1717

1818
In this section, we split the [VS Code API](/api/references/vscode-api) and [Contribution Points](/api/references/contribution-points) into a few categories, each with short descriptions as to what your extension could achieve.
1919

2020
## Samples & Guides
2121

22-
We have a great collection of Sample Extensions that you can adapt from, and some of them include detailed guide that explains the source code. You can find all Samples & Guides in the [Extension Guide Listing](/api/extension-guides/overview) or the [vscode-extension-samples](https://github.com/Microsoft/vscode-extension-samples) repository.
22+
We have a great collection of sample extensions that you can adapt from, and some of them include a detailed guide that explains the source code. You can find all Samples & Guides in the [Extension Guide Listing](/api/extension-guides/overview) or the [vscode-extension-samples](https://github.com/Microsoft/vscode-extension-samples) repository.

api/language-extensions/syntax-highlight-guide.md

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
---
33

44
# Syntax Highlighting
5+
56
Syntax highlighting determines the color and style of code displayed in the editor. It is responsible for colorizing keywords like `if` or `for` in JavaScript differently than strings and comments and variable names.
67

78
There are two components to syntax highlighting: breaking text into a list of tokens and scopes using a grammar, and then using a theme to map these scopes to specific colors and styles. This document only discusses the first part: breaking text into tokens and scopes that existing themes can colorize. For more information about customizing the styling of different scopes in the editor, see the [page on theming](/api/references/theme-color)
89

910
## TextMate grammars
11+
1012
VS Code uses [TextMate grammars][tm-grammars] to break text into a list of tokens. TextMate grammars are a structured collection of [ruby regular expressions](https://macromates.com/manual/en/regular_expressions) and are typically written as a plist or json. You can find a good introduction to TextMate grammars [here](http://www.apeth.com/nonblog/stories/TextMatebundle.html), and you can take a look at existing TextMate grammars to learn more about how they work.
1113

1214
### Tokens and scopes
15+
1316
Tokens are one or more characters that are part of the same program element. Example tokens include operators such as `+` and `*`, variable names such as `myVar`, or strings such as `"my string"`.
1417

1518
Each token is associated with a scope that defines the context of the token. A scope is a dot separated list of identifiers that specify the context of the current token. The `+` operation in JavaScript for example has the scope `keyword.operator.arithmetic.js`.
@@ -18,12 +21,13 @@ Themes map scopes to colors and styles to provide syntax highlighting. TextMate
1821

1922
Scopes nest so that each token is also associated with a list of parent scopes. The example below uses the [scope inspector](#scope-inspector) to show the scope hierarchy for the `+` operator in a simple JavaScript function. The most specific scope is listed at the top, with more general parent scopes listed below:
2023

21-
![](images/syntax-highlighting/scopes.png)
24+
![syntax highlighting scopes](images/syntax-highlighting/scopes.png)
2225

2326
Parent scope information is also used for theming. When a theme targets a scope, all tokens with that parent scope will be colorized unless the theme also provides a more specific colorization for their individual scopes.
2427

2528
### Contributing a basic grammar
26-
VS Code supports json TextMate grammars. These are contributed through the `grammars` [contribution point](api/references/contribution-points.md).
29+
30+
VS Code supports json TextMate grammars. These are contributed through the `grammars` [contribution point](api/references/contribution-points).
2731

2832
Each grammar contribution specifies: the identifier of the language the grammar applies to, the top level scope name for the tokens of the grammar, and the relative path to a grammar file. The example below shows a grammar contribution for a fictional `abc` language:
2933

@@ -127,6 +131,7 @@ a keyword.letter, source.abc
127131
Note that text that is not matched by one of the rules—such as the string `xyz`—is included in the current scope. The last paren at the end of the file is not part of the an `expression.group` since the `end` rule is not matched.
128132

129133
### Embedded languages
134+
130135
If your grammar include embedded languages within the parent language—such as css style blocks in html—you can use the `embeddedLanguages` contribution point to tell VS Code to treat the embedded language as distinct from the parent language. This ensures that bracket matching, commenting, and other basic language features work as expected in the embedded language.
131136

132137
The `embeddedLanguages` contribution point maps a scope in the embedded language to a top level language scope. In the example below, any tokens in the `meta.embedded.block.javascript` scope will be treated as javascript content:
@@ -150,6 +155,7 @@ The `embeddedLanguages` contribution point maps a scope in the embedded language
150155
Now if you try to comment code or trigger snippets inside an set of tokens marked `meta.embedded.block.javascript`, they will get the correct `//` JavaScript style comment and the correct JavaScript snippets.
151156

152157
## Developing a new grammar extension
158+
153159
To quickly create a new grammar extension, use [VS Code's Yeoman templates](/api/get-started/your-first-extension) to run `yo code` and select the `New Language` option:
154160

155161
![Selecting the 'new language' template in 'yo code'](images/syntax-highlighting/yo-new-language.png)
@@ -171,11 +177,13 @@ After answering all the questions, Yeoman will create a new extension with the s
171177
Remember, if you are contributing a grammar to a language that VS Code already knows about, be sure to delete the `languages` contribution point in the generated `package.json`.
172178

173179
### Converting an existing TextMate grammar
180+
174181
`yo code` can also help convert an existing TextMate grammar to a VS Code extension. Again, start by running `yo code` and selecting `Language extension`. When asked for an existing grammar file, give it the full path to either a `.tmLanguage` or `.json` TextMate grammar file:
175182

176183
![Converting an existing TextMate grammar](images/syntax-highlighting/yo-convert.png)
177184

178-
### Using yaml to write a grammar
185+
### Using YAML to write a grammar
186+
179187
As a grammar grows more complex, it can become difficult understand and maintain it as json. If you find yourself writing complex regular expressions or needing to add comments to explain aspects of the grammar, consider using yaml to define your grammar instead.
180188

181189
Yaml grammars have the exact same structure as a json based grammar but allow you to use yaml's more concise syntax, along with features such as multi-line strings and comments.
@@ -193,6 +201,7 @@ $ npx js-yaml syntaxes/abc.tmLanguage.yaml > syntaxes/abc.tmLanguage.json
193201
```
194202

195203
### Scope inspector
204+
196205
VS Code's built-in scope inspector tool helps debug grammars. It displays the scopes for the token at the current position in a file, along with metadata about which theme rules apply to that token.
197206

198207
Trigger the scope inspector from the command palette with the `Developer: Inspect TM Scopes` command or [create a keybinding](/docs/getstarted/keybindings) for it:
@@ -204,8 +213,7 @@ Trigger the scope inspector from the command palette with the `Developer: Inspec
204213
}
205214
```
206215

207-
208-
![](images/syntax-highlighting/scope-inspector.png)
216+
![scope inspector](images/syntax-highlighting/scope-inspector.png)
209217

210218
The scope inspector displays the following information:
211219

@@ -215,13 +223,15 @@ The scope inspector displays the following information:
215223
1. Complete scope list, with the most specific scope at the top.
216224

217225
## Injection grammars
226+
218227
Injection grammars let you extend an existing grammar. An injection grammar is a regular TextMate grammar that is injected into a specific scope within an existing grammar. Example applications of injection grammars:
219228

220229
- Highlighting keywords such as `TODO` in comments.
221230
- Add more specific scope information to an existing grammar.
222231
- Adding highlighting for a new language to markdown fenced code blocks.
223232

224233
### Creating a basic injection grammar
234+
225235
Injection grammars are contributed though the `package.json` just like regular grammars. However, instead of specifying a `language`, an injection grammar uses `injectTo` to specify a list of target language scopes to inject the grammar into.
226236

227237
For this example, we'll create a very simple injection grammar that highlights `TODO` as a keyword in javascript comments. To apply our injection grammar in javascript files, we use the `source.js` target language scope in `injectTo`:
@@ -265,6 +275,7 @@ The grammar itself is a standard TextMate grammar except for the top level `inje
265275
The `L:` in the injection selector means that the injection is added to the left of existing grammar rules. This basically means that our injected grammar's rules will be applied before any existing grammar rules.
266276

267277
### Embedded languages
278+
268279
Injection grammars can also contribute embedded languages to their parent grammar. Just like with a normal grammar, an injection grammars can use `embeddedLanguages` to map scopes from the embedded language to a top level language scope.
269280

270281
An extension that highlights sql queries in javascript strings for example may use `embeddedLanguages` to make sure all token inside the string marked `meta.embedded.inline.sql` are treated as sql for basic language features such as bracket matching and snippet selection.
@@ -289,6 +300,7 @@ An extension that highlights sql queries in javascript strings for example may u
289300
```
290301

291302
### Token types and embedded languages
303+
292304
There is one additional complication for injection languages embedded languages: by default, VS Code treats all tokens within a string as string contents and all tokens with a comment as token content. Since features such as bracket matching and auto closing pairs are disabled inside of strings and comments, if the embedded language appears inside a string or comment, these features will also be disabled in the embedded language.
293305

294306
To override this behavior, you can use a `meta.embedded.*` scope to reset VS Code's marking of tokens as string or comment content. It is a good idea to always wrap embedded language in a `meta.embedded.*` scope to make sure VS Code treats the embedded language properly.
@@ -317,5 +329,4 @@ If you can't add a `meta.embedded.*` scope to your grammar, you can alternativel
317329
}
318330
```
319331

320-
321332
[tm-grammars]: https://macromates.com/manual/en/language_grammars

0 commit comments

Comments
 (0)