专业人士如何使用 VS Code 自动化重复代码

VS Code中的代码片段是什么？

创建我们的第一个片段

片段 1：留下签名

代码片段 2：将 Redux 连接到 React Props

总结

感谢阅读

编程时，你难免会遇到重复的代码，编写这些代码完全是浪费时间。我指的不是非 DRY 代码，而是必须编写的“基本代码”。例如，使用React-Redux将State / Dispatch连接到Props。

任何参与过大型React-Redux项目的人都知道，要将Redux Store Data连接到Component Props需要编写多少次相同的代码。

今天我们将解决这个问题，并为您提供一种方法来简化您拥有的任何重复代码并最大限度地提高您的工作效率。

VS Code中的代码片段是什么？

VS Code是一款出色的代码编辑器，它提供了丰富的工具，可将您的工作效率提升到一个新的水平。代码片段就是其中一种工具。

代码片段可以被认为是模板，使您只需编写一次代码即可根据需要重复使用。它允许变量以及动态用户输入。

如果您已经使用VS Code一段时间，那么您一定会遇到Snippets。

VS Code预先构建了一些Snippet。您可以安装一些扩展来添加更多Snippet，但最重要的是，您可以创建自己的Snippet来满足您自己的需求。

创建我们的第一个片段

创建片段非常简单：

1. 转到文件 > 首选项 > 用户代码片段（在 macOS 上可能是代码 > 首选项 > 用户代码片段）。

   或者您可以使用F1调出命令面板并搜索用户代码片段

2. 选择要创建的代码片段类型（特定于语言，特定于项目或全局）

   

3. .code-snippets在创建的文件中增加以下内容
   

   {
   "Signature": {
           "scope": "html",
           "prefix": "hello",
           "body": [
               "Hello!!!"
           ],
           "description": "Hello"
       }
   }
   

4. 完成！现在，当你在HTML文件中输入“hello”时，你将使用代码片段

这不是一个实际的例子，但我们确实设法制作了Snippets。

检查Snippet 的定义时，我们发现声明了Snippet应该在scope哪些文件中使用。提到了触发Snippet显示的前缀文本。定义了Snippet的主体（ Snippet的每一行都是数组中的一个新字符串）。 最后，是Snippet功能的简短描述。prefixbodydescription

让我们做几个实际的例子来加深我们的理解并解决文章简介中提到的问题（使用React-Redux将State / Dispatch连接到Props）。

片段 1：留下签名

让我们尝试制作一个代码片段，在任何文件中留下这样的签名，并且不仅限于Python

"""
Name: Tapajyoti Bose
Modified on: 05 September 2021 08:38:35
"""

当然，我们还希望Snippet能够动态更新日期和时间。

幸运的是，VS Code为此目的提供了一堆变量。

我们将使用BLOCK_COMMENT_START和BLOCK_COMMENT_END自动生成任何语言的块注释，CURRENT_DATE并使用CURRENT_MONTH_NAME、、、、、&动态生成日期和时间CURRENT_YEAR。CURRENT_HOURCURRENT_MINUTECURRENT_SECOND

注意：要获取完整的变量列表，请单击此处

因此，代码片段最初看起来像这样：

"Signature": {
    "scope": "python,javascript,typescript,html,css",
    "prefix": "signature",
    "body": [
        "$BLOCK_COMMENT_START",
        "Name: Tapajyoti Bose",
        "Modified on: $CURRENT_DATE $CURRENT_MONTH_NAME $CURRENT_YEAR $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
        "$BLOCK_COMMENT_END"
    ],
    "description": "Leave a signature"
}

现在，您可以在Python、Javascript、Typescript、HTML、CSS文件中留下签名。

您可能想知道，将功能扩展到所有语言是否需要添加所有语言的名称。幸运的是，有一个简单的解决方案：只需从代码片段定义中删除，然后就scope大功告成了！功能就扩展到所有语言了！

代码片段 2：将 Redux 连接到 React Props

这比签名代码片段更简单。只需在代码片段定义中复制以下代码即可完成：

"Connect Component to Redux": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "connect",
    "body": [
        "const mapStateToProps = (state) => ({",
        "\t$1",
        "})",
        "",
        "const mapDispatchToProps = (dispatch) => ({",
        "\t$0",
        "})",
        "",
        "export default connect(mapStateToProps, mapDispatchToProps)($TM_FILENAME_BASE)"
    ],
    "description": "Connect React Component to Redux"
}

让我们检查一下正在做什么。

出于显而易见的原因，我们将Snippet 的范围限定为基于React的项目。

在 body 部分，你可能第一次看到$0和。这些是可制表位置的占位符，用户可以在其中输入自己的逻辑（在本例中，他们想要将store中的部分连接到props ）。$1

我们使用文件名作为组件名称，因为在大多数情况下，约定使用与文件名相同的组件名称。

总结

在本文中，我们介绍了如何使用VS Code 代码片段自动执行重复代码。现在，您可以创建自定义代码片段来解决您自己的问题，并将您的工作效率提升到新的高度。

快乐开发！

动图

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。