Skip to content

Latest commit

 

History

History
58 lines (38 loc) · 3.35 KB

vsc-extension-quickstart.md

File metadata and controls

58 lines (38 loc) · 3.35 KB

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
  • 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

Create VSIX package

First install vsce globally by running npm i vsce -g.

Then run vsce package in the root of your project.

vsce is not working with PNPM, you need to use NPM.

Then you can install the generated .vsix file by running code --install-extension angular-quick-jump-in-component-folder-x.x.x.vsix or you can load manually with F1 > Extensions: Install from VSIX... command.

This solutin is working only with VS Code. Other VS Code forks like VSCodium, Cursor, Windsurf etc. are may not supported.