JavaScript and Node.js walkthrough (#157965)

* Initial contents for JavaScript walkthrough.

* Just suggest a `.js` file.

* Switch the walkthrough to be a Node.js walkthrough.

* Remove leftover file from HTML walkthrough.

* Add basic detection mechanism for node.

* Don't check for a Node install until the user runs debug.

* Add "learn more" link.

* Some assets.

* Remove "run" section.

* Add a "try debugging anyway" option just in case.

* Remove "view terminal" command in run & debug.

* More copy.

* Remove unused command.

* Update icon and themed walkthrough SVGs

* Default to not showing the extension.

* Replace icon

* Delete TODO.md

* jsWelcome -> nodejsWelcome

Co-authored-by: David Dossett <ddossett@microsoft.com>
Co-authored-by: Matt Bierner <matb@microsoft.com>

build/filters.js

@@ -82,6 +82,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/**',

extensions/typescript-language-features/package.json

@@ -68,7 +68,8 @@
     "onCommand:typescript.fileReferences",
     "onCommand:typescript.goToSourceDefinition",
     "onTaskType:typescript",
-    "onLanguage:jsonc"
+    "onLanguage:jsonc",
+    "onWalkthrough:nodejsWelcome"
   ],
   "main": "./out/extension",
   "browser": "./dist/browser/extension",
@@ -1524,6 +1525,58 @@
           }
         ]
       }
+    ],
+    "walkthroughs": [
+      {
+        "id": "nodejsWelcome",
+        "title": "%walkthroughs.nodejsWelcome.title%",
+        "description": "%walkthroughs.nodejsWelcome.description%",
+        "when": "false",
+        "steps": [
+          {
+            "id": "walkthroughs.nodejsWelcome.downloadNode.forMacOrWindows",
+            "title": "%walkthroughs.nodejsWelcome.downloadNode.forMacOrWindows.title%",
+            "description": "%walkthroughs.nodejsWelcome.downloadNode.forMacOrWindows.description%",
+            "media": {
+              "svg": "resources/walkthroughs/install-node-js.svg"
+            },
+            "when": "isWindows || isMac"
+          },
+          {
+            "id": "walkthroughs.nodejsWelcome.downloadNode.forLinux",
+            "title": "%walkthroughs.nodejsWelcome.downloadNode.forLinux.title%",
+            "description": "%walkthroughs.nodejsWelcome.downloadNode.forLinux.description%",
+            "media": {
+              "svg": "resources/walkthroughs/install-node-js.svg"
+            },
+            "when": "isLinux"
+          },
+          {
+            "id": "walkthroughs.nodejsWelcome.makeJsFile",
+            "title": "%walkthroughs.nodejsWelcome.makeJsFile.title%",
+            "description": "%walkthroughs.nodejsWelcome.makeJsFile.description%",
+            "media": {
+              "svg": "resources/walkthroughs/create-a-js-file.svg"
+            }
+          },
+          {
+            "id": "walkthroughs.nodejsWelcome.debugJsFile",
+            "title": "%walkthroughs.nodejsWelcome.debugJsFile.title%",
+            "description": "%walkthroughs.nodejsWelcome.debugJsFile.description%",
+            "media": {
+              "svg": "resources/walkthroughs/debug-and-run.svg"
+            }
+          },
+          {
+            "id": "walkthroughs.nodejsWelcome.learnMoreAboutJs",
+            "title": "%walkthroughs.nodejsWelcome.learnMoreAboutJs.title%",
+            "description": "%walkthroughs.nodejsWelcome.learnMoreAboutJs.description%",
+            "media": {
+              "svg": "resources/walkthroughs/learn-more.svg"
+            }
+          }
+        ]
+      }
     ]
   },
   "repository": {

extensions/typescript-language-features/package.nls.json

@@ -191,5 +191,25 @@
 	"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.nodejsWelcome.title": "Get started with JavaScript and Node.js",
+	"walkthroughs.nodejsWelcome.description": "Make the most of Visual Studio Code's first-class JavaScript experience.",
+
+	"walkthroughs.nodejsWelcome.downloadNode.forMacOrWindows.title": "Install Node.js",
+	"walkthroughs.nodejsWelcome.downloadNode.forMacOrWindows.description": "Node.js is an easy way to run JavaScript code. You can use it to quickly build command-line apps and servers. It also comes with npm, a package manager which makes reusing and sharing JavaScript code easy.\n[Install Node.js](https://nodejs.org/en/download/)",
+
+	"walkthroughs.nodejsWelcome.downloadNode.forLinux.title": "Install Node.js",
+	"walkthroughs.nodejsWelcome.downloadNode.forLinux.description": "Node.js is an easy way to run JavaScript code. You can use it to quickly build command-line apps and servers. It also comes with npm, a package manager which makes reusing and sharing JavaScript code easy.\n[Install Node.js](https://nodejs.org/en/download/package-manager/)",
+
+	"walkthroughs.nodejsWelcome.makeJsFile.title": "Create a JavaScript File",
+	"walkthroughs.nodejsWelcome.makeJsFile.description": "Let's write our first JavaScript file. We'll have to create a new file and save it with the ``.js`` extension at the end of the file name.\n[Create a JavaScript File](command:javascript-walkthrough.commands.createJsFile)",
+
+	"walkthroughs.nodejsWelcome.debugJsFile.title": "Run and Debug your JavaScript",
+	"walkthroughs.nodejsWelcome.debugJsFile.description": "Once you've installed Node.js, you can run JavaScript programs at a terminal by entering ``node your-file-name.js``\nAnother easy way to run Node.js programs is by using VS Code's debugger which lets you run your code, pause at different points, and help you understand what's going on step-by-step.\n[Start Debugging](command:javascript-walkthrough.commands.debugJsFile)",
+	"walkthroughs.nodejsWelcome.debugJsFile.altText": "Debug and run your JavaScript code in Node.js with Visual Studio Code.",
+
+	"walkthroughs.nodejsWelcome.learnMoreAboutJs.title": "Explore More",
+	"walkthroughs.nodejsWelcome.learnMoreAboutJs.description": "Want to get more comfortable with JavaScript, Node.js, and VS Code? Be sure to check out our docs!\nWe've got lots of resources for learning [JavaScript](https://code.visualstudio.com/docs/nodejs/working-with-javascript) and [Node.js](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial).\n\n[Learn More](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial)",
+	"walkthroughs.nodejsWelcome.learnMoreAboutJs.altText": "Learn more about JavaScript and Node.js in Visual Studio Code."
 }