{"id":2149,"date":"2026-03-01T01:11:52","date_gmt":"2026-02-28T12:11:52","guid":{"rendered":"https:\/\/www.ronella.xyz\/?p=2149"},"modified":"2026-03-27T23:15:43","modified_gmt":"2026-03-27T10:15:43","slug":"scaffolding-a-modern-vs-code-extension-with-yeoman","status":"publish","type":"post","link":"https:\/\/www.ronella.xyz\/?p=2149","title":{"rendered":"Scaffolding a Modern VS Code Extension with Yeoman"},"content":{"rendered":"<p>In this article we focus purely on <strong>scaffolding<\/strong>: generating the initial VS Code extension project using the Yeoman generator, with TypeScript and esbuild, ready for you to start coding.<\/p>\n<hr \/>\n<h2>Prerequisites<\/h2>\n<p>Before you scaffold the project, ensure you have:<\/p>\n<ul>\n<li><strong>Node.js 18+<\/strong> installed (check with <code>node -v<\/code>).<\/li>\n<li><strong>Git<\/strong> installed (check with <code>git --version<\/code>).<\/li>\n<\/ul>\n<p>These are required because the generator uses Node, and the template can optionally initialise a Git repository for you.<\/p>\n<hr \/>\n<h2>Generating the extension with Yeoman<\/h2>\n<p>VS Code\u2019s official generator is distributed as a Yeoman generator. You don\u2019t need to install anything globally; you can invoke it directly via <code>npx<\/code>:<\/p>\n<pre><code class=\"language-bash\"># One-time scaffold (no global install needed)\nnpx --package yo --package generator-code -- yo code<\/code><\/pre>\n<p>This command:<\/p>\n<ul>\n<li>Downloads <code>yo<\/code> (Yeoman) and <code>generator-code<\/code> on demand.<\/li>\n<li>Runs the VS Code extension generator.<\/li>\n<li>Prompts you with a series of questions about the extension you want to create.<\/li>\n<\/ul>\n<hr \/>\n<h2>Recommended answers to the generator prompts<\/h2>\n<p>When the interactive prompts appear, choose:<\/p>\n<pre><code class=\"language-bash\">? What type of extension do you want to create? \u2192 New Extension (TypeScript)\n? What&#039;s the name of your extension?            \u2192 my-ai-extension\n? What&#039;s the identifier?                        \u2192 my-ai-extension\n? Initialize a git repository?                  \u2192 Yes\n? Which bundler to use?                         \u2192 esbuild\n? Which package manager?                        \u2192 npm<\/code><\/pre>\n<p>Why these choices matter:<\/p>\n<ul>\n<li><strong>New Extension (TypeScript)<\/strong> \u2013 gives you a typed development experience and a standard project layout.<\/li>\n<li><strong>Name \/ Identifier<\/strong> \u2013 the identifier becomes the technical ID used in the marketplace and in settings; pick something stable and lowercase.<\/li>\n<li><strong>Initialize a git repository<\/strong> \u2013 sets up Git so you can immediately start version-controlling your work.<\/li>\n<li><strong>esbuild<\/strong> \u2013 a modern, fast bundler that creates a single bundled <code>extension.js<\/code> for VS Code.<\/li>\n<li><strong>npm<\/strong> \u2013 a widely used default package manager; you can adapt to pnpm\/yarn later if needed.<\/li>\n<\/ul>\n<p>After you answer the prompts, Yeoman will generate the project in a new folder named after your extension (e.g. <code>my-ai-extension<\/code>).<\/p>\n<hr \/>\n<h2>Understanding the generated structure<\/h2>\n<p>Open the new folder in VS Code. The generator gives you a standard layout, including:<\/p>\n<ul>\n<li><code>src\/extension.ts<\/code><br \/>\nThis is the <strong>entry point<\/strong> of your extension. It exports <code>activate<\/code> and (optionally) <code>deactivate<\/code>. All your activation logic, command registration, and other behaviour start here.<\/li>\n<li><code>package.json<\/code><br \/>\nThis acts as the <strong>extension manifest<\/strong>. It contains:<\/p>\n<ul>\n<li>Metadata (name, version, publisher).<\/li>\n<li><code>&quot;main&quot;<\/code> field pointing to the compiled bundle (e.g. <code>.\/dist\/extension.js<\/code>).<\/li>\n<li><code>&quot;activationEvents&quot;<\/code> describing when your extension loads.<\/li>\n<li><code>&quot;contributes&quot;<\/code> describing commands, configuration, views, etc., that your extension adds to VS Code.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>From an architectural perspective, <code>package.json<\/code> is the single most important file: it tells VS Code <strong>what<\/strong> your extension is and <strong>how<\/strong> and <strong>when<\/strong> it integrates into the editor.<\/p>\n<p>You\u2019ll also see other generated files such as:<\/p>\n<ul>\n<li><code>tsconfig.json<\/code> \u2013 TypeScript compiler configuration.<\/li>\n<li>Build scripts in <code>package.json<\/code> \u2013 used to compile and bundle the extension with esbuild.<\/li>\n<li><code>.vscode\/launch.json<\/code> \u2013 debug configuration for running the extension in a development host.<\/li>\n<\/ul>\n<p>At this stage, you don\u2019t need to modify any of these to get a working scaffold.<\/p>\n<hr \/>\n<h2>Running the scaffolded extension<\/h2>\n<p>Once the generator finishes:<\/p>\n<ol>\n<li>\n<p>Install dependencies:<\/p>\n<pre><code class=\"language-bash\">cd my-ai-extension\nnpm install<\/code><\/pre>\n<\/li>\n<li>\n<p>Open the folder in VS Code (if you aren\u2019t already).<\/p>\n<\/li>\n<li>\n<p>Press <strong>F5<\/strong>.<\/p>\n<p>VS Code will:<\/p>\n<ul>\n<li>Run the build task defined by the generator.<\/li>\n<li>Launch a new <strong>Extension Development Host<\/strong> window.<\/li>\n<li>Load your extension into that window.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>In the Extension Development Host:<\/p>\n<ul>\n<li>Open the Command Palette.<\/li>\n<li>Run the sample command that the generator added (typically named something like \u201cHello World\u201d).<\/li>\n<\/ul>\n<p>If the command runs and shows the sample notification, you have a fully working <strong>scaffolded<\/strong> extension. From here, you can start replacing the generated sample logic in <code>src\/extension.ts<\/code> and adjusting <code>package.json<\/code> to declare your own contributions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we focus purely on scaffolding: generating the initial VS Code extension project using the Yeoman generator, with TypeScript and esbuild, ready for you to start coding. Prerequisites Before you scaffold the project, ensure you have: Node.js 18+ installed (check with node -v). Git installed (check with git &#8211;version). These are required because [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[97],"tags":[],"_links":{"self":[{"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/posts\/2149"}],"collection":[{"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2149"}],"version-history":[{"count":1,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/posts\/2149\/revisions"}],"predecessor-version":[{"id":2150,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=\/wp\/v2\/posts\/2149\/revisions\/2150"}],"wp:attachment":[{"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ronella.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}