VSCode安裝與配置

安裝

在vscode官網下載版本安裝。

配置

經常使用插件

1. HTML Snippets： H5代碼片斷以及提示
2. Auto Close Tag : 匹配標籤，關閉對應的標籤。
3. Auto Rename Tag : 當修改HTML/XML標籤時，會自動修改與之對應的開始/結束標籤。
4. vscode-icon：讓 vscode 資源樹目錄加上圖標。
5. Path Intellisense：路徑智能提示。
6. Eslint：代碼檢查。
7. Settings Sync：VSCode設置同步到Gist。
8. Document This:生成js 的註釋模板，不過最新版的vscode已原生支持（命令爲/**+回車）。
9. Beautify：經過配置.jsbeautifyrc文件，能夠格式化 javascript, JSON, CSS, Sass, 和HTML文件。

Vue相關插件

1. vetur：語法高亮、智能感知、Emmet等。
2. VueHelper：Vue代碼智能提示（包括Vue、vue-router、vuex）。

自定義配置文件

打開文件->首選項->設置，就會進入到 settings.json 文件中，在左側是VSCode默認的配置，在窗口右側能夠進行一系列的配置。如下是個人自定義配置

{
    "workbench.colorTheme": "Monokai",
    "workbench.iconTheme": "vscode-icons",
    
    //用於在Vue中體驗Emmet
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    
    //配置Eslint
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    
    //設置字體大小
    "editor.fontSize": 18,
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    //Vetur默認使用 eslint-plugin-vue來檢測 <template>,關閉該檢測
    "vetur.validation.template": false,
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/.vscode": true,
        "**/.idea": true
    },
    //配置能夠格式化的文件
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    }
}

打開文件->首選項->鍵盤快捷方式，點擊keybindings.json修改快捷鍵(使用HookyQR.beautify的前提是安裝了beautify)：

[
  { "key": "ctrl+shift+f","command": "HookyQR.beautify","when": "editorTextFocus"},
  { "key": "ctrl+shift+/", "command": "editor.action.blockComment"}
]

問題

支持vue文件的ESLint

1. 首先全局安裝eslint：npm install -g eslint。
2. 安裝eslint插件。

3. 打開文件->首選項->設置，配置

   "eslint.validate": [
         "javascript",
         "javascriptreact",
         "html",
         "vue"
     ]

4. 其餘默認使用webpack腳手架文件內容。

Settings Sync的使用

上傳配置到gist

1.在vscode按下Shift + Alt + u快捷鍵，自動打開gist建立頁面，在github頁面上建立gist。

2.回到vscode,將建立後gist的key輸入vscode的框中，回車。

3.建立成功可看到如下畫面，記錄下gist ID。

4.再按Shift + Alt + u快捷鍵就是同步數據。

下載配置到本地

1.Shift + Alt + D打開輸入框，輸入gist ID。

2.配置同步成功可看到如下畫面。

更新於2019.2.19

將vscode更新至最新版1.31.1版本後，界面默認顯示英文，默認的用戶設置配置文件找不到。

界面顯示改爲中文

1. 安裝Chinese (Simplified) Language Pack for Visual Studio Code插件
2. Ctrl+Shift+P 打開命令面板輸入lang，選擇
   
3. 把」locale」:」en」改爲」locale」:」zh-cn」.保存文件重啓軟件便可。

默認的用戶設置配置文件

2. 添加"workbench.settings.useSplitJSON": true
3. 重啓vscode