diff --git a/build/filters.js b/build/filters.js index c2a0a52bdb9cd..cfd06d9c90f9c 100644 --- a/build/filters.js +++ b/build/filters.js @@ -85,6 +85,7 @@ module.exports.indentationFilter = [ '!test/monaco/out/**', '!test/smoke/out/**', '!extensions/typescript-language-features/test-workspace/**', + '!extensions/typescript-language-features/resources/walkthroughs/**', '!extensions/markdown-math/notebook-out/**', '!extensions/vscode-api-tests/testWorkspace/**', '!extensions/vscode-api-tests/testWorkspace2/**', diff --git a/extensions/typescript-language-features/package.json b/extensions/typescript-language-features/package.json index 2a7fd5151a1a2..7ac9d8da63bf7 100644 --- a/extensions/typescript-language-features/package.json +++ b/extensions/typescript-language-features/package.json @@ -67,7 +67,8 @@ "onCommand:typescript.fileReferences", "onCommand:typescript.goToSourceDefinition", "onTaskType:typescript", - "onLanguage:jsonc" + "onLanguage:jsonc", + "onWalkthrough:jsWelcome" ], "main": "./out/extension", "browser": "./dist/browser/extension", @@ -1507,6 +1508,66 @@ } ] } + ], + "walkthroughs": [ + { + "id": "jsWelcome", + "title": "%walkthroughs.jsWelcome.title%", + "description": "%walkthroughs.jsWelcome.description%", + "when": "isWindows && workspacePlatform == windows || isMac && workspacePlatform == mac || isLinux && workspacePlatform == linux", + "steps": [ + { + "id": "walkthroughs.jsWelcome.createHtmlWithScriptTag", + "title": "%walkthroughs.jsWelcome.createHtmlWithScriptTag.title%", + "description": "%walkthroughs.jsWelcome.createHtmlWithScriptTag.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + } + }, + { + "id": "walkthroughs.jsWelcome.debugHtmlFile", + "title": "%walkthroughs.jsWelcome.debugHtmlFile.title%", + "description": "%walkthroughs.jsWelcome.debugHtmlFile.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + } + }, + { + "id": "walkthroughs.jsWelcome.downloadNode.forMacOrWindows", + "title": "%walkthroughs.jsWelcome.downloadNode.forMacOrWindows.title%", + "description": "%walkthroughs.jsWelcome.downloadNode.forMacOrWindows.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + }, + "when": "isWindows || isMac" + }, + { + "id": "walkthroughs.jsWelcome.downloadNode.forLinux", + "title": "%walkthroughs.jsWelcome.downloadNode.forLinux.title%", + "description": "%walkthroughs.jsWelcome.downloadNode.forLinux.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + }, + "when": "isLinux" + }, + { + "id": "walkthroughs.jsWelcome.makeJsFile", + "title": "%walkthroughs.jsWelcome.makeJsFile.title%", + "description": "%walkthroughs.jsWelcome.makeJsFile.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + } + }, + { + "id": "walkthroughs.jsWelcome.debugJsFile", + "title": "%walkthroughs.jsWelcome.debugJsFile.title%", + "description": "%walkthroughs.jsWelcome.debugJsFile.description%", + "media": { + "markdown": "resources/walkthroughs/TODO.md" + } + } + ] + } ] }, "repository": { diff --git a/extensions/typescript-language-features/package.nls.json b/extensions/typescript-language-features/package.nls.json index 513bcfbaaa105..75f85979e1989 100644 --- a/extensions/typescript-language-features/package.nls.json +++ b/extensions/typescript-language-features/package.nls.json @@ -190,5 +190,26 @@ "typescript.findAllFileReferences": "Find File References", "typescript.goToSourceDefinition": "Go to Source Definition", "configuration.suggest.classMemberSnippets.enabled": "Enable/disable snippet completions for class members. Requires using TypeScript 4.5+ in the workspace", - "configuration.suggest.objectLiteralMethodSnippets.enabled": "Enable/disable snippet completions for methods in object literals. Requires using TypeScript 4.7+ in the workspace" + "configuration.suggest.objectLiteralMethodSnippets.enabled": "Enable/disable snippet completions for methods in object literals. Requires using TypeScript 4.7+ in the workspace", + + "walkthroughs.jsWelcome.title": "Get started with JavaScript", + "walkthroughs.jsWelcome.description": "Make the most of Visual Studio Code's first-class JavaScript experience.", + + "walkthroughs.jsWelcome.createHtmlWithScriptTag.title": "Create a Web Page", + "walkthroughs.jsWelcome.createHtmlWithScriptTag.description": "The easiest way to start writing JavaScript is inside an HTML file. To do that, we'll need to make an HTML file with a ` + + diff --git a/extensions/typescript-language-features/src/commands/index.ts b/extensions/typescript-language-features/src/commands/index.ts index 4b6f8d36ac3af..b8873cb878fc0 100644 --- a/extensions/typescript-language-features/src/commands/index.ts +++ b/extensions/typescript-language-features/src/commands/index.ts @@ -10,6 +10,7 @@ import { PluginManager } from '../utils/plugins'; import { CommandManager } from './commandManager'; import { ConfigurePluginCommand } from './configurePlugin'; import { JavaScriptGoToProjectConfigCommand, TypeScriptGoToProjectConfigCommand } from './goToProjectConfiguration'; +import { CreateHtmlFileWithScriptTagCommand, DebugHtmlFileCommand, CreateNewJSFileCommand, DebugJsFileCommand, JsWalkthroughState } from './jsWalkthrough'; import { LearnMoreAboutRefactoringsCommand } from './learnMoreAboutRefactorings'; import { OpenTsServerLogCommand } from './openTsServerLog'; import { ReloadJavaScriptProjectsCommand, ReloadTypeScriptProjectsCommand } from './reloadProject'; @@ -22,6 +23,7 @@ export function registerBaseCommands( lazyClientHost: Lazy, pluginManager: PluginManager, activeJsTsEditorTracker: ActiveJsTsEditorTracker, + jsWalkthroughState: JsWalkthroughState ): void { commandManager.register(new ReloadTypeScriptProjectsCommand(lazyClientHost)); commandManager.register(new ReloadJavaScriptProjectsCommand(lazyClientHost)); @@ -33,4 +35,8 @@ export function registerBaseCommands( commandManager.register(new ConfigurePluginCommand(pluginManager)); commandManager.register(new LearnMoreAboutRefactoringsCommand()); commandManager.register(new TSServerRequestCommand(lazyClientHost)); + commandManager.register(new CreateHtmlFileWithScriptTagCommand(jsWalkthroughState)); + commandManager.register(new DebugHtmlFileCommand(jsWalkthroughState)); + commandManager.register(new CreateNewJSFileCommand(jsWalkthroughState)); + commandManager.register(new DebugJsFileCommand(jsWalkthroughState)); } diff --git a/extensions/typescript-language-features/src/commands/jsWalkthrough.ts b/extensions/typescript-language-features/src/commands/jsWalkthrough.ts new file mode 100644 index 0000000000000..1f0db4935d855 --- /dev/null +++ b/extensions/typescript-language-features/src/commands/jsWalkthrough.ts @@ -0,0 +1,174 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import * as vscode from 'vscode'; + +import { readFile } from 'fs/promises'; +import * as path from 'path'; +import { Disposable } from '../utils/dispose'; + +export class JsWalkthroughState extends Disposable { + exampleHtmlDocument: vscode.TextDocument | undefined = undefined; + exampleJsDocument: vscode.TextDocument | undefined = undefined; + + override dispose() { + this.exampleHtmlDocument = undefined; + this.exampleJsDocument = undefined; + } +} + +export class CreateHtmlFileWithScriptTagCommand { + public static readonly id = 'javascript-walkthrough.commands.createHtmlFileWithScriptTag'; + public readonly id = CreateHtmlFileWithScriptTagCommand.id; + + constructor(private walkthroughState: JsWalkthroughState) { } + + public execute() { + createHtmlFileWithScriptTag(this.walkthroughState); + } +} + +export class DebugHtmlFileCommand { + public static readonly id = 'javascript-walkthrough.commands.debugHtmlFile'; + public readonly id = DebugHtmlFileCommand.id; + + constructor(private walkthroughState: JsWalkthroughState) { } + + public execute() { + debugHtmlFile(this.walkthroughState); + } +} + +export class CreateNewJSFileCommand { + public static readonly id = 'javascript-walkthrough.commands.createJsFile'; + public readonly id = CreateNewJSFileCommand.id; + + constructor(private walkthroughState: JsWalkthroughState) { } + + public execute() { + createNewJSFile(this.walkthroughState); + } +} + +export class DebugJsFileCommand { + public static readonly id = 'javascript-walkthrough.commands.debugJsFile'; + public readonly id = DebugJsFileCommand.id; + + constructor(private walkthroughState: JsWalkthroughState) { } + + public execute() { + debugJsFile(this.walkthroughState); + } +} + +async function createHtmlFileWithScriptTag(walkthroughState: JsWalkthroughState) { + const htmlPath = path.resolve(__dirname, '../../resources/walkthroughs/htmlFileWithScriptTag.html'); + const content = await readFile(htmlPath, 'utf8'); + const newFile = await vscode.workspace.openTextDocument({ + language: 'html', + content, + }); + walkthroughState.exampleHtmlDocument = newFile; + //vscode.window.showInformationMessage(process.env.USERNAME!); + const scriptStart = newFile.positionAt(newFile.getText().match(/^