preface

We have some generic code snippets like modal boxes and so on

For quick code generation and uniform code style

You can develop a Snippets of vscode plug-in for use within your team

The development of

Install dependencies

yarn global add yo generator-code vsce
Copy the code

Generating project

yo code
Copy the code

Plug-in type, New Code Snippets

Plugin name, name of your extension: test-snippet

The Language type supported by the code snippet, Language ID: javascript

Project directory

.├ ─ changelo.md ├── Download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt vsc-extension-quickstart.mdCopy the code

Defining code snippets

Adding configuration options

In package.json contributes snippets are added

"contributes": {
    "snippets": [{"language": "javascript"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "javascriptreact"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescript"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescriptreact"."path": "./snippets/snippets.code-snippets"}},Copy the code

Have the plug-in support all four languages

Writing snippets

The writing of the code snippet can be seen here

// jsComponent copy. Code -snippets file {"Modal template from test-Snippet": {
    "prefix": "modal"."body": [
      "import { Modal } from '@/components';"."import React, { Component } from 'react';".""."interface ${1:$TM_FILENAME_BASE}ModalProps {"." visible: boolean;"." setVisible: (visible: boolean) => void;"."}".""."interface ${1:$TM_FILENAME_BASE}ModalState {}".""."export default class ${1:$TM_FILENAME_BASE}Modal extends Component<${1:$TM_FILENAME_BASE}ModalProps, ${1:$TM_FILENAME_BASE}ModalState> {"." submit() {"." console.log('submit')"."}".""." render() {"." const { visible, setVisible } = this.props;".""." return ("." ." className=\"setting-modal\""."Title =" set ""." visible={visible}"." onClose={() => setVisible(false)}"." onCancel={() => setVisible(false)}"." onOk={() => this.submit()}".">"."        ${2:content}"." ".");"."}"."}".""]}}Copy the code

Packaging releases

Fill in the publisher and repository addresses in package.json

"publisher": "tom"."repository": {},
Copy the code

Then change to readme.md

This is an internal plugin for our teamCopy the code

Perform packaging

vsce package
Copy the code

The installation package with the. Vsix suffix is generated after the package is packaged. If the plug-in is only shared among individuals or teams, it can be installed manually and used without being released to the VSCode plug-in marketplace.

If you want to learn about the plugin market release, check it out here

Now the Modal template can be used