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} [${1:input}]'; ",
      " export const desc = '命令说明'; ",
      "  ",
      " type OptionType = { ",
      "   ${1:input}: string, ",
      "   files?: Array<string> ",
      " } ",
      " export const builder: { [key in keyof OptionType]: Options } = { ",
      "   ${1:input}: { ",
      "     requiresArg: true, ",
      "     description: '参数描述', ",
      "     type: 'string' ",
      "   }, ",
      "   files: { ",
      "     requiresArg: false, ",
      "     description: '支持多个参数值', ",
      "     default: false, ",
      "     type: 'array', ",
      "     alias: 'f' ",
      "   } ",
      " }; ",
      " export const handler = function ({ ${1:input}, files }: 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": "创建无状态的组件",
  }
}