Skip to content

Add .vscode workspace files (extensions.json, tasks.json, settings.json) for contributor experience #22

Description

The repository's .vscode/ directory contains only a launch.json. The VS Code extension authoring docs recommend a richer .vscode/ setup so contributors get a consistent, working development experience the moment they clone the repo and open it in VS Code:

  • An extensions.json recommending the right development extensions (linters, debuggers, problem matchers)
  • A tasks.json defining the build/watch tasks that the launch configuration depends on
  • A settings.json pinning workspace-relevant editor settings

Today, a new contributor has to figure these things out themselves.

Request

What is missing

File Status Impact
.vscode/launch.json ✅ Present (basic) Works for simple F5, but no preLaunchTask so bundle is not rebuilt
.vscode/extensions.json ❌ Missing No recommended extensions surface in the "Recommended" list
.vscode/tasks.json ❌ Missing No npm: watch task; bundle is not rebuilt automatically when sources change
.vscode/settings.json ❌ Missing No workspace ESLint, format-on-save, or excluded-search settings

Desired experience

A contributor clones the repo, opens it in VS Code, and:

  • Sees a notification suggesting to install the recommended extensions (ESLint, Extension Test Runner, and once bundling lands, esbuild Problem Matchers)
  • Pressing F5 launches the Extension Development Host with the latest bundle, with watch mode running in a separate terminal
  • ESLint problems show up in the Problems view automatically
  • Search results do not include node_modules, dist, or *.vsix

Acceptance criteria

  • .vscode/extensions.json lists relevant recommendations (dbaeumer.vscode-eslint, ms-vscode.extension-test-runner, and connor4312.esbuild-problem-matchers once bundling is in place)
  • .vscode/tasks.json defines a watch task (or npm: watch:esbuild style) wired to a problem matcher and marked as the default build task
  • .vscode/launch.json references the build task as preLaunchTask so F5 rebuilds before launch
  • .vscode/settings.json excludes dist/, out/, *.vsix, and node_modules/ from the file watcher and search index
  • All four files are checked in and excluded from the published VSIX via .vscodeignore

Technical decisions

.vscode/extensions.json:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "ms-vscode.extension-test-runner",
    "connor4312.esbuild-problem-matchers"
  ]
}

The connor4312.esbuild-problem-matchers recommendation is conditional on the bundling issue. If bundling lands first, include it. If this issue lands first, omit it and add it as a follow-up.

.vscode/tasks.json (assumes esbuild bundling is in place; otherwise adjust to the current build script):

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch",
      "dependsOn": ["npm: watch:esbuild", "npm: lint"],
      "presentation": { "reveal": "never" },
      "group": { "kind": "build", "isDefault": true }
    },
    {
      "type": "npm",
      "script": "watch:esbuild",
      "group": "build",
      "problemMatcher": "$esbuild-watch",
      "isBackground": true,
      "label": "npm: watch:esbuild",
      "presentation": { "group": "watch", "reveal": "never" }
    }
  ]
}

.vscode/launch.json update: Add a preLaunchTask so F5 rebuilds before launch:

{
  "name": "Run Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch:esbuild"
}

A second configuration for tests should be added when the testing issue lands.

.vscode/settings.json:

{
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/out": true,
    "**/*.vsix": true
  },
  "files.watcherExclude": {
    "**/dist/**": true,
    "**/out/**": true
  },
  "eslint.validate": ["javascript"]
}

.vscodeignore: Already excludes .vscode/**. No change needed — these files stay in the repo but never ship.

Coordination with bundling and testing issues: This issue is most useful after the bundling issue (because watch tasks reference watch:esbuild) and after the testing issue (because the test launch config benefits from problem matchers). It can be split into a minimal version (just extensions.json + settings.json) that lands first, with a follow-up adding tasks.json and the launch update once bundling is in place. Either approach is acceptable; the issue tracks the full target state.


Implementation plan

Initial files (can land before bundling)

  • Create .vscode/extensions.json with dbaeumer.vscode-eslint and ms-vscode.extension-test-runner
  • Create .vscode/settings.json with search/file-watcher exclusions and ESLint validation

After bundling lands

  • Add connor4312.esbuild-problem-matchers to .vscode/extensions.json recommendations
  • Create .vscode/tasks.json with the watch and npm: watch:esbuild tasks
  • Update .vscode/launch.json to add preLaunchTask and outFiles

After testing lands

  • Add a second launch configuration for Extension Tests referencing ${workspaceFolder}/out/test/**/*.js and --extensionTestsPath

Documentation

  • Add a one-line note in README.md Development section: "Open in VS Code and accept the recommended extensions for the best experience."

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions