代码格式化: Shift+Alt+F；

向上或向下移动一行: Alt+Up 或 Alt+Down

向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down

在当前行下方插入一行: Ctrl+Enter

在当前行上方插入一行: Ctrl+Shift+Enter

查找：Ctrl + F

查找和替换：Ctrl + H

选中多个内容：shift + 鼠标左键

多行编辑：alt + 鼠标左键

侧边栏显示或隐藏： Ctrl+B

vue文件相关快捷方式：
1、工作区输入"<v"可快速生成vue文件基础模板


<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

2、可配置用户代码片段：
在这里插入图片描述

{
	"insert default code to new html": {
		"scope": "",
		"prefix": "dc",
		"body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
                "<head>",
                    "\t<meta charset=\"UTT-8\">",
                    "\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">",
                    "\t<!-- <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"> -->",
                    "\t<title>el与data的两种写法</title>",
                    "\t",
                    "\t<!-- 引入Vue -->",
                    "\t<!-- 开发环境版本，包含了有帮助的命令行警告 -->",
                    "\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
                "</head>",
                "<body>",
                    "\t<!-- 准备一个容器 -->",
                    "\t<div id=\"root\">",
                        "\t\t<h1>你好，{{name}}</h1>",
                    "\t</div>",
                "</body>",
                "<script type=\"text/javascript\">",
                    "\tVue.config.productionType = false;//阻止vue在启动时生成生产提示",
                    "\tconst vm = new Vue({",
                        "\t\tel: '#root',",
                        "\t\tdata: {",
                            "\t\t\tname: 'Hello vue'",
                        "\t\t}",
                    "\t})",
                "</script>",
            "</html>",
		],
		"description": "insert code to a new html"
	}
}

值得注意得是：“prefix”: “dc”, prefix字段代表了快捷键匹配，可以自己定义。
这时候，让我们来新建一个vue文件：
在这里插入图片描述
按下回车键，工作区出现我们刚刚定义的用户代码片段：
在这里插入图片描述

# vscode # vue.js # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign