VSC常用代码片段

Alan

Alan

Maintainer of blog

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

React 相关#

创建 TypeScript Class风格组件

.vscode/react-ts-class-component.code-snippets
{
"React TypeScript Class Component": {
"prefix": "react-ts-class-component",
"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 相关#

创建 TypeScript 函数

.vscode/ts-function.code-snippets
{
"TS Function": {
"prefix": "ts-function",
"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",
"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",
"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 单元测试

.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 单测",
}
}