vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

vue文件模板

模板变量

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

vue.json

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
  //     "prefix": "log",
  //     "body": [
  //         "console.log(‘$1‘);",
  //         "$2"
  //     ],
  //     "description": "Log output to console"
  // }

  "vue": {
    "prefix": "vue",
    "body": [
      "<!--",
      "* @description $1",
      "* @fileName $TM_FILENAME",
      "* @author 彭成刚",
      "* @date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "* @version V1.0.0",
      "!-->",
      "<template>",
      "  <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  //mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang=‘less‘ scoped>",
      "</style>"
    ],
    "description": "vue初始化页面"
  }

}

原文地址:https://www.cnblogs.com/pengchenggang/p/10348748.html

时间: 2024-11-04 15:48:41

vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容的相关文章

VS code自定义用户代码片段snippet

打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这段代码的注释 demo :  { "Print to console": { "prefix": "nodes", "body": [ "const http = require('http')", "

vs2010代码注释自动生成api文档

最近做了一些接口,提供其他人调用,要写个api文档,可是我想代码注释已经写了说明,能不能直接把代码注释生成api?于是找到以下方法 环境:vs2010 先下载安装Sandcastle 和Sandcastle Help File Builder 下载地址 http://sandcastle.codeplex.com/ http://shfb.codeplex.com/ 其中Sandcastle Help File Builder安装较复杂,安装红框内的即可 安装完成后,然后让要使用的项目输出xml

vue初始化模板套用

一. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

vscode自定义代码片段

{ // Place your global 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 empt

vscode中设置vue代码片段

1.点击[文件]---[首选项]---[用户代码片段] 2.新建或修改vue.json 3.将下列代码粘贴上去(可根据自己需要添加/删除) { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "<

使用vscode,新建.vue文件,tab(enter)自动生成vue代码模板

第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择创建模板 填写vue.json -->复制 第三步中的模板内容中内容保存 第二步: 添加配置,让vscode允许自定义的代码片段提示出来 文件 --> 首选项 --> 设置 ---> 添加这2项 // Specifies the location of snippets in the suggestion widget "editor.snippetSugges

vscode自定义代码块

vscode中设置自定义代码块打开首选项,选择用户代码片段,打开后选择编程语言选中后打开文件,按照格式编辑内容 "Print to console log": { "prefix": "csl", "body": [ "console.log('$1')" ], "description": "log output to console" },

sublime text 2自定义代码片段

本文引用   http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html 对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点击Tools -> New Snippet,(工具->代码段)会新建一个xml文

sublime text 2学习(二):创建可复用的代码片段

对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点击Tools -> New Snippet,会新建一个xml文件页签: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optio