1耕赘、安裝
下載網(wǎng)址：https://code.visualstudio.com/Download
選擇自己的系統(tǒng)選擇安裝文件 windows or mac
每個(gè)電腦的初始化快捷方式可能不一樣辩棒，
可以通過(guò)打開(kāi)設(shè)置界面查詢(xún)
2、查看初始化鍵盤(pán)快捷方式
首選項(xiàng) -> 鍵盤(pán)快捷方式
image.png
打開(kāi)后 可以通過(guò)搜索找關(guān)鍵字羡玛，也可更改默認(rèn)快捷鍵設(shè)置
image.png
3、設(shè)置ctrl+B
打開(kāi)chrome瀏覽器預(yù)覽HTML
- 打開(kāi)擴(kuò)展插件
command+shift+X
搜索view in browser 安裝 （注意別下錯(cuò)）
image.png -
安裝完之后打開(kāi)鍵盤(pán)快捷方式（1里有介紹）
搜索view in browser 會(huì)發(fā)現(xiàn)多出一條
我們可以根據(jù)自己習(xí)慣修改
image.png
4宗苍、打開(kāi)終端
- VScode mac系統(tǒng)沒(méi)有快捷打開(kāi)終端稼稿，可以默認(rèn)
command+shift+Y打開(kāi)控制臺(tái)，就看到終端了
image.png
5讳窟、停止終端運(yùn)行
ctrl+c
6让歼、vue高亮提示插件
vetur ESLine
7、創(chuàng)建vue快捷模版
首選項(xiàng)->用戶(hù)代碼片段 選擇vue 回車(chē)
打開(kāi)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系統(tǒng)默認(rèn)shift+alt+F
9谋右、vscode中的vue文件中emmet進(jìn)行tab鍵不起作用
設(shè)置方法:
文件-首選項(xiàng)-設(shè)置
image.png
在右邊設(shè)置代碼
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
ctrl+s保存，自動(dòng)生效
10补箍、每次打開(kāi)文件會(huì)覆蓋窗口中的文件改执，解決辦法
-
1、打開(kāi)文件是雙擊就好啦
因?yàn)閱螜C(jī)的時(shí)候
image.png
是斜體坑雅，屬于預(yù)覽模式
雙擊或者編輯之后辈挂，就可以啦
image.png -
2、更改設(shè)置
文件->首選項(xiàng)->設(shè)置
找到workbench.editor.enablePreview
image.png
改成：
"workbench.editor.enablePreview": false,
就可以啦
11裹粤、vue 在vs code格式化問(wèn)題
更改設(shè)置
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
"vetur.format.defaultFormatter.js": "vscode-typescript",
解決格式化后 雙引號(hào)報(bào)錯(cuò)問(wèn)題
"vetur.format.defaultFormatter.html": "js-beautify-html"
解決vue 里的html不能格式化問(wèn)題
