1、安装
下载网址：https://code.visualstudio.com/Download
选择自己的系统选择安装文件 windows or mac
每个电脑的初始化快捷方式可能不一样，
可以通过打开设置界面查询
2、查看初始化键盘快捷方式
首选项 -> 键盘快捷方式
image.png
打开后 可以通过搜索找关键字，也可更改默认快捷键设置
image.png
3、设置ctrl+B
打开chrome浏览器预览HTML
- 打开扩展插件
command+shift+X
搜索view in browser 安装 （注意别下错）
image.png -
安装完之后打开键盘快捷方式（1里有介绍）
搜索view in browser 会发现多出一条
我们可以根据自己习惯修改
image.png
4、打开终端
- VScode mac系统没有快捷打开终端，可以默认
command+shift+Y打开控制台，就看到终端了
image.png
5、停止终端运行
ctrl+c
6、vue高亮提示插件
vetur ESLine
7、创建vue快捷模版
首选项->用户代码片段 选择vue 回车
打开vue.json 输入代码：
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"<div class=\"home\">",
"<h1>{{ msg }}</h1>",
"</div>",
"</template>",
"<script>",
"export default {",
"name: 'home',",
"data () {",
"return {",
"msg: 'Home'",
"}",
"}",
"}",
"</script>",
"<!-- Add \"scoped\" attribute to limit CSS to this component only -->",
"<style scoped lang=\"scss\">$color: #dd3333;",
"h1 {",
"text-align: center;",
"font-weight: normal;",
"color: $color;",
"}",
"</style>"
],
"description": "Log output to console"
}
}
使用：vue tab键
8、格式化文本
mac系统默认shift+alt+F
9、vscode中的vue文件中emmet进行tab键不起作用
设置方法:
文件-首选项-设置
image.png
在右边设置代码
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
ctrl+s保存，自动生效
10、每次打开文件会覆盖窗口中的文件，解决办法
-
1、打开文件是双击就好啦
因为单机的时候
image.png
是斜体，属于预览模式
双击或者编辑之后，就可以啦
image.png -
2、更改设置
文件->首选项->设置
找到workbench.editor.enablePreview
image.png
改成：
"workbench.editor.enablePreview": false,
就可以啦
11、vue 在vs code格式化问题
更改设置
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
"vetur.format.defaultFormatter.js": "vscode-typescript",
解决格式化后 双引号报错问题
"vetur.format.defaultFormatter.html": "js-beautify-html"
解决vue 里的html不能格式化问题
