VSCode基本使用

1.下載與安裝

下載地址：https://code.visualstudio.com/Download

安裝：下載了exe的文件后直接安裝即可。

2.常用快捷鍵

命令	說明
F1或Ctrl+Shift+P	主命令框
Ctrl+Shift+N	新開一個VScode編輯器
Ctrl+C -> Ctrl+V	復制當前行
Shift+Alt+F	代碼格式化
Ctrl+Shift+L	同時對選中的內容進行內容匹配后編輯
Ctrl+F	查找
Ctrl+H	查找替換
Ctrl+Shift+F	整個文件夾中查找

 

3.基本使用

3.1VSCode自定義vue文件模板

1）依次打開“文件 ——> 首選項 ——>用戶代碼片段”，輸入html或html.json，回車，在里面添加下面的代碼后保存（這是自定義的，可以根據實際情況修改）

"Print to console": {
            "prefix": "myv",
            "body": [
                "<template>",
                "  <div>",
                "",
                "  </div>",
                "</template>",
                "",
                "<script>",
                "",
                "export default {",
                "  name:'',",
                "  components: {},",
                "  computed: {},",
                "  created() {},",
                "  data() {",
                "      return {",
                "",
                "      }",
                "  },",
                "  methods: {",
                "",
                "  },",
                "}",
                "</script>",
                "",
                "<style scoped>",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }

2）新建一個vue的文件，在開頭輸入myv回車，即可生成模板文件，輸入如圖。

3.2VSCode中代碼提交到git

1）打開從git上拉取的項目，會看到在左下角有一個master，這表示已經和github連接了

 2）選擇v型圖標，輸入代碼的提示，點擊對號將代碼提交到本地倉庫

 3）點擊對號后面的三個點，選擇push，把本地倉庫的代碼提交到遠程倉庫，可能需要輸入github的用戶名和密碼。

 4）每次提交都輸入用戶名和密碼顯得很麻煩，可以進行設置。在命令終端輸入

git config --global credential.helper store

3.3VSCode格式化Vue，代碼會自動加上分號的問題

在對vue文件進行格式化的時候，vscode會在代碼后面自動加上分號，看着不輸入，語法也不通過。解決辦法如下：

打開設置（文件 ——> 首選項 ——>設置）,輸入vetur.format.defaultFormatter.js，把prettier改為prettier-eslint。

3.4VSCode寫VUE代碼 注釋 html出現 //

安裝Vuter插件即可。

3.5VSCode中VUE.JS的HTML代碼如何實現自動補全

1）下載HTML Snippets插件

2）打開File—>Preferences---->settings，輸入:files.associations回車搜索

3）在files.associations{ }里面中加入

"*.ejs":"html",
"*.vue":"html"

3.6自動完成頭部和尾部閉合標簽的同步修改

安裝插件Atuo Rename Tag即可。

3.7配置同步

一台電腦配置好之后，其它的幾台電腦都不用配置，只要登錄一下就搞定。安裝Settings Sync插件。

3.8簡體中文界面

將界面轉換為中文。安裝Chinese (Simplified) Language Pack for Visual Studio Code插件，然后重啟即可。

3.9通過服務器打開html文件

安裝Live Server插件，然后在需要運行的html文件中右鍵，選擇Open with Live Server即可。