1、安裝

下載網(wǎng)址：https://code.visualstudio.com/Download
選擇自己的系統(tǒng)選擇安裝文件 windows or mac

 每個(gè)電腦的初始化快捷方式可能不一樣，
可以通過打開設(shè)置界面查詢

2、查看初始化鍵盤快捷方式

  首選項(xiàng)  ->  鍵盤快捷方式

image.png

打開后 可以通過搜索找關(guān)鍵字，也可更改默認(rèn)快捷鍵設(shè)置

image.png

3、設(shè)置ctrl+B

打開chrome瀏覽器預(yù)覽HTML

• 打開擴(kuò)展插件 command+shift+X
  搜索view in browser 安裝 （注意別下錯(cuò)）
  
  image.png

• 安裝完之后打開鍵盤快捷方式（1里有介紹）
  搜索view in browser 會發(fā)現(xiàn)多出一條
  我們可以根據(jù)自己習(xí)慣修改

  
  
  image.png

4、打開終端

• VScode mac系統(tǒng)沒有快捷打開終端，可以默認(rèn)command+shift+Y打開控制臺，就看到終端了
  
  image.png

5、停止終端運(yùn)行

ctrl+c

6、vue高亮提示插件

vetur ESLine

7、創(chuàng)建vue快捷模版

首選項(xiàng)->用戶代碼片段 選擇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系統(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保存，自動生效

10、每次打開文件會覆蓋窗口中的文件，解決辦法

• 1、打開文件是雙擊就好啦
  因?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格式化問題

更改設(shè)置

   "eslint.autoFixOnSave": true,
  
   "eslint.validate": [
       "javascript",{
           "language": "vue",
           "autoFix": true
       },"html",
       "vue"
   ],
   "vetur.format.defaultFormatter.js": "vscode-typescript",

解決格式化后 雙引號報(bào)錯(cuò)問題

    "vetur.format.defaultFormatter.html": "js-beautify-html"

解決vue 里的html不能格式化問題