---
# System prepended metadata

title: vscode安裝

---

# vscode安裝
https://juejin.im/post/5cb87c6e6fb9a068a03af93a
https://www.itread01.com/content/1546966208.html
# terminal

f1後打上shell選擇bash

wrapIndividualLinesWithAbbreviation 多選文字創建元素

# 工具類
Auto Close Tag (自動閉合)

Auto Import (自動引入)
 
AutoFileName (自動填入檔案路徑)

Chinese (Traditional) Language Pack for Visual Studio Code (中文)
 
Code Spell Checker (檢查錯字)

Spell Right(上面依賴)

Comment Translate (翻譯)

Copy filename (複製資料夾名稱)

Debugger for Chrome 

Live Server

TabNine (自動補全)

Css Peek (查樣式)

Path Intellisense (文件目錄提示)

HTML CSS support

HTML Snippets

CodeMetrics (檢查function複雜度)

Guides (縮排線條)

Import Cost (依賴包大小檢查)

Highlight Line(下底線)

# 美化
Bracket Pair Colorizer 2 (大框號顏色)

colorize (色碼顏色)


vscode-icons

indent-rainbow (縮排格子顏色)

One Dark Pro(最新使用主題)



# 格式化

Prettier - Code formatter 


# 檔案類
Blueprint - New Files and Folders of Files from Templates (推)

cdnjs (推引入線上cdn)

Live Sass Compiler

npm Intellisense(自動引入npm包)


# Vue

vetur

Vue VSCode Snippets

Vue 2 Snippets

JavaScript (ES6) snippets

# GIT
Git History(查看git)

設定
{
    //base
    "files.autoSave": "afterDelay", //自動存檔
    "window.zoomLevel": -2,
    "editor.fontFamily": "monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 16,
    "editor.lineHeight": 22, //縮排空格
    "editor.formatOnSave": false, //自動存檔
    "editor.wordWrap": "on", //自動換行
    "editor.letterSpacing": 2,
    "editor.tabSize": 4,
    "editor.fontWeight": "600",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    // 編輯器設定
    "workbench.colorCustomizations": {
        "tab.activeForeground": "#0aff99",
        "editorBracketMatch.background": "#4972a8",
    },
    "vsicons.dontShowNewVersionMessage": true,
    //base
    //others
    "blueprint.templatesPath": [
        "../blueprint-templates"
    ], //模組資料夾參考路徑
    "editor.renderIndentGuides": true,
    "guides.enabled": false,
    "highlightLine.borderColor": "yellow",
    //others
    //liveSassCompile
    "liveSassCompile.settings.formats": [
        {
            "extensionName": ".css",
            "format": "expanded",
            "savePath": "~/../css"
        },
        {
            "extensionName": ".min.css", //正式版副檔名為min.css
            "format": "compressed", //壓縮成一行css，正式版本
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 5 versions",
        "Firefox >= 45",
        "iOS >=8",
        "Safari >=8",
        "ie >= 10"
    ],
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.ignoreFiles": [
        "db.json" // 加上
    ],
    //liveSassCompile
    //prettier
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.printWidth": 80,
    "prettier.trailingComma": "es5",
    "prettier.tabWidth": 4,
    "prettier.arrowParens": "always",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "tabnine.experimentalAutoImports": true,
    //prettier
    "npm-intellisense.importES6": true,
    "npm-intellisense.importQuotes": "'",
    "npm-intellisense.importLinebreak": ";\r\n",
    "npm-intellisense.importDeclarationType": "const",
    "workbench.colorTheme": "One Dark Pro",
}