vscode vue代码提示_VSCode 一字十行之代码片段

以前使用 Xcode 的时候，有一种方法可以把自己常用的「代码片段」保存起来，当在 Xcode 输入某个字符时即可提示你所保存的代码片段，可快速地完成编码。

今天查了下 VSCode，也有类似的功能，分享给大家。

比如我们创建一个 vue 组件的时候，通常会输入：

<template>  <div class="wrap">      div>template><script lang="ts">script><style lang="stylus" scoped>style>

我们习惯了粘贴复制，其实可以把这个代码定义成代码片段，以后输入一个字母既可以输入这些代码。

打开 VSCode，依次点击：

Code -> Preferences -> User Snippets -> New Global Snippets file，输入一个 snippet 文件名，我起名 vue，定义了两个代码片段：

1、打印输出

2、vue 组件

{  "console": {    "scope": "javascript,typescript",    "prefix": "sy_log",    "body": [      "console.log('$1');",      "$2"    ],    "description": "wsy to console"  },  "component": {    "scope": "",    "prefix": "sy_component",    "body": [      "",          "    

", "

", "", "", ", "", ", "$4", "" ], "description": "component of vue" }}

当在 VSCode 代码区域中输入 sy 的时候会提示 sy_component 和 sy_log。

选择 sy_log ，按回车，输入的代码如下：

console.log('');

选择 sy_component，按回车，输入的代码如下：

更多使用技巧，自己摸索一下即可！大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端