精华内容
下载资源
问答
  • vscode快速输出vue模板 快捷键

    千次阅读 2020-04-20 16:19:02
    新建一个vue项目时,最烦人的就是需要重新写一套组件模板,自己打太慢,那就自己设置一个模板一键输出: 输出效果如下: 怎么做到的呢?步骤如下: 打开vscode ->文件–>首选项–>用户代码片段–>...

    新建一个vue项目时,最烦人的就是需要重新写一套组件模板,自己打太慢,那就自己设置一个模板一键输出:

    输出效果如下:

    怎么做到的呢?步骤如下:

    打开vscode ->文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定

    全选复制下面代码:

     

    {

        "Print to console": {

            "prefix": "vue",   

            "body": [

             

                "<template>",

                "<div></div>",

                "</template>",

                "",

                "<script>",

               

                "",

                "export default {",

                "//import引入的组件",

                "components: {},",

                "data() {",

              

                "return {",

                "",

                "};",

                "},",

               

                "//方法集合",

                "methods: {",

                "",

                "},",

            

                "//生命周期 - 挂载完成(可以访问DOM元素)",

                "mounted() {",

                "",

                "},",

             

                "}",

                "</script>",

                "<style >",

              

                "</style>"

            ],

            "description": "console log()"

        }

    }

     

    prefix的值“vue”就是你设定的快捷键。如新建一个vue文件,输入 vue  按回车,你要的模板就全部输入好了

     

     

     

    展开全文
  • "生成vue模板": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", ..

     1、经常用到的  vue代码模板 可以通过设置 vscode 进行设置

    新建或者添加到现有 代码代码片段

    内容为:

    {
    	"生成vue模板": {
    		"prefix": "vue",
    		"body": [
    			"<!-- $1 -->",
    			"<template>",
    			"<div class='$2'>$5</div>",
    			"</template>",
    			"",
    			"<script>",
    			"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
    			"//例如:import 《组件名称》 from '《组件路径》';",
    			"",
    			"export default {",
    			"//import引入的组件需要注入到对象中才能使用",
    			"components: {},",
    			"data() {",
    			"//这里存放数据",
    			"return {",
    			"",
    			"};",
    			"},",
    			"//监听属性 类似于data概念",
    			"computed: {},",
    			"//监控data中的数据变化",
    			"watch: {},",
    			"//方法集合",
    			"methods: {",
    			"",
    			"},",
    			"//生命周期 - 创建完成(可以访问当前this实例)",
    			"created() {",
    			"",
    			"这里一般写函数的声明。页面创建完成时,除非此函数",
    			"},",
    			"//生命周期 - 挂载完成(可以访问DOM元素)",
    			"mounted() {",
    			"",
    			"},",
    			"beforeCreate() {}, //生命周期 - 创建之前",
    			"beforeMount() {}, //生命周期 - 挂载之前",
    			"beforeUpdate() {}, //生命周期 - 更新之前",
    			"updated() {}, //生命周期 - 更新之后",
    			"beforeDestroy() {}, //生命周期 - 销毁之前",
    			"destroyed() {}, //生命周期 - 销毁完成",
    			"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
    			"}",
    			"</script>",
    			"<style scoped>",
    			"$4",
    			"</style>"
    		],
    		"description": "生成vue模板"
    	},
    
    	"http-get 请求"{
    		"prefix": "httpget",
    		"body": [
    			"this.\\$http({",
    			"url: this.\\$http.adornUrl(''),",
    			"method: 'get',",
    			"params: this.\\$http.adornParams({})",
    			"}).then(({data}) => {",
    			"})"
    		],
    		"description": "httpGET 请求"
    	},
    
    	"http-post 请求": {
    		"prefix": "httppost",
    		"body": [
    		"this.\\$http({",
    		"url: this.\\$http.adornUrl(''),",
    		"method: 'post',",
    		"data: this.\\$http.adornData(data, false)",
    		"}).then(({ data }) => { });"
    		],
    		"description": "httpPOST 请求"
    		}
    }

    使用:

    再开发时 敲 prefix里的字符串即可。比如 : 敲 vue  会出现 vue的模板, 敲 httppost 会出现  http-post的模板

    展开全文
  • #vs code 的常用快捷键注释:- 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/- 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)- 多行注释:[alt+shift+A]- 多行注释:/**移动行:alt+up/down显示/隐藏左侧目录栏 ...

    #vs code 的常用快捷键

    注释:

    - 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/

    - 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)

    - 多行注释:[alt+shift+A]

    - 多行注释:/**

    移动行:alt+up/down

    显示/隐藏左侧目录栏 ctrl + b

    复制当前行:shift + alt +up/down

    删除当前行:shift + ctrl + k

    控制台终端显示与隐藏:ctrl + ~

    查找文件/安装vs code 插件地址:ctrl + p

    代码格式化:shift + alt +f

    新建一个窗口 : ctrl + shift + n

    行增加缩进: ctrl + [

    行减少缩进: ctrl + ]

    裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x

    字体放大/缩小: ctrl + ( + 或 - )

    拆分编辑器 : ctrl + 1/2/3

    切换窗口 : ctrl + shift + left/right

    关闭编辑器窗口 : ctrl + w

    关闭所有窗口 : ctrl + k + w

    切换全屏 : F11

    自动换行 : alt + z

    显示git : ctrl + shift + g

    全局查找文件:ctrl + shift + f

    显示相关插件的命令(如:git log):ctrl + shift + p

    选中文字:shift + left / right / up / down

    折叠代码:ctrl + k + 0-9 (0是完全折叠)

    展开代码:ctrl + k + j (完全展开代码)

    删除行 :ctrl + shift + k

    快速切换主题:ctrl + k / ctrl + t

    快速回到顶部 :ctrl + home

    快速回到底部 : ctrl + end

    格式化选定代码 :ctrl + k / ctrl +f

    选中代码 :shift + 鼠标左键

    多行同时添加内容(光标) :ctrl + alt + up/down

    全局替换:ctrl + shift + h

    当前文件替换:ctrl + h

    打开最近打开的文件:ctrl + r

    打开新的命令窗:ctrl + shift + c

    #vs code 的常用插件

    Auto Rename Tag 修改html标签,自动帮你完成尾部闭合标签的同步修改,和webstorm一样。

    Auto Close Tag 自动闭合HTML标签

    Beautiful 格式化代码的工具

    Dash Dash是MacOS的API文档浏览器和代码段管理器

    Ejs Snippets ejs 代码提示

    ESLint 检查javascript语法错误与提示

    File Navigator 快速查找文件

    Git History(git log) 查看git log

    Gulp Snippets 写gulp时用到,gulp语法提示。

    HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式

    HTML Snippets 超级好用且初级的H5代码片段以及提示

    Debug for Chrome 让vs code映射chrome的debug功能,静态页面都可以用vscode来打断点调试.配饰稍微复杂一点

    Document this Js的注释模板

    jQuery Code Snippets jquery提示工具

    Html2jade html模板转pug模板

    JS-CSS-HTML Formatter 格式化

    Npm intellisense require 时的包提示工具

    Open in browser 打开默认浏览器

    One Dark Theme 一个vs code的主题

    Path Intellisense 自动路径补全.默认不带这个功能

    Project Manager 多个项目之间快速切换的工具

    Pug(Jade) snippets pug语法提示

    React Components 根据文件名创建反应组件代码。

    React Native Tools reactNative工具类为React Native项目提供了开发环境。

    Stylelint css/sass代码审查

    Typings auto installer 安装vscode 的代码提示依赖库,基于typtings的

    View In Browser  默认浏览器查看HTML文件(快捷键Ctrl+F1可以修改)

    Vscode-icons 让vscode资源目录加上图标.必备

    VueHelper Vue2代码段(包括Vue2 api.vue-router2.vuex2)

    Vue 2 Snippets vue必备vue代码提示

    Vue-color vue语法高亮主题

    Auto-Open Markdown Preview markdown文件自动开启预览

    EverMonkey 印象笔记

    atom one dark atom的一个高亮主题(个人推荐)

    #常用的电脑快捷键

    ctrl + shift + delete 快速清除浏览器缓存

    ctrl + alt + delete 快速进入任务管理器页面

    window + L 快速锁定电脑

    window + d 所有窗口最小化

    window + e 打开我的资源管理器(我的电脑)

    window + f 快速打开搜索窗口

    alt + tab 快速查看打开的应用与窗口

    展开全文
  • VSCode 设置自定义快捷键 VSCode 如今成为开发者使用比较多的开发工具。...输入要自定义的快捷键模板代码段如下代码: 进入 .html 后缀的文件中 按快捷键 vh 后按 tab 键 即可实现快速输入代码段 ...

    VSCode 设置自定义快捷键

    VSCode 如今成为开发者使用比较多的开发工具。其提高效率的设置也是一种技巧性工作。针对用户自定义代码段来实现快捷开发。

    工具

    软件:Visual stadio code
    硬件:电脑

    步骤

    1. 文件==>首选项==>用户代码片段

    在这里插入图片描述

    1. 选择代码片段文件 html.json

    在这里插入图片描述

    1. 输入要自定义的快捷键 和 模板代码段如下代码:

    在这里插入图片描述

    1. 进入 .html 后缀的文件中 按快捷键 vue 后按 tab 键 即可实现快速输入代码段

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 26、Stylelint css/sass 代码审查 27、Typings auto installer 安装 vscode 的代码提示依赖库,基于 typtings 的 28、View In Browser 默认浏览器查看HTML文件(快捷键Ctrl+F1可以修改) 29、Vscode-icons 让 vscode ...
  • 原因: 看到上课老师一下就vh+tab出来了Vue模板,而我的就是出不来,我下来查看别人写的博客才找到了方法,希望对后面的你有帮助 配置: file - preference - user snippets 进行模板配置 参考博客:...
  • VSCode的常用快捷键

    2020-01-31 10:33:06
    一、vs code 的常用快捷键 1、注释:  a)单行注释:[ctrl+k,ctrl+c] 或 ctrl+/  b)取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)  c)多行注释:[alt+shift+A]  d)多行注释:/** 2、移动行:...
  • 文章目录场景解决办法1 安装Vetur插件,识别vue文件2 修改vue.json模板代码4 场景 编辑器VSCode .vue 文件一般由<temple>、<script>、<style> 三种标签组成。现在的需求是通过智能提示,生成...
  • vscode如何快捷键一键生成vue模板

    千次阅读 2020-04-18 18:16:37
    二、然后会出现一个输入框,输入vue然后回车 三、会出现一个vue.json的文件 四、然后在该文件内配置如下代码,也可以按照自己的需求配置 vue.json 文件 { // Place your snippets for vue here. Each snippet is ...
  • vscode 快捷键新建vue模板

    千次阅读 2020-02-26 12:25:47
    vue提高开发效率之 快速生成模板文件的方式 开发工具:Visual Studio Code 1、找到用户代码片段设置 2、找到vue配置文件 3、替换模板格式代码 { "Print to console": { "prefix": "vue", "body": [ "<...
  • 一、vs code 的常用快捷键列表 1、注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u) c) 多行注释:[alt+shift+A] d) 多行注释:/** 2、移动行:alt+up/...
  • Stylelint css/sass代码审查 Typings auto installer 安装vscode 的代码提示依赖库,基于typtings的 View In Browser 默认浏览器查看HTML文件(快捷键Ctrl+F1可以修改) Vscode-icons 让vscode资源目录加上图标、...
  • vscode中,在一个空白的页面中通过vh快捷键生成一个vue模板 效果如下: 下面就演示一下是如何实现的 打开VScode→文件→首选项→用户代码片段 点进去之后,选择html.json 将红框部分的注释解开 修改prefix的值,...
  • vscode vue一键代码模板

    2021-02-24 11:07:21
    6.模板输入("prefix":"vue-template",//vue-template是使用这个模板快捷键)完成点击保存(ctrl+s) 7.点击新建页面,测试模板是否可用,如下图:出现提示后,点击回车即可 8.在要修改...
  • [TOC]前言emsp;如果你还不知道这款最强编辑器的话,查看本站热门文章,最强编辑器 VSCode 系列之入门简介。通用无论你用什么语言,都会用得到的插件。...vscode-fileheader顶部注释模板,可自定义作者、时间等信...
  • vscode 配置vue环境 open in browser 默认浏览器打开 快捷键 shift+ alt + b vue 2 snippets vue插件 Vetur -- 语法高亮,智能感知 Auto Rename Tag : 自动完成对称标签修改 Path intellisense: 自动补全路径 ...
  • Vue VSCode Snippets插件前言一、Vue VSCode Snippets插件安装二、使用步骤1.生成vue基本模板代码2.自定义模板3.常用快捷键总结 前言 最近使用了Vscode编辑器写Vue前端代码,发现很坑,很多东西都不会提示,而且...
  • vsCode创建vue模板

    2018-12-07 09:18:18
    1.安装vscode 官网地址:https://code.visualstudio.com/ 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加载 微信图片_20180723174649.png 3.新建...
  • VScode》文件》首选项》用户片段》vue.json(Vue) 模板: { "Print to console":{ "prefix": "vue", "body": [ "<template>", "</template>", "", "<script>", ...
  • vscode 快捷键配置(注释模板、vue文件模板) 1、vscode 文件头部自动生成...2、vscode配置,自动生成vue模板。(输入 vue + 空格 )自动生成文件结构。 详细操作参考: https://blog.csdn.net/weixin_43363871/article
  • vscode生成vue模板无法生效问题

    千次阅读 2020-04-12 22:10:07
    vscode生成vue模板无法生效问题生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表...
  • Vscode生成vue模板

    2021-02-05 15:23:30
    这是我生成vue3的模板 { "Print to console": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "<script>", "import {", "reactive,", "toRefs,...
  • 一、vs code 的常用快捷键 1、注释:  a)单行注释:[ctrl+k,ctrl+c] 或 ctrl+/  b)取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)  c)多行注释:[alt+shift+A]  d)多行注释:/...
  • vscode中添加vue模板

    2020-09-27 14:47:43
    vscode中使用快捷键添加vue模板 vscode中使用vue框架时,每次新建的vue文件都需要把输入一些相同的代码,在这里,我们可以使用输入vue+enter快速生成vue模板。 一、配置vue.json文件 点击左上角"文件(file)",...
  • 新建自己习惯的vue代码块,提高开发速度。 1.左下角设置,或者工具栏里【文件】-【首选项】-【用户代码片段】 2.新建或修改vue.json...以下代码片段可供参考,prefix的值‘s’即为新建vue文件后生成模板的快捷...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 787
精华内容 314
关键字:

vscodevue模板快捷键

vue 订阅