需要修改的模板文件均为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-模板"
}
}