Vscode创建自定义代码模板（eg:xxx.jsx）[javascriptreact.json]

需要修改的模板文件均为xxx.json
按需搜索即可

不同后缀名的文件 可以按需加入自定义快捷键的代码片段
例如 console.log();

简介：
prefix： 使用时想敲的快捷键提示
body： 真正的模版内容
写的时候注意缩进 此处推荐 indent-rainbow 插件 插件ID为 oderwat.indent-rainbow
“xxxxxx\n” \n为换行
写完一行不需要插入空行时新来一行即可
“xxxxxx$1xxxx” $1为占位符 定义生成模板后光标的位置（可以写在多处）
具体的语法请自行查询
description： 模板描述 敲快捷键的时候会看到

文件后缀为（.jsx）的简单模板

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "console.log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "console.log()"
  },
  "React-JSX(Function)": {
    "prefix": "jsx-f",
    "body": [
      "import React from \"react\";\n",
      "const $1 = (props) => {\n",
      "  return (\n",
      "  );",
      "};\n",
      "export default $1;"
    ],
    "description": "JSX模板-Function"
  },
  "React-JSX(Class)": {
    "prefix": "jsx-c",
    "body": [
      "import React, {Component} from \"react\";\n",
      "class $1 extends React.Component {",
      "  constructor(props) {",
      "    super(props);",
      "    this.state = {};",
      "  }\n",
      "  render() {",
      "    return ();",
      "  }",
      "}\n",
      "export default $1;"
    ],
    "description": "JSX模板-Class"
  },
  "React-JSX(Class-Form)": {
    "prefix": "jsx-c-form",
    "body": [
      "import React, {Component} from \"react\";\n",
      "class $1 extends React.Component {",
      "  constructor(props) {",
      "    super(props);",
      "    this.state = {};",
      "  }\n",
      "  handleChange = (event) => {",
      "    this.setState({});",
      "  };\n",
      "  handleSubmit = (event) => {",
      "    event.preventDefault();",
      "  };\n",
      "  render() {",
      "    return ();",
      "  }",
      "}\n",
      "export default $1;"
    ],
    "description": "JSX模板-Class-Form"
  }
}

文件后缀为（.tsx）的函数式组件模板
使用
Redux
React-Router
Material-ui

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "console.log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "console.log()"
  },
  "React-TSX(Function)": {
    "prefix": "tsx-f",
    "body": [
      "import React, { useState, useEffect } from \"react\";",
      "import { useDispatch, useSelector } from \"react-redux\";",
      "import { useHistory } from \"react-router-dom\";",
      "import { makeStyles, Theme, createStyles } from \"@material-ui/core\";\n",
      "const useStyles = makeStyles((theme: Theme) =>",
      "  createStyles({",
      "    example: {},",
      "  }),",
      ");\n",
      "export default function $1() {",
      "  const classes = useStyles();",
      "  const dispatch = useDispatch();",
      "  const history = useHistory();\n",
      "  return ();",
      "}"
    ],
    "description": "TSX模板-Function"
  }
}

文件后缀为（.ts）的RTK(Redux Tool Kit)模板

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "console.log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "console.log()"
  },
  "console.dir": {
    "prefix": "cd",
    "body": ["console.dir($1);"],
    "description": "console.dir()"
  },
  "console.table": {
    "prefix": "ct",
    "body": ["console.table($1);"],
    "description": "console.table()"
  },
  "Redux-Tool-Kit": {
    "prefix": "rtk",
    "body": [
      "import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";",
      "import { RootState, AppThunk } from \"../../store\";",
      "import { withLoading } from \"../../@common/middlewares\";\n",
      "type $1StoreState = {",
      "  test: string;",
      "};\n",
      "const initialState: $1StoreState = {",
      "  test: \"\",",
      "};\n",
      "const $1Slice = createSlice({",
      "  name: \"$1\",",
      "  initialState,",
      "  reducers: {",
      "    saveTest(state, action: PayloadAction<string>) {",
      "      state.test = action.payload;",
      "    },",
      "  },",
      "});\n",
      "// TODO add Selector",
      "export const selectTest = (state: RootState) => state.$1.test;\n",
      "// TODO export actions",
      "export const { saveTest } = $1Slice.actions;",
      "// TODO add to rootReducer",
      "export const $1Reducer = $1Slice.reducer;"
    ],
    "description": "Redux-Tool-Kit-模板"
  }
}