⌚⌚⌚花5分钟让写代码的效率提高一丢丢

超神熊猫
4,463 阅读5分钟

本文正在参加「金石计划」

前言

作为一个搬砖小崽，平时只能通过去思考如何提升效率的办法，这次给大家分享提高效率就是维护一套属于自己的代码片段的方法
在实际工作中，我们在开发的时候有很多模板类的代码，我们可以通过各种方式来维护一些常用的代码片段，但最常用的莫过于ide中自带的代码片段提示，把我用vscode开发用的一些方法分享一下，用得上就自取。 插件代码

代码片段效果

1.gif

常见的使用方式

好的，下面我将介绍一些在 VSCode 中使用代码片段的方法，这些方法都可以让你更快地编写代码：

1. 使用内置代码片段

VSCode 自带了很多内置的代码片段，可以在编辑器中直接使用，例如，在输入 HTML 的 Input 标签时，可以输入 input，然后按下 Tab 键，VSCode 就会自动帮你生成一段 Input 标签的代码。更多内置代码片段可以在文件资源管理器中找到。

2. 自定义代码片段

也可以自定义一些常用的代码片段，以便在工作中更快地编写代码。可以通过快捷键 Ctrl + Shift + P，然后搜索 “user snippets”，然后选择 “New Global Snippets File” 创建一个全局的代码片段文件。在这个文件中，可以写入想要自定义的代码片段，例如：

{
  "Create a new React component": {
    "prefix": "comp",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a new React component"
  }
}

在这个代码片段中，我们为 React 组件创建了一段代码片段，输入 comp 后，按下 Tab 键，就可以自动插入一个 React 组件的模板代码。

3. 使用第三方代码片段管理插件

也可以使用一些第三方的代码片段管理插件，例如：CodeSnippet，它可以帮助您更方便地管理代码片段，可以根据语言、文件类型等分类管理代码片段。

以上是一些常用的在 VSCode 中使用代码片段的方法

下面是一个简单的自定义代码片段示例，用于在 React 中创建一个带有状态的组件：

{
  "Stateful React Component": {
    "prefix": "rcc",
    "body": [
      "import React, { Component } from 'react';",
      "",
      "class ${1:ComponentName} extends Component {",
      "  constructor(props) {",
      "    super(props);",
      "    this.state = {",
      "      ${2:stateVariable}: ${3:stateValue}",
      "    };",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        $4",
      "      </div>",
      "    );",
      "  }",
      "",
      "}",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create a stateful React component"
  }
}

当输入 rcc 后，按下 Tab 键，就可以自动插入这段代码片段。

属于自己团队的代码片段插件

除了以上常用的一些代码片段的使用方式，还有一种是我觉得可以更好维护更好分享的一种代码片段方式分享，也是我比较推荐的
那就是简单的维护一个属于团队的vscode 代码片段插件，要维护一个vscode插件，其实很简单，文末也给大家留下了代码，直接拿去改一改名字和代码片段就可以成为自己团队的一个代码片段插件了。

1. 为什么不用上面的几种方式

  • vscode 自带代码片段配置这种方式的不便之处主要是在于每个前端开发都要在自己本地配置一份代码片段，如果代码片段有改动，那么需要在每个前端的电脑上都同步一遍最新的代码片段
  • 使用三方插件，使用三方插件的话，虽然把代码片段当成配置文件维护在项目里面，但是如果代码片段有改动，同样的需要去每个项目里面同步最新的代码片段
  • 公共的代码一般统一维护，如果是我们自己用插件维护，代码片段有更新的时候，只需要通知大家更新一下插件即可
  • 很多团队也本身就有团队的vscode插件，那么只需要集成进去即可

2. 造自己的插件

  1. 拉去代码 github 地址
  2. 安装依赖
    npm install
  3. 维护插件信息

image.png

这些插件的基础信息，改成自己的名称即可

  1. 维护代码片段模板 snippets/snippets.json
{
  "xxx-button 按钮": {
    "prefix": "xxx-button",
    "body": [
      "<xxx-button type=\"${1|primary,text,info,success,warning,danger|}\"",
      "            @click=\"$3\">${4}</xxx-button>"
    ],
    "description": "xxx UI <xxx-button>"
  },
  "xxx-input 输入框": {
    "prefix": "xxx-input",
    "body": [
      "<xxx-input type=\"${1|primary,text,info,success,warning,danger|}\"",
      "            @input=\"$3\">${4}</xxx-button>"
    ],
    "description": "xxx UI <xxx-input>"
  }
}

demo中的片段只维护了一个文件，如果有需要单独根据语言类型去维护的，可以修改package.json的引入

image.png

  1. 打包 vscode 打包需要通过官方的插件，使用 npm 安装 vsce（Visual Studio Code Extension）工具，它可以用于打包插件 安装vsce
npm i vsce -g

安装后执行

npm instal build

打包之后，项目根目录就会多出一个插件安装包，直接安装即可，也可以发布到插件市场（发布需要去注册微软账号），发布教程
image.png

安装成功后

image.png

最合适的方式

  • 公共的代码片段用团队插件去维护(统一维护)
  • 项目个性化的代码片段可以使用配置文件放到项目里面，结合三方插件使用（自己维护的插件也可实现）
  • vscode 内置代码片段主要是维护一些个人习惯的代码片段，无需要团队和项目挂钩

总结

除了代码片段，其实VScode插件还能做很多事，我们可以多去思考，开发过程中有哪些繁琐的事情，是否可以通过插件去实现。踏出这一步的思想很重要

也附上一份比较好的vscode插件开发指南 小茗同学vscode插件开发教程

插件虽小，但是如果能提升开发效率就可以先动起来，当你给团队推荐你写的插件，你写的工具，确实能够提高大家的效率的时候，就是扩大自己在团队的影响力（说白了，你可以去吹牛了，你写了个插件了喂）
“那个，你装一下这个插件，我就可以开始装逼了”

本文正在参加「金石计划」

avatar
文章
阅读
粉丝