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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions