We often develop modules that have similar functions, like modal boxes.

A common practice is to copy a set from an already implemented place

  • Advanced programmers don’t bother with copying, they use CTRL + C

  • Modal copied from other places is mixed with a lot of business code, need to delete change

Here you can use code snippets to generate template code with one click

How to write some custom code snippets?

Open vscode, file -> preferences -> code snippets

We use typescriptreact.json based on the type of code we use react + ts

{
  "Modal template": {
    "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

Basic grammar

  • Scope: Which language the snippet works on. Languages are separated by a comma. Common examples include javascript, typescript, HTML, CSS,vue, etc. If it is set to “”, it takes effect everywhere

  • Prefix: prefix, snippet name, that is, enter this name to call the defined snippet

  • Body: An array, where the body, the body of the template, is the code you need to write. One string per line

  • Description: Description of the code snippet. The prompt displayed by the editor after entering a name. Display object name without definition. Change the Settings above to what you want

  • $1: Initial cursor position after code generation, allowing repetition. Press TAB to switch in a defined order. You can also define $2, $3… , $n. Note: $0 is the end position.

  • ${1: placeholder} : The initial position of the cursor after the code is generated (where 1 indicates where the cursor begins, and the character indicates that the cursor will select the character directly after the code is generated

  • \ T: TAB character. If you want to indent the code, prefix it with \t. Similarly, \n is a newline

  • ${1 | one, two, three |} : a placeholder (Placeholders) can have multiple values, the value of each option, separation, the beginning and end of the option with a pipe symbol (|) will options include. When inserting code snippets and selecting Tabstops, options are listed for the user to select

  • ${TM_SELECTED_TEXT} ${TM_SELECTED_TEXT}

TM_SELECTED_TEXT Currently selected text or empty string TM_CURRENT_LINE Content of the current line TM_CURRENT_WORD Content of the word under the cursor or empty string TM_LINE_INDEX Line number based on zero index TM_LINE_NUMBER Line number based on one index TM_FILENAME File name of the current document TM_FILENAME_BASE File name of the current document (without the suffix) TM_DIRECTORY Directory of the current document TM_FILEPATH CURRENT_YEAR Current year (four digits) CURRENT_MONTH Current month CURRENT_DATE Current day CURRENT_DAY_NAME_SHORT Short name of the day (' Mon ') CURRENT_HOUR Current hour CURRENT_MINUTE Current minute CURRENT_SECOND Current second BLOCK_COMMENT_START Block comment start identifier such as PHP /* or HTML <! -- BLOCK_COMMENT_END Block comment end identifier, such as PHP */ or HTML --> LINE_COMMENT line comment, such as PHP // or HTML <! -- -->Copy the code

Try opening a TSX file