Rumah > alat pembangunan > VSCode > teks badan

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

青灯夜游
Lepaskan: 2022-01-24 19:15:25
ke hadapan
3203 orang telah melayarinya

本篇文章带大家了解一下VSCode中的代码片段,介绍一下代码块种类,以及自定义代码片段的方法,希望对大家有所帮助!

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

一、前言

较为全的指南:

《VS Code 代码片段完全入门指南》

https://chinese.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/

一键生成代码块工具:https://snippet-generator.app/

Windows系统: 文件 > 首选项 > 用户代码片段 Mac系统: Code > 首选项 > 用户片段

二、创建

代码块种类

  • 全局代码片段(每种语言环境下都能触发代码块):新建全局代码片段会在 snippets 目录下生成 .code-snippets 为后缀的配置文件;【推荐学习:《vscode入门教程》】

  • 针对特定语言类型(只能在对应语言环境下才能触发):而新建对应语言的代码片段会生成 对应语言 + .json 的配置文件;

  • 为某一工作区(项目)创建的代码块;

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

新建

输入 react 自动创建一个 react.code-snippets 文件,全局创建则在本机文档目录,项目创建则在项目目录内;

Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. 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": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
}
Salin selepas log masuk

创建了一个 dva 的模版:

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. 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": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }

  // dva 基础布局结构
  "dva-basic": {
    "prefix": "lll_dva_basic",
    "body": [
      "import { Effect, Reducer, Subscription } from 'umi';",
      "",
      "export interface ${1:xxxxModelType} {",
      "  namespace: '${2:xxxx}';",
      "  state: ${3:IxxxxModelState};",
      "  effects: {",
      "    initDataEffect: Effect;",
      "  };",
      "  reducers: {",
      "    updateState: Reducer<${3:IxxxxModelState}>;",
      "  };",
      "  subscriptions: { setup: Subscription };",
      "}",
      "",
      "export interface ${3:IxxxxModelState} {",
      "  ${4:textData}: any;",
      "}",
      "",
      "const state: ${3:IxxxxModelState} = {",
      "  ${4:textData}: null,",
      "};",
      "",
      "const QualificationSetting: ${1:xxxxModelType} = {",
      "  namespace: &#39;${2:xxxx}&#39;,",
      "  state: state,",
      "",
      "  effects: {",
      "    // 初始化数据",
      "    *initDataEffect({ payload }, { select, call, put }) {",
      "      try {",
      "      } catch (error) {}",
      "    },",
      "  },",
      "",
      "  reducers: {",
      "    updateState(state, { data }) {",
      "      return { ...state, ...data };",
      "    },",
      "  },",
      "",
      "  subscriptions: {",
      "    setup({ dispatch, history }) {",
      "      return history.listen(({ pathname }) => {",
      "        if (pathname === &#39;/&#39;) {",
      "          // 初始化数据",
      "          dispatch({ type: &#39;initDataEffect&#39; });",
      "        }",
      "      });",
      "    },",
      "  },",
      "};",
      "",
      "export default QualificationSetting;",
      ""
    ],
    "description": "dva-basic"
  }ƒ
}
Salin selepas log masuk

字段解释

  • "dva-basic" 是代码片段的名字。如果没有 description,它就会出现在智能建议的列表里。

  • prefix 属性定义了代码片段的触发文本。它可以是一个字符串或者一个字符串数组(如果你想有多个触发文本)。前缀的子字符串同样可以触发,在我们的例子里,输入"h1"一样能匹配到我们的代码片段。

  • body 属性代表了要插入编辑器的内容。它是一个字符串数组,可能一行或者多行。在插入之前会被合并成一段。

  • description 属性提供了代码片段的更多描述。它是可选的。

  • scope 属性允许你指定特定的语言类型,你可以使用逗号来分割多种语言。它也是可选的。当然,对于特定于语言的代码片段文件来说是多余的。

Tab Stops (使用 tabs 切换,还有很多用法自行挖掘,比如可选项)

Hentian tab terdiri daripada ** dan Nombor siri digubah seperti '** dan **nombor siri** terdiri daripada ` mewakili kedudukan pertama , '1` mewakili kedudukan pertama, ` 1' mewakili jadual

Atas ialah kandungan terperinci Pengenalan ringkas kepada VSCode untuk pemula: analisis ringkas coretan kod dan cara menciptanya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan