Quickly write a vs code plug-in

nut loaves 2022-01-15 02:06:20

The goal is establish components or pages Of documents vscode plug-in unit

1. Create scaffolding works

  • Install scaffolding

    npm install -g yo generator-code

  • cd When you get to the working directory , function yo code, choice ts Develop a new plug-in , Enter the plug-in name as prompted and install the project

    image-20211201112643754

  • Project directory after completion , There are three parts to write plug-ins :

    • package.json file
  • stay extension.ts For the functions to be written in vscode.commands.register... to Activation Event or Contribution Point The event binding method configured in or set the listener . Located in the entry file ( The default is extension.ts) Of activate() Function .

2. Plug in project debugging

​ Press F5 You can open a new VSCode, Then you can in this new VSCode Plug in testing in .

​ Effect if shown :

​ thus , You can see that the extension has been running normally , Next, you can write a file to realize establish react Scaffolding pages/components Component template under .

3. Add plug-in configuration function

command command

package.json Add custom commands , After running, if shown .

menu menus

​ New menu , stay package.json Medium contributes newly added menus To configure

​ Editor context menu :

​ Explorer context menu :

Add shortcut keys keybindings

​ Add shortcut keys for creating component commands , stay package.json Medium contributes newly added keybindings To configure

Get input

extension.ts Register custom commands in the file extension.createComponent, At the same time, you want to obtain the user-defined component name and specified file location entered by the user

ctrl+alt+n Or right click in the editor area, select Create, and then enter the component name test-demo, file location src/pages

​ thus , A series of... Have been added to the plug-in vs code Related function configuration , Next, some functions of the template to be created .

4. Prepare template file

​ page / The component should contain three elements (index.ts entrance ,ComponetName.tsx page / The component itself ,ComponetName.less page / Style of component )

  1. Templates for components pascalCase name /src/templates/componentsTemplate.ts
  1. less Style template /src/templates/lessTemplate.ts
  2. index Entry template /src/templates/indexTemplate.ts

    1. Create directories and files , New dependency fs vscode loash , The corresponding code implements the logic

​ 5. Plug in running results :test-demo stay src/pages Under the table of contents , Newly created component .

src/components Create component in testDemo

​ After the plug-in debugging is successful , The next step is to consider the use of . The next step is to release plug-ins and in vs code Download and use of extension program in .

5. Packaging releases

  1. Use vsce Tools npm i vsce -g
  2. Register Microsoft account and get token
  3. Create publisher https://aka.ms/vscode-create-publisher
  4. Release :vsce publish

More reference implementations

vscode Official documents


thank
Similar articles

2022-01-15

2022-01-15