You've found the GitHub repository that houses the source for the VS Code docs at https://code.visualstudio.com/docs.
Thank you for your interest in VS Code documentation!
- Contributing
- Documentation intent
- Repository organization
- Branches
- Authoring Tools
- How to use Markdown to format your topic
- Topic Metadata
- Formatting
Note: Before submitting a pull request, especially for rendering or link issues, please review the content on the official VS Code website, code.visualstudio.com. The element in question may render correctly after processing by the website build.
To contribute to VS Code documentation, you need to fork this repository and submit a pull request for the Markdown and/or image changes that you're proposing.
The goal of the VS Code documentation is to educate users on VS Code features and how VS Code can be used to enhance their development experience with different programming languages and runtimes.
The documentation is not intended to provide:
- An introduction to coding or software development
- Tutorials on technologies independent from VS Code
- Promotion of third-party tools, plug-ins or services
- Excessive detail or advanced walkthroughs
The documentation should target developers learning to use VS Code or searching for quick answers to commonly asked questions. Other forums such as blog posts can provide more detailed content elaborating on specific scenarios.
The content in this repository follows the organization of documentation at https://code.visualstudio.com/docs.
This repository contains the following folders:
- \setup
- \introvideos
- \getstarted
- \editor
- \languages
- \extensions
- \extensionAPI
- \other
- \supporting
Within these folders you'll find the Markdown files used for the content. Each of these folders also contains an \images folder that references the images (such as screenshots) used in the topics.
We recommend that you create local working branches that target a specific scope of change (and then submit a pull request when your changes are ready). Each branch should be limited to a single concept/topic, both to streamline work flow, and to reduce the possibility of merge conflicts. The following efforts are of the appropriate scope for a new branch:
- A new topic (and associated images).
- Spelling and grammar edits on a topic.
- Applying a single formatting change across a large set of topics.
Visual Studio Code is a great editor for Markdown!
In fact, VS Code and its core documentation are written using VS Code.
The topics in this repository use Markdown. Here is a good overview of Markdown basics.
Topic metadata enables certain functionalities for the topics such as table of contents order, topic descriptions, and online search optimization as well as aiding Microsoft in evaluating the effectiveness of the content.
- Order - This is the order that is used in the left rail TOC, the page is left out of the TOC if this is blank
- Area - General area within VS Code
- TOCTitle - The title used in the left rail Table of Contents for this page
- PageTitle - The title used in the HTML title for the page and in search results
- ContentId - A GUID which uniquely identifies the topic to DevDiv doc reporting.
- DateApproved - This is set when the page is actually published on the VS Code portal. You can ignore it.
- MetaDescription - The meta description for this page which helps for search. Use sentence structure limited to 300 characters.
- MetaSocialImage - Optional. Used for og:image in page header for sharing on social media. Should be 1024 x 512 .png.
- MetaTags - Optional. Further tags for this page again for search.
Use the full product name "Visual Studio Code" in the topic MetaDescription and the first use in a topic. You can use the shortened "VS Code" after that throughout the rest of the content. Do not use "VSCode" (no space) or "Code".
For Writer:
- MetaDescription - The meta description for this page which helps for search
For Doc Maintainer:
- DateApproved - This is set when the page is actually published on the VS Code portal.
H2 subheadings ##
end up in the right hand jump list for the document (this happens in our compile script). It's a good idea to include h2 subheadings to help users get an overview of the doc and quickly navigate to the major topics.
Use bold for VS Code commands and UI elements.
**Extensions: Install Extension**
**Debug Console**
Limit the use of bold for emphasis unless it is crucial to get the user's attention. Avoid the use of italics for emphasis since italics doesn't render well on the code.visualstudio.com site.
Use inline code formatting (backticks) for settings, filename and JSON attributes.
`files.exclude`
`tasks.json`
`preLaunchTask`
Use '>' to show menu sequence.
**File** > **Preferences** > **Settings**
**View** > **Command Palette**
For links within our own documentation, use a site relative link like /docs/editor/codebasics.md
.
For example:
[Why VS Code](/docs/editor/whyvscode.md)
- links to the Why Visual Studio Code page
Correction: For this repo to ease content development you should add the .md suffix. We will parse these out for the website deployment.
To provide links to h2 subheadings (Markdown ##), the format is [Link Text](page.md#subheading-title)
.
Note the subheading title is lowercase and subheading title words are separated by '-' hyphens.
For example:
[Keyboard Shortcuts](/docs/editor/codebasics.md#keyboard-shortcuts)
- links to https://code.visualstudio.com/docs/editor/codebasics#_keyboard-shortcuts.
Images are important to bring the product to life - even if people can't try the product, these really help them to see what they are missing.
For images you're adding to the repo, store them in the images
subfolder of the TOC section, for example: editor\images\debugging
.
When you link to an image, the path and filename are case-sensitive. The convention is for image filenames to be all lowercase.
For example:
![Debug Breakpoints](images/debugging/breakpoints.png)
The VS Code portal is able to show the correct key bindings depending on the reader's operating system (macOS, Windows or Linux).
To enable this for keyboard shortcuts, use the format kb(workbench.action.files.openFile)
where the command name is included in parentheses.
For a list of key bindings and the relevant
Command Ids
review the key bindings document.
If you are listing out multiple key bindings, you can use a table.
Shortcut Key Strokes Cut kb(editor.action.clipboardCutAction)
Copy kb(editor.action.clipboardCopyAction)
Paste kb(editor.action.clipboardPasteAction)
For source code we use the fenced code block notation ```
.
Note: You can add an optional language identifier to enable syntax highlighting in your fenced code block. E.g.
```json
or```javascript
. Read more →
Some JavaScript code...
function fancyAlert(arg) {
if (arg) {
$.facebox({ div: foo });
}
}