在VScode中创建你的代码模板的方法

使用VScode的用户代码片段功能，来生成自己习惯的代码模板，提升开发效率

1.选择菜单里的 文件 > 首选项 > 用户代码片段

2.选择你需要自定义模板的文件，以vue为例

3. 配置对应文件json

把代码片段写在json里。每个代码段都是在一个代码片段名称下定义的，并且有prefix、body和description。prefix是用来触发代码片段的。使用 $1，$2 等指定光标位置，这些数字指定了光标跳转的顺序，$0表示最终光标位置。

{
 "vue-template": {
  "prefix": "vue",
  "body": [
   "<template>",
   " <div class=\"$1\">",
   "",
   " </div>",
   "</template>",
   "",
   "<script>",
   "export default {",
   " name: '$1',",
   " data() { ",
   "  return {",
   "",
   "  }",
   " }",
   " }",
   "</script>",
   "",
   "<style lang=\"\" scoped>",
   " .$1{",
   "",
   " }",
   "</style>"

  ],
  "description": "my vue template"
 }
}

还有更复杂的用法…一般也用不到，我就不在这里写了。

到此这篇关于在VScode中创建你的代码模板的方法的文章就介绍到这了,更多相关VScode创建代码模板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用VSCode 创建一个插件

    VSCode 创建一个插件,如何创建一个插件,VS Code 的插件既然是一个 Node.js 应用,那么官方自然也会提供了基于 NPM 的工具链来帮助你创建和维护插件. 首先你需要的是 yeoman,一个脚手架工具.通过 yeoman 你可以快速创建代码模板,如下所示: npm install -g yeoman 然后你需要安装 VS Code 的模板: npm install -g generator-code 有了脚手架,你就可以创建一个 VS Code 的插件模板了.接下来运行: yo

  • 在VScode中创建你的代码模板的方法

    使用VScode的用户代码片段功能,来生成自己习惯的代码模板,提升开发效率 1.选择菜单里的 文件 > 首选项 > 用户代码片段 2.选择你需要自定义模板的文件,以vue为例 3. 配置对应文件json 把代码片段写在json里.每个代码段都是在一个代码片段名称下定义的,并且有prefix.body和description.prefix是用来触发代码片段的.使用 $1,$2 等指定光标位置,这些数字指定了光标跳转的顺序,$0表示最终光标位置. { "vue-template"

  • 在vscode 中设置 vue模板内容的方法

    vscode中设置 vue 模板内容缘由设置要求1:vscode 先下载插件 `vetur`2: 菜单栏 -文件 - 首选项 - 用户代码片段3:使用 缘由 由于每次在 vscode 中创建vue的文件的时候,都需要手动书写 templete,模板 script,脚本 style,样式 这些重复和繁琐的事情,是可以定义一个模板信息的 设置要求 1:vscode 先下载插件 vetur 2: 菜单栏 -文件 - 首选项 - 用户代码片段 以下是借鉴一下谷粒商城的 提供 vue 模板信息 和 htt

  • Python中创建字典的几种方法总结(推荐)

    1.传统的文字表达式: >>> d={'name':'Allen','age':21,'gender':'male'} >>> d {'age': 21, 'name': 'Allen', 'gender': 'male'} 如果你可以事先拼出整个字典,这种方式是很方便的. 2.动态分配键值: >>> d={} >>> d['name']='Allen' >>> d['age']=21 >>> d[

  • 在NumPy中创建空数组/矩阵的方法

    如何在NumPy中创建空数组/矩阵? 在添加行的情况下,你最好的选择是创建一个与数据集最终一样大的数组,然后向它添加数据 row-by-row: >>> import numpy >>> a = numpy.zeros(shape=(5,2)) >>> a array([[ 0., 0.], [ 0., 0.], [ 0., 0.], [ 0., 0.], [ 0., 0.]]) >>> a[0] = [1,2] >>&g

  • 在python中创建表格的两种方法实例

    在python中创建表格的两种方法实例

    目录 日常拉呱: 创建表格一般有两种方法: 一:通过导入xlwt创建 二:通过导入csv库来创建 1.写入数据 2.读取数据 总结 日常拉呱: 最近在学习爬虫模拟登陆各个软件,老师留有作业,模拟登录京东并爬取系列物品,可惜我还是个小白菜鸟,还是处于迷迷糊糊的状态,只能先了解一下边缘知识.爬取完数据,你是否在纠结这些数据放在哪呢?建一个表格或许会帮助到你! 创建表格一般有两种方法: 一:通过导入xlwt来创建,这种方法我比较喜欢,因为它够直观够容易理解,但是相对而言比较麻烦. 二:通过导入csv库

  • JavaScript中 创建动态 QML 对象的方法

    一.动态创建对象 有两种方法可以从 JavaScript 动态创建对象: 调用 Qt.createComponent() 动态创建 Component 对象 使用 Qt.createQmlObject() 从 QML 字符串创建对象 虽然动态创建的对象可以与其他对象一样使用,但它们在 QML 中没有 id. 1.1.动态创建组件 可以调用它的 createObject() 方法来创建该组件的一个实例.这个函数可以接受两个参数: 第一个是新对象的父对象.父对象可以是图形对象(即 Item 类型)或

  • vscode中vue-cli项目es-lint的配置方法

    本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出 开始 安装插件 如图所示: vscode设置 安装完成之后,到vscode中的 文件-->首选项-->设置 中 添加如下代码 "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "html",

  • vscode中使用npm安装babel的方法

    vscode中使用npm安装babel的方法

    前言 上篇介绍了nodejs的安装配置,这篇来介绍一下在VScode里面怎么使用bable. bable是一个广泛使用的ES6转换器,可以将ES6代码转为ES5代码 一.检查是否已经安装了npm 在cmd中输入npm -v 得到版本号,现在新版的nodejs在安装的时候已经自动安装了npm. 还是那句话,最好还是以管理员身份打开终端. 二.配置bable 在终端中安装bable,输入 npm install –g babel-cli 这是为了让VScode可以识别bable,安装成功后就是这样:

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

  • MySQL中创建表的三种方法汇总

    目录 CREATE TABLE CREATE TABLE … LIKE CREATE TABLE … SELECT 总结 SQL 标准使用 CREATE TABLE 语句创建数据表:MySQL 则实现了三种创建表的方法,支持自定义表结构或者通过复制已有的表结构来创建新表,本文给大家分别介绍一下这些方法的使用和注意事项. CREATE TABLE CREATE TABLE 语句的基本语法如下: CREATE TABLE [IF NOT EXISTS] table_name ( column1 da

随机推荐