generator-code 1.8.6 → 1.10.0

package/README.md

@@ -57,7 +57,7 @@ Options:
         --extensionId           # Id of the extension
         --extensionDescription  # Description of the extension
         --pkgManager            # 'npm', 'yarn' or 'pnpm'
-        --webpack               # Bundle the extension with webpack
+        --bundle                # 'webpack', 'esbuild'. Bundle the extension with webpack or esbuild
         --gitInit               # Initialize a git repo
 
 Example usages:

package/generators/app/dependencyVersions/package.json

@@ -7,19 +7,19 @@
         "@types/mocha": "^10.0.6",
         "@types/node": "18.x",
         "@types/assert": "^1.5.10",
-        "@typescript-eslint/eslint-plugin": "^7.7.1",
-        "@typescript-eslint/parser": "^7.7.1",
+        "@typescript-eslint/eslint-plugin": "^7.11.0",
+        "@typescript-eslint/parser": "^7.11.0",
         "eslint": "^8.57.0",
-        "glob": "^10.3.12",
+        "glob": "^10.4.1",
         "mocha": "^10.4.0",
         "typescript": "^5.4.5",
-        "@vscode/test-cli": "^0.0.8",
-        "@vscode/test-electron": "^2.3.9",
+        "@vscode/test-cli": "^0.0.9",
+        "@vscode/test-electron": "^2.4.0",
         "@vscode/test-web": "^0.0.54",
-        "@types/webpack-env": "^1.18.4",
+        "@types/webpack-env": "^1.18.5",
         "@types/vscode-notebook-renderer": "^1.72.3",
         "concurrently": "^8.2.2",
-        "css-loader": "^7.1.1",
+        "css-loader": "^7.1.2",
         "fork-ts-checker-webpack-plugin": "^9.0.2",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.1",
@@ -30,6 +30,9 @@
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
         "assert": "^2.1.0",
-        "process": "^0.11.10"
+        "process": "^0.11.10",
+        "npm-run-all": "^4.1.5",
+        "esbuild": "^0.21.4",
+        "@esbuild-plugins/node-globals-polyfill": "^0.2.3"
     }
 }

package/generators/app/generate-command-ts.js

@@ -22,7 +22,7 @@ export default {
         await prompts.askForExtensionDescription(generator, extensionConfig);
 
         await prompts.askForGit(generator, extensionConfig);
-        await prompts.askForWebpack(generator, extensionConfig);
+        await prompts.askForBundler(generator, extensionConfig);
         await prompts.askForPackageManager(generator, extensionConfig);
     },
     /**
@@ -30,13 +30,16 @@ export default {
      * @param {Object} extensionConfig
      */
     writing: (generator, extensionConfig) => {
-        if (extensionConfig.webpack) {
-            generator.fs.copy(generator.templatePath('vscode-webpack/vscode'), generator.destinationPath('.vscode'));
-            generator.fs.copyTpl(generator.templatePath('vscode-webpack/package.json'), generator.destinationPath('package.json'), extensionConfig);
-            generator.fs.copyTpl(generator.templatePath('vscode-webpack/tsconfig.json'), generator.destinationPath('tsconfig.json'), extensionConfig);
-            generator.fs.copyTpl(generator.templatePath('vscode-webpack/.vscodeignore'), generator.destinationPath('.vscodeignore'), extensionConfig);
-            generator.fs.copyTpl(generator.templatePath('vscode-webpack/webpack.config.js'), generator.destinationPath('webpack.config.js'), extensionConfig);
-            generator.fs.copyTpl(generator.templatePath('vscode-webpack/vsc-extension-quickstart.md'), generator.destinationPath('vsc-extension-quickstart.md'), extensionConfig);
+        const bundler = extensionConfig.bundler;
+        if (bundler && (bundler === 'webpack' || bundler === 'esbuild')) {
+            const bundlerPath = bundler === 'esbuild' ? 'vscode-esbuild' : 'vscode-webpack';
+            const bundlerFile = bundler === 'esbuild' ? 'esbuild.js' : 'webpack.config.js';
+            generator.fs.copy(generator.templatePath(bundlerPath, 'vscode'), generator.destinationPath('.vscode'));
+            generator.fs.copyTpl(generator.templatePath(bundlerPath, 'package.json'), generator.destinationPath('package.json'), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath(bundlerPath, 'tsconfig.json'), generator.destinationPath('tsconfig.json'), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath(bundlerPath, '.vscodeignore'), generator.destinationPath('.vscodeignore'), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath(bundlerPath, bundlerFile), generator.destinationPath(bundlerFile), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath(bundlerPath, 'vsc-extension-quickstart.md'), generator.destinationPath('vsc-extension-quickstart.md'), extensionConfig);
         } else {
             generator.fs.copy(generator.templatePath('vscode'), generator.destinationPath('.vscode'));
             generator.fs.copyTpl(generator.templatePath('package.json'), generator.destinationPath('package.json'), extensionConfig);

package/generators/app/generate-command-web.js

@@ -21,6 +21,7 @@ export default {
         await prompts.askForExtensionDescription(generator, extensionConfig);
 
         await prompts.askForGit(generator, extensionConfig);
+        await prompts.askForBundler(generator, extensionConfig, false, 'webpack');
         await prompts.askForPackageManager(generator, extensionConfig);
     },
     /**
@@ -28,8 +29,12 @@ export default {
      * @param {Object} extensionConfig
      */
     writing: (generator, extensionConfig) => {
-        generator.fs.copy(generator.templatePath('vscode'), generator.destinationPath('.vscode'));
-        generator.fs.copy(generator.templatePath('src/web/test'), generator.destinationPath('src/web/test'));
+        const bundler = extensionConfig.bundler;
+        if (bundler === 'esbuild') {
+            generator.fs.copy(generator.templatePath('vscode-esbuild'), generator.destinationPath('.vscode'));
+        } else {
+            generator.fs.copy(generator.templatePath('vscode-webpack'), generator.destinationPath('.vscode'));
+        }
 
         generator.fs.copy(generator.templatePath('.vscodeignore'), generator.destinationPath('.vscodeignore'));
         if (extensionConfig.gitInit) {
@@ -42,8 +47,17 @@ export default {
 
         generator.fs.copyTpl(generator.templatePath('src/web/extension.ts'), generator.destinationPath('src/web/extension.ts'), extensionConfig);
 
-        generator.fs.copyTpl(generator.templatePath('webpack.config.js'), generator.destinationPath('webpack.config.js'), extensionConfig);
-        generator.fs.copyTpl(generator.templatePath('package.json'), generator.destinationPath('package.json'), extensionConfig);
+        generator.fs.copy(generator.templatePath('src/web/test/suite/extension.test.ts'), generator.destinationPath('src/web/test/suite/extension.test.ts'));
+
+        if (bundler === 'esbuild') {
+            generator.fs.copyTpl(generator.templatePath('esbuild.js'), generator.destinationPath('esbuild.js'), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath('esbuild-package.json'), generator.destinationPath('package.json'), extensionConfig);
+            generator.fs.copy(generator.templatePath('src/web/test/suite/esbuild-mochaTestRunner.ts'), generator.destinationPath('src/web/test/suite/mochaTestRunner.ts'));
+        } else {
+            generator.fs.copyTpl(generator.templatePath('webpack.config.js'), generator.destinationPath('webpack.config.js'), extensionConfig);
+            generator.fs.copyTpl(generator.templatePath('webpack-package.json'), generator.destinationPath('package.json'), extensionConfig);
+            generator.fs.copy(generator.templatePath('src/web/test/suite/webpack-mochaTestRunner.ts'), generator.destinationPath('src/web/test/suite/index.ts'));
+        }
 
         generator.fs.copy(generator.templatePath('.eslintrc.json'), generator.destinationPath('.eslintrc.json'));
 

package/generators/app/index.js

@@ -44,7 +44,7 @@ export default class extends Generator {
         this.option('extensionDescription', { type: String, description: 'Description of the extension' });
 
         this.option('pkgManager', { type: String, description: `'npm', 'yarn' or 'pnpm'` });
-        this.option('webpack', { type: Boolean, description: `Bundle the extension with webpack` });
+        this.option('bundler', { type: String, description: `Bundle the extension: 'webpack', 'esbuild'` });
         this.option('gitInit', { type: Boolean, description: `Initialize a git repo` });
 
         this.option('snippetFolder', { type: String, description: `Snippet folder location` });

package/generators/app/prompts.js

@@ -41,7 +41,7 @@ export function askForExtensionDisplayName(generator, extensionConfig) {
 * @param {Object} extensionConfig
 */
 export function askForExtensionId(generator, extensionConfig) {
-    let extensionName = generator.options['extensionId'];
+    const extensionName = generator.options['extensionId'];
     if (extensionName) {
         extensionConfig.name = extensionName;
         return Promise.resolve();
@@ -72,7 +72,7 @@ export function askForExtensionId(generator, extensionConfig) {
 * @param {Object} extensionConfig
 */
 export function askForExtensionDescription(generator, extensionConfig) {
-    let extensionDescription = generator.options['extensionDescription'];
+    const extensionDescription = generator.options['extensionDescription'];
     if (extensionDescription) {
         extensionConfig.description = extensionDescription;
         return Promise.resolve();
@@ -97,7 +97,7 @@ export function askForExtensionDescription(generator, extensionConfig) {
 * @param {Object} extensionConfig
 */
 export function askForGit(generator, extensionConfig) {
-    let gitInit = generator.options['gitInit'];
+    const gitInit = generator.options['gitInit'];
     if (typeof gitInit === 'boolean') {
         extensionConfig.gitInit = Boolean(gitInit);
         return Promise.resolve();
@@ -122,7 +122,7 @@ export function askForGit(generator, extensionConfig) {
 * @param {Object} extensionConfig
 */
 export function askForPackageManager(generator, extensionConfig) {
-    let pkgManager = generator.options['pkgManager'];
+    const pkgManager = generator.options['pkgManager'];
     if (pkgManager === 'npm' || pkgManager === 'yarn' || pkgManager === 'pnpm') {
         extensionConfig.pkgManager = pkgManager;
         return Promise.resolve();
@@ -161,24 +161,41 @@ export function askForPackageManager(generator, extensionConfig) {
 * @param {Generator} generator
 * @param {Object} extensionConfig
 */
-export function askForWebpack(generator, extensionConfig) {
-    let webpack = generator.options['webpack'];
-    if (typeof webpack === 'boolean') {
-        extensionConfig.webpack = Boolean(webpack);
+export function askForBundler(generator, extensionConfig, allowNone = true, defaultBundler = 'unbundled') {
+    const bundler = generator.options['bundler'];
+    if (bundler === 'webpack' || bundler === 'esbuild') {
+        extensionConfig.bundler = bundler;
+        return Promise.resolve();
+    }
+    const webpack = generator.options['webpack']; // backwards compatibility
+    if (typeof webpack === 'boolean' && webpack) {
+        extensionConfig.bundler = 'webpack';
         return Promise.resolve();
     }
-
     if (generator.options['quick']) {
-        extensionConfig.webpack = false;
+        extensionConfig.bundler = defaultBundler;
         return Promise.resolve();
     }
 
+    const choices = allowNone ? [{ name: 'unbundled', value: 'unbundled' }] : [];
+
     return generator.prompt({
-        type: 'confirm',
-        name: 'webpack',
-        message: 'Bundle the source code with webpack?',
-        default: false
-    }).then(gitAnswer => {
-        extensionConfig.webpack = gitAnswer.webpack;
+        type: 'list',
+        default: defaultBundler,
+        name: 'bundler',
+        message: 'Which bundler to use?',
+        choices: [
+            ...choices,
+            {
+                name: 'webpack',
+                value: 'webpack'
+            },
+            {
+                name: 'esbuild',
+                value: 'esbuild'
+            }
+        ]
+    }).then(bundlerAnswer => {
+        extensionConfig.bundler = bundlerAnswer.bundler;
     });
 }

package/generators/app/templates/ext-colortheme/vscode/launch.json

@@ -4,14 +4,14 @@
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
 	"version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Extension",
-            "type": "extensionHost",
-            "request": "launch",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceFolder}"
-            ]
-        }
-    ]
-}
+	"configurations": [
+		{
+			"name": "Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			]
+		}
+	]
+}

package/generators/app/templates/ext-command-js/vscode/extensions.json

@@ -3,6 +3,6 @@
 	// for the documentation about the extensions.json format
 	"recommendations": [
 		"dbaeumer.vscode-eslint",
-        "ms-vscode.extension-test-runner"
+		"ms-vscode.extension-test-runner"
 	]
 }

package/generators/app/templates/ext-command-ts/vsc-extension-quickstart.md

@@ -38,6 +38,6 @@
 ## Go further
 
 * [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns.
- * Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
- * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
- * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).
+* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
+* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).

package/generators/app/templates/ext-command-ts/vscode/extensions.json

@@ -3,6 +3,6 @@
 	// for the documentation about the extensions.json format
 	"recommendations": [
 		"dbaeumer.vscode-eslint",
-        "ms-vscode.extension-test-runner"
+		"ms-vscode.extension-test-runner"
 	]
 }

package/generators/app/templates/ext-command-ts/vscode/settings.json

@@ -1,11 +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"
-}
+	"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"
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+esbuild.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*

package/generators/app/templates/ext-command-ts/vscode-esbuild/esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});

package/generators/app/templates/ext-command-ts/vscode-esbuild/package.json

@@ -0,0 +1,52 @@
+{
+  "name": <%- JSON.stringify(name) %>,
+  "displayName": <%- JSON.stringify(displayName) %>,
+  "description": <%- JSON.stringify(description) %>,
+  "version": "0.0.1",
+  "engines": {
+    "vscode": <%- JSON.stringify(vsCodeEngine) %>
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./dist/extension.js",<% if (insiders) { %>
+  "enabledApiProposals": [],<% } %>
+  "contributes": {
+    "commands": [
+      {
+        "command": <%- JSON.stringify(`${name}.helloWorld`) %>,
+        "title": "Hello World"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "<%= pkgManager %> run package",
+    "compile": "<%= pkgManager %> run check-types && <%= pkgManager %> run lint && node esbuild.js",
+    "watch": "npm-run-all -p watch:*",
+    "watch:esbuild": "node esbuild.js --watch",
+    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
+    "package": "<%= pkgManager %> run check-types && <%= pkgManager %> run lint && node esbuild.js --production",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "<%= pkgManager %> run compile-tests && <%= pkgManager %> run compile && <%= pkgManager %> run lint",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src --ext ts",
+    "test": "vscode-test"<% if (insiders) { %>,
+    "update-proposed-api": "vscode-dts dev"<% } %>
+  },
+  "devDependencies": {
+    <%- dep("@types/vscode") %>,
+    <%- dep("@types/mocha") %>,
+    <%- dep("@types/node") %>,
+    <%- dep("@typescript-eslint/eslint-plugin") %>,
+    <%- dep("@typescript-eslint/parser") %>,
+    <%- dep("eslint") %>,
+    <%- dep("esbuild") %>,
+    <%- dep("npm-run-all") %>,
+    <%- dep("typescript") %>,
+    <%- dep("@vscode/test-cli") %>,
+    <%- dep("@vscode/test-electron") %><% if (insiders) { %>,
+    <%- dep("vscode-dts") %><% } %>
+  }
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "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. */
+	}
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/vsc-extension-quickstart.md

@@ -0,0 +1,48 @@
+# 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 doesn’t 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 `registerCommand`.
+
+## Setup
+
+* install the recommended extensions (amodio.tsl-problem-matcher, ms-vscode.extension-test-runner, and dbaeumer.vscode-eslint)
+
+
+## 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/@types/vscode/index.d.ts`.
+
+## Run tests
+
+* Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
+* Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered.
+* Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
+* See the output of the test result in the Test Results view.
+* Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder.
+  * The provided 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.
+
+## Go further
+
+* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
+* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).

package/generators/app/templates/ext-command-ts/vscode-esbuild/vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/vscode/launch.json

@@ -0,0 +1,21 @@
+// 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: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/vscode/settings.json

@@ -0,0 +1,13 @@
+// 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
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

package/generators/app/templates/ext-command-ts/vscode-esbuild/vscode/tasks.json

@@ -0,0 +1,67 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+            "label": "watch",
+            "dependsOn": [
+                "npm: watch:tsc",
+                "npm: watch:esbuild"
+            ],
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "runOptions": {
+                "runOn": "folderOpen"
+            }
+        },
+        {
+            "type": "npm",
+            "script": "watch:esbuild",
+            "group": "build",
+            "problemMatcher": "$esbuild-watch",
+            "isBackground": true,
+            "label": "npm: watch:esbuild",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+		{
+            "type": "npm",
+            "script": "watch:tsc",
+            "group": "build",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "label": "npm: watch:tsc",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+		{
+			"type": "npm",
+			"script": "watch-tests",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		},
+		{
+			"label": "tasks: watch-tests",
+			"dependsOn": [
+				"npm: watch",
+				"npm: watch-tests"
+			],
+			"problemMatcher": []
+		}
+	]
+}

package/generators/app/templates/ext-command-ts/vscode-webpack/vscode/settings.json

@@ -1,13 +1,13 @@
 // 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
-        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "out": true, // set this to false to include "out" folder in search results
-        "dist": true // set this to false to include "dist" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
-}
+	"files.exclude": {
+		"out": false, // set this to true to hide the "out" folder with the compiled JS files
+		"dist": false // set this to true to hide the "dist" folder with the compiled JS files
+	},
+	"search.exclude": {
+		"out": true, // set this to false to include "out" folder in search results
+		"dist": true // set this to false to include "dist" folder in search results
+	},
+	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+	"typescript.tsc.autoDetect": "off"
+}