vsCode快捷键及与vue相关的快捷键

代码格式化:Shift+Alt+F；向上或向下移动一行:Alt+Up 或 Alt+Down向上或向下复制一行:Shift+Alt+Up 或 Shift+Alt+Down在当前行下方插入一行:Ctrl+Enter在当前行上方插入一行:Ctrl+Shift+Enter查找：Ctrl + F查找和替换：Ctrl + H选中多个内容：shift+ 鼠标左键多行编辑：alt + 鼠标左键侧边栏显示或隐藏：

sunflowerForest

6763人浏览 · 2022-03-01 00:36:21

sunflowerForest · 2022-03-01 00:36:21 发布

代码格式化: 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文件：
在这里插入图片描述
按下回车键，工作区出现我们刚刚定义的用户代码片段：

View Design

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

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport