Skip to main content

VSC常用代码片段

· 7 min read
Alan

Visual Studio Code 常用代码片段收集:

React

TypeScript Class Component

.vscode/react-ts-class-component.code-snippets
{
"React TypeScript Class Component": {
"prefix": "react-ts-class-component",
"scope": "tsx",
"body": [
" import React from \"react\"; ",
" /** ",
" * ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE ",
" */ ",
" export class ${TM_FILENAME_BASE} extends React.Component<${TM_FILENAME_BASE}Props, ${TM_FILENAME_BASE}State> { ",
" constructor(props: ${TM_FILENAME_BASE}Props) { ",
" super(props); ",
" this.state = {",
" // 初始化状态",
" };",
" } ",
" render() {",
" return (<div>${1}</div>)",
" } ",
" } ",
" export type ${TM_FILENAME_BASE}Props = { }",
" export type ${TM_FILENAME_BASE}State = { }",
],
"description": "create react typescript class component"
}
}

TypeScript Function Component

.vscode/react-ts-fn-component.code-snippets
{
"React TypeScript Function Component": {
"prefix": "react-ts-fn-component",
"body": [
" import { FC, ReactElement, ReactChild } from \"react\"; ",
" /** ",
" * ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE ",
" */ ",
" const ${TM_FILENAME_BASE} : FC<${TM_FILENAME_BASE}Props> = (props): ReactElement => { ",
" return (<div>{props.children}</div>)",
" } ",
" export type ${TM_FILENAME_BASE}Props = { children: ReactChild }",
" export default ${TM_FILENAME_BASE};"
],
"description": "create react typescript class component"
}
}

TypeScript

创建 TypeScript 函数

.vscode/ts-function.code-snippets
{
"TS Function": {
"prefix": "ts-function",
"scope": "typescript",
"body": [
"export type ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params = {}",
"export interface ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result { }",
" ",
"/**",
" * ",
" * @author ${1:创建人} ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" */",
"export function ${TM_FILENAME_BASE}(params: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params): ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result {",
"}",
],
"description": "创建 TypeScript 函数"
}
}
.vscode/ts-fn-override.code-snippets
{
"TS Function Override": {
"prefix": "ts-fn-override",
"scope": "typescript",
"body": [
"export type ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params = { }",
"export type ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result = { }",
"export type ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Def = {",
" (params: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params): ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result",
" __cache?: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result",
"}",
" ",
"/**",
" * ",
" * @author ${1:创建人} ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" */",
"export const ${TM_FILENAME_BASE}: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Def = function(params: ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Params): ${TM_FILENAME_BASE/^(\\w)(.*)/${1:/upcase}${2}/}Result {",
"}",
],
"description": "创建 TypeScript 函数"
}
}

Vue

.vscode/ts-vue-component.code-snippets
{
"Vue TypeScript Component": {
"prefix": "vue-typescript-component",
"scope": "vue",
"body": [
"<template>",
" <div> ",
" </div> ",
"</template> ",
" ",
"<script lang=\"ts\"> ",
"/** ",
" * @author ${1:创建人} ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" * @see https://www.digitalocean.com/community/tutorials/vuejs-typescript-class-components ",
" * @see https://github.com/ktsn/vuex-class ",
" * @see https://github.com/vuejs/vue-class-component ",
" * @see https://github.com/kaorun343/vue-property-decorator ",
" */ ",
"import { Component, Prop, Vue, Watch, Mixins } from \"vue-property-decorator\"; ",
"// import ChildComponent from \"./ChildComponent.vue\"; ",
" ",
"// const MixSample = Vue.extend(mixObject()); ",
" ",
"@Component({ ",
" // mixins: [MixSample], ",
" // components: { ChildComponent }, ",
"}) ",
"export default class ${TM_FILENAME_BASE} extends Mixins() { ",
" name: string = ${TM_FILENAME_BASE}",
" /** ",
" * 定义属性 ",
" */ ",
" @Prop({ required: false }) ",
" propName1?: string; ",
" @Prop({ required: true }) ",
" propName2: string; ",
" ",
" /** ",
" * 定义数据 ",
" */ ",
" status: { ",
" showCity: boolean; ",
" } = { ",
" showCity: false, ",
" }; ",
" data: { ",
" title: string; ",
" } = { ",
" title: \"example\", ",
" }; ",
" ",
" created() { ",
" /** ",
" * 时机早于 mounted ",
" */ ",
" } ",
" ",
" mounted() { ",
" /** ",
" * mounted ",
" */ ",
" } ",
" /** ",
" * 定义方法 ",
" */ ",
" methodName() { ",
" /** ",
" * 方法 ",
" */ ",
" } ",
" ",
" /** ",
" * 计算属性 ",
" */ ",
" get computedField() { ",
" return this.propName1; ",
" } ",
" /** ",
" * Watch监视变化 ",
" */ ",
" @Watch(`status.showCity`, { ",
" immediate: true, ",
" deep: false, ",
" }) ",
" onPropertyWatch(newVal: boolean) { ",
" console.log(`newVal: `, newVal); ",
" } ",
"} ",
"</script> ",
],
"description": "创建 TypeScript 类型组件"
}
}

jest

创建普通的 jest node.js 单元测试

.vscode/jest-node-test.code-snippets
{
"jest test": {
"prefix": "jest-node-test",
"body": [
" import { ${TM_FILENAME_BASE/^(\\w+).test/${1}/} } from \"../${TM_FILENAME_BASE/^(\\w+).test/${1}/}\";",
"",
"describe(\"${TM_FILENAME_BASE}\", () => {",
" beforeEach(() => {",
" });",
" afterEach(() => {",
" });",
" test(\"${1}\", () => {",
" });",
"});",
],
"description": "创建 jest 单测",
}
}

创建涉及DOM的单元测试

.vscode/jest-dom-test.code-snippets
{
"jest test": {
"prefix": "jest-dom-test",
"body": [
"/**",
" * @jest-environment jsdom",
" */",
" import { ${TM_FILENAME_BASE/^(\\w+).test/${1}/} } from \"../${TM_FILENAME_BASE/^(\\w+).test/${1}/}\";",
"",
"describe(\"${TM_FILENAME_BASE}\", () => {",
" let ua: jest.SpyInstance<string, []>;",
" beforeEach(() => {",
" ua = jest.spyOn(global.navigator, \"userAgent\", \"get\");",
" });",
" afterEach(() => {",
" ua.mockRestore();",
" });",
" test(\"测试内容\", () => {",
" ua.mockReturnValue(``);",
" });",
"});",
],
"description": "创建 jest-dom 单测",
}
}

yargs

安装依赖:

npm i yargs@16.2.0 --save

创建入口文件:

bin/cli.ts
#!/usr/bin/env node

import yargs from "yargs";

const ext = __filename.split(".")[__filename.split(".").length - 1] || "js";

yargs.commandDir("command-files-directory", {
recurse: true,
extensions: [ext]
}).demandCommand()
.version("version", "显示版本号", "0.0.1")
.help("help", "显示帮助")
.argv;

创建命令模板:

.vscode/yargs-command.code-snippets
{
"yargs command": {
"prefix": "yargs-command",
"scope": "typescript",
"body": [
" import { Options } from 'yargs'; ",
" ",
" export const command = '${TM_FILENAME_BASE} [input]'; ",
" export const desc = '编码/解码 Base64'; ",
" ",
" type OptionType = { ",
" input: string, ",
" encode?: boolean ",
" decode?: boolean ",
" file?: boolean ",
" } ",
" export const builder: { [key in keyof OptionType]: Options } = { ",
" input: { ",
" requiresArg: true, ",
" description: '输入文本/文件路径', ",
" type: 'string' ",
" }, ",
" encode: { ",
" requiresArg: false, ",
" description: '执行编码', ",
" default: false, ",
" type: 'boolean', ",
" alias: 'e' ",
" }, ",
" decode: { ",
" requiresArg: false, ",
" description: '执行解码', ",
" default: false, ",
" type: 'boolean', ",
" alias: 'd' ",
" }, ",
" file: { ",
" requiresArg: false, ",
" description: 'input是文件路径', ",
" default: false, ",
" type: 'boolean', ",
" alias: 'f' ",
" } ",
" }; ",
" export const handler = function ({ input, encode, decode, file }: OptionType) { ",
" }"
],
"description": "创建 yargs 命令"
}
}

flutter

创建 Flutter 组件

.vscode/dart-widget.code-snippets
{
"stateless scaffold": {
"prefix": "scaffold-stateless",
"scope": "dart",
"body": [
"import 'package:flutter/material.dart';",
"",
"/**",
" * ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" */",
"class ${1:$TM_FILENAME_BASE} extends StatelessWidget {",
" @override",
" Widget build(BuildContext context) {",
" return Scaffold(",
" appBar: AppBar(",
" title: Text('${TM_FILENAME_BASE}'),",
" ),",
" body: ${2|Text('Ctrl+v替换当前内容')|},",
" );",
" }",
"}",
],
"description": "创建无状态scaffold"
},
"scaffold statefull": {
"prefix": "scaffold-stateful",
"scope": "dart",
"body": [
"import 'package:flutter/material.dart';",
"",
"",
"/**",
" * ",
" * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" */",
"class ${1:$TM_FILENAME_BASE} extends StatefulWidget {",
" @override",
" State<StatefulWidget> createState() {",
" return new _${1:$TM_FILENAME_BASE}State();",
" }",
"}",
"",
"class _${1:$TM_FILENAME_BASE}State extends State<${1:$TM_FILENAME_BASE}> {",
" @override",
" void initState() {",
" super.initState();",
" }",
"",
" String _title = '${3:$TM_FILENAME_BASE}';",
"@override",
"Widget build(BuildContext context) {",
" return Scaffold(",
" appBar: AppBar(",
" title: Text(_title),",
" ),",
" body: ${2:$CLIPBOARD},",
" floatingActionButton: FloatingActionButton(",
" onPressed: _onPress,",
" child: Icon(Icons.change_circle),",
" ),",
" );",
"}",
"",
" void _onPress() {",
" }",
"}",
],
"description": "创建有状态的 Scaffold"
},
"stateful widget": {
"prefix": "widget-stateful",
"scope": "dart",
"body": [
"class ${1:$TM_FILENAME_BASE} extends StatefulWidget {",
" ${1:$TM_FILENAME_BASE}({Key? key}) : super(key: key);",
"",
" @override",
" State<StatefulWidget> createState() {",
" return _${1:TM_FILENAME_BASE}State();",
" }",
"}",
"",
"class _${1:TM_FILENAME_BASE}State extends State<${1:TM_FILENAME_BASE}> {",
" @override",
" Widget build(BuildContext context) {",
" return ${2|Text('Ctrl+v替换内容')|};",
" }",
"}",
],
"description": "创建带有状态的组件",
},
"stateless widget": {
"prefix": "widget-stateless",
"scope": "dart",
"body": [
"class ${1:$TM_FILENAME_BASE} extends StatelessWidget {",
" ${1:$TM_FILENAME_BASE}({Key? key}) : super(key: key);",
"",
" @override",
" Widget build(BuildContext context) {",
" return ${2|Text('Ctrl+v替换内容')|};",
" }",
"}",
],
"description": "创建无状态的组件",
}
}