Add base hello world extension example

This commit is contained in:
James Skemp 2018-10-25 10:36:01 -05:00
parent b926123798
commit b315dd7101
18 changed files with 2624 additions and 1 deletions

View File

@ -1,2 +1,4 @@
# vs-code-extension-tutorials
Working through the VS Code extension tutorials
Working through the VS Code extension tutorials.
See and

hello-world/.gitattributes vendored Normal file
View File

@ -0,0 +1,3 @@
# Set default behavior to automatically normalize line endings.
* text=auto

hello-world/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@

hello-world/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,7 @@
// See
// for the documentation about the extensions.json format
"recommendations": [

hello-world/.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,36 @@
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:
"version": "0.2.0",
"configurations": [
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"outFiles": [
"preLaunchTask": "npm: watch"
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"outFiles": [
"preLaunchTask": "npm: watch"

hello-world/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,11 @@
// Place your settings in this file to overwrite default and user settings.
"files.exclude": {
"out": false // set this to true to hide the "out" folder with the compiled JS files
"search.exclude": {
"out": true // set this to false to include "out" folder in search results
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
"typescript.tsc.autoDetect": "off"

hello-world/.vscode/tasks.json vendored Normal file
View File

@ -0,0 +1,20 @@
// See
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
"group": {
"kind": "build",
"isDefault": true

View File

@ -0,0 +1,9 @@

hello-world/ Normal file
View File

@ -0,0 +1,7 @@
# Change Log
All notable changes to the "hello-world" extension will be documented in this file.
Check [Keep a Changelog]( for recommendations on how to structure this file.
## [Unreleased]
- Initial release

hello-world/ Normal file
View File

@ -0,0 +1,65 @@
# hello-world README
This is the README for your extension "hello-world". After writing up a brief description, we recommend including the following sections.
## Features
Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
For example if there is an image subfolder under your extension project workspace:
\!\[feature X\]\(images/feature-x.png\)
> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
## Requirements
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
## Extension Settings
Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
For example:
This extension contributes the following settings:
* `myExtension.enable`: enable/disable this extension
* `myExtension.thing`: set to `blah` to do something
## Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
## Release Notes
Users appreciate release notes as you update your extension.
### 1.0.0
Initial release of ...
### 1.0.1
Fixed issue #.
### 1.1.0
Added features X, Y, and Z.
## Working with Markdown
**Note:** You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
* Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
* Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
### For more information
* [Visual Studio Code's Markdown Support](
* [Markdown Syntax Reference](

hello-world/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

hello-world/package.json Normal file
View File

@ -0,0 +1,39 @@
"name": "hello-world",
"displayName": "Hello World",
"description": "",
"version": "0.0.1",
"publisher": "test",
"engines": {
"vscode": "^1.28.0"
"categories": [
"activationEvents": [
"main": "./out/extension",
"contributes": {
"commands": [
"command": "extension.sayHello",
"title": "Hello World"
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "npm run compile && node ./node_modules/vscode/bin/test"
"devDependencies": {
"typescript": "^2.6.1",
"vscode": "^1.1.21",
"tslint": "^5.8.0",
"@types/node": "^8.10.25",
"@types/mocha": "^2.2.42"

View File

@ -0,0 +1,29 @@
'use strict';
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "hello-world" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World!');
// this method is called when your extension is deactivated
export function deactivate() {

View File

@ -0,0 +1,22 @@
// Note: This example test is leveraging the Mocha test framework.
// Please refer to their documentation on for help.
// The module 'assert' provides assertion methods from node
import * as assert from 'assert';
// You can import and use all API from the 'vscode' module
// as well as import your extension to test it
// import * as vscode from 'vscode';
// import * as myExtension from '../extension';
// Defines a Mocha test suite to group tests of similar kind together
suite("Extension Tests", function () {
// Defines a Mocha unit test
test("Something 1", function() {
assert.equal(-1, [1, 2, 3].indexOf(5));
assert.equal(-1, [1, 2, 3].indexOf(0));

View File

@ -0,0 +1,22 @@
// This file is providing the test runner to use when running extension tests.
// By default the test runner in use is Mocha based.
// You can provide your own test runner if you want to override it by exporting
// a function run(testRoot: string, clb: (error:Error) => void) that the extension
// host can call to run the tests. The test runner is expected to use console.log
// to report the results back to the caller. When the tests are finished, return
// a possible error to the callback or null if none.
import * as testRunner from 'vscode/lib/testrunner';
// You can directly control Mocha options by uncommenting the following lines
// See for more info
ui: 'tdd', // the TDD UI is being used in extension.test.ts (suite, test, etc.)
useColors: true // colored output from test results
module.exports = testRunner;

hello-world/tsconfig.json Normal file
View File

@ -0,0 +1,23 @@
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "out",
"lib": [
"sourceMap": true,
"rootDir": "src",
/* Strict Type-Checking Option */
"strict": true, /* enable all strict type-checking options */
/* Additional Checks */
"noUnusedLocals": true /* Report errors on unused locals. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
"exclude": [

hello-world/tslint.json Normal file
View File

@ -0,0 +1,15 @@
"rules": {
"no-string-throw": true,
"no-unused-expression": true,
"no-duplicate-variable": true,
"curly": true,
"class-name": true,
"semicolon": [
"triple-equals": true
"defaultSeverity": "warning"

View File

@ -0,0 +1,33 @@
# Welcome to your VS Code Extension
## What's in the folder
* This folder contains all of the files necessary for your extension.
* `package.json` - this is the manifest file in which you declare your extension and command.
The sample plugin registers a command and defines its title and command name. With this information
VS Code can show the command in the command palette. It doesnt yet need to load the plugin.
* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
The file exports one function, `activate`, which is called the very first time your extension is
activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
We pass the function containing the implementation of the command as the second parameter to
## Get up and running straight away
* Press `F5` to open a new window with your extension loaded.
* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
* Find output from your extension in the debug console.
## Make changes
* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
## Explore the API
* You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`.
## Run tests
* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests`.
* Press `F5` to run the tests in a new window with your extension loaded.
* See the output of the test result in the debug console.
* Make changes to `test/extension.test.ts` or create new test files inside the `test` folder.
* By convention, the test runner will only consider files matching the name pattern `**.test.ts`.
* You can create folders inside the `test` folder to structure your tests any way you want.