{"id":16201506,"url":"https://github.com/mikebirdtech/vscode-extension-tutorial","last_synced_at":"2025-04-07T18:42:26.140Z","repository":{"id":139509703,"uuid":"582460319","full_name":"MikeBirdTech/vscode-extension-tutorial","owner":"MikeBirdTech","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-28T05:38:28.000Z","size":49,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T20:23:44.732Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeBirdTech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-12-26T22:54:46.000Z","updated_at":"2024-01-09T08:53:17.000Z","dependencies_parsed_at":"2024-02-06T16:42:11.887Z","dependency_job_id":null,"html_url":"https://github.com/MikeBirdTech/vscode-extension-tutorial","commit_stats":null,"previous_names":["mikebirdtech/vscode-extension-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBirdTech%2Fvscode-extension-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBirdTech%2Fvscode-extension-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBirdTech%2Fvscode-extension-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeBirdTech%2Fvscode-extension-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeBirdTech","download_url":"https://codeload.github.com/MikeBirdTech/vscode-extension-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247709619,"owners_count":20983191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T09:38:44.956Z","updated_at":"2025-04-07T18:42:26.120Z","avatar_url":"https://github.com/MikeBirdTech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Extension Tutorial README\n\n## Setting it up\n\nThere are three things you need to have installed\n\n- [Node.js](https://nodejs.org/en/)\n- [yeoman](https://yeoman.io/)\n- [vs code extension generator](https://github.com/Microsoft/vscode-generator-code)\n\n`npm install -g yo generator-code`\n\n### Generate extension\n\nRun `yo code` and configure some values to get the project scaffolded.\n\nTo test, run the extension with `f5`, in the new window, open the command pallete and run hello world. Super easy.\n\n### Configuration\n\nThe [official documentation](https://code.visualstudio.com/api) has a lot of information but I’ll cover some important nodes.\n\n- Commands\n    - Assign a title and other UI elements to a command. The title is used in the Command Pallete for example\n- Activation Events\n    - When a command is invoked, VS Code will emit an activationEvent and the extension becomes activated\n    - Can be when VS Code loads and is ready to go `onStartupFinished`\n    - Can be when a given command is called `onCommand:\u003cnamespace\u003e.\u003cfunction\u003e`\n    - You must define `onCommand` for any commands that:\n        - Can be invoked using the Command Palette\n        - Can be invoked using a keybinding\n        - Can be invoked through the VS Code UI, such as through the editor title bar\n        - Is intended as an API for other extensions to consume\n- Configuration\n    - Provides the user with editable parameters\n    - Displayed under `Preferences` \u003e `Settings`\n    - Settings are shown alphabetically but can be grouped with another level of namespace\n    - Value can be string, number, boolean\n    - Can add a markdown description to include links\n    - Can set min/max values\n    - Can set defaults\n\n```jsx\n    \"configuration\": {\n      \"title\": \"Tutorial\",\n      \"properties\": {\n        \"tutorial.string\": {\n          \"type\": \"string\",\n          \"default\": null,\n          \"markdownDescription\": \"The [string](https://www.web.site) example of settings\"\n        },\n        \"tutorial.number\": {\n          \"type\": \"number\",\n          \"default\": 0.7,\n          \"minimum\": 0,\n          \"maximum\": 1,\n          \"markdownDescription\": \"The [number](https://www.web.site) example of settings\"\n}\n```\n\n\u003eCommands, activation events, and configuration are namespaced.\n\n- Keybindings\n    - Can associate a command with a keybinding\n    - `key` for Windows and `mac` for Apple\n    - Can set scope of when keybinding applies (ex. editorTextFocus)\n    - User always has the ability to change/override keybindings\n\n```jsx\n\"keybindings\": [\n      {\n        \"command\": \"tutorial.helloWorld\",\n        \"key\": \"alt+h\",\n        \"mac\": \"option+h\",\n        \"when\": \"editorTextFocus\"\n      }\n]\n```\n\n- Metadata\n    - Data displayed on Marketplace page\n        - publisher, name, description\n        - links (repo, bugs, homepage)\n        - icon/banner colour\n        - categories/keywords\n\n\n### Logic\n\nThe `activate` function is what is called by the activation event. It returns a ‘disposable’ object, which allows for safe cleanup. You’ll typically find these for event listeners, timers, and commands.\n\nAt the end of the `activate` function, you need to make sure that each command is registered with\n`context.subscriptions.push(disposable);`\n\nIf you don’t include this line of code for each command, the omitted command will still be registered and will still be available for the user to execute. However, if the extension is deactivated or uninstalled, the command will not be cleaned up properly, which could potentially lead to memory leaks or other issues. Just like a hike in the woods, be sure to clean up after yourself\n\nInside the `activate` function, you will register the commands that you defined in `package.json`. \n\n```jsx\nlet disposable = vscode.commands.registerCommand('tutorial.helloWorld', () =\u003e {\n\t\tvscode.window.showInformationMessage('Hello World from extension-tutorial!');\n\t});\n```\n\nThe default command is very basic, it just displays an information message.\n\nThe `vscode` object is very powerful\n\n- can interact with the editor environment, tests, commands, other extensions\n\nThe `vscode.window` object is featured in this tutorial and has a lot of capabilities for you to take advantage of such as\n\n- interactive with terminals, colour theme, or notebook\n- show input boxes, status bar items, or error messages\n\nTo selected highlighted code:\n\n- Get the editor with `const editor = vscode.window.activeTextEditor;`\n- Get the selected text - `const selectedText = editor.document.getText(editor.selection);`\n\nNow that we can capture text from the user, here’s how you integrate with OpenAI\n\n### OpenAI\n\nrun `npm install openai`\n\nImport into your file with `import { Configuration, OpenAIApi } from \"openai\";`\n\nConfigure your API Key\n\n```jsx\nconst configuration = new Configuration({\n\t\t\t\tapiKey: OPENAI_API_KEY,\n\t\t\t});\n```\n\n    ⚠️Big important security note!⚠️\n\n    I have seen too many extensions that store API Keys in settings. This is completely insecure. All extensions have access to all settings, so if you store it there (which is in plain text) any malicious extension can take your key. What you need to do is store the key in `Secret Storage` which is scoped to each individual extension.\n\n    `await context.secrets.store(OPENAI_API_KEY, secret);`\n\n    - where OPENAI_API_KEY is the key and `secret` is your API Key from OpenAI\n\nTo pass the configuration object into a new instance of OpenAIApi\n\n```jsx\nconst openai = new OpenAIApi(configuration);\n```\n\nTo create a completion by making a request to OpenAI\n\n```jsx\n\tconst response = await openai.createCompletion({\n\t\t\t\tmodel: \"text-davinci-003\",\n\t\t\t\tprompt: `${prompt}`,\n\t\t\t\tmax_tokens: 250,\n\t\t\t\ttemperature: 0.4,\n\t\t\t});\n```\n\n`model` - the OpenAI model you want to use\n\n`prompt` - the text you want to send to GPT-3  for a response. You can send the selected text directly, or you can build a stronger prompt by adding context/direction before or after the user’s text\n\n`max_tokens` - the maxmimum number of tokens for the prompt + request. Higher value = possible for longer responses but more expensive. Remember prompts count too, so a more detailed prompt uses more tokens\n\n`temperature` - the sampling temperature - higher values = more risk\n\n---\n\n\nWhen you get your response, you can capture the output with\n`const output = response.data.choices[0].text`\n\n- choices is an array because you can set a `n` variable to return more than one completion for a given promp. But default `n` is 1\n\nAnd that’s it. It really is that easy. You can now have a user highlight code, hit a keybinding to run a command, have that command take the highlighted code and insert it into a prompt for GPT-3, then get a response that you can present to the user. \n\nIt's an amazing feeling to see someone using a tool that I've built and knowing that it is helping them in some way. It could be something as small as saving them a few minutes of time each day or as significant as changing the way they work for the better. With VS Code extensions, knowing the potential impact is 10s of millions of developers is so exciting","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikebirdtech%2Fvscode-extension-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikebirdtech%2Fvscode-extension-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikebirdtech%2Fvscode-extension-tutorial/lists"}