# **VScode**
## vscode插件安裝
* **Atom One Dark Theme** 主題
* **VSCode Great Icons** 圖標主題
* **Beautify 美化vscode** 代碼
* **Bracket Pair Colorizer** 每一對括號用不同顏色區別 （括號強迫癥必備）
* **cssrem** 將css中的px自動轉換為rem.再也不用計算器了
* **Code Runner node，python** 等代碼不必開命令行即可運行
* **Eslint** 語法檢測
* **Git History** git 提交歷史
* **GitLens** 在代碼中顯示每一行代碼的提交歷史
* **HTML CSS Support** vscode對html，css文件支持，便于你快速書寫屬性
* **Path Intellisense** 路徑識別苦戰，比如書寫圖片路徑時。遺憾就是，對webpack項目中的路徑別名無法擴展
* **Prettier** 格式化，使用標準風格，快捷鍵 alt+shift +F
* **Vetur** 添加對.vue后綴文件的快速書寫支持。
* **Vue 2 Snippets** 快速新建vue頁面
* **language-stylus** CSS預處理器styl后綴文件的識別擴展
* **EditorConfig for VS Code** 編輯器統一配置
*****
## vscode代碼配置
```
"editor.tabSize": 2,
"editor.lineHeight": 20,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.fontSize": 14,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
// 是否允許自定義的snippet片段提示,比如自定義的vue片段開啟后就可以智能提示
"editor.snippetSuggestions": "top",
// "atomKeymap.promptV3Features": true,
// "team.showWelcomeMessage": false,
"workbench.iconTheme": "vscode-great-icons",
"workbench.colorTheme": "Atom One Dark",
"workbench.startupEditor": "newUntitledFile",
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"files.trimTrailingWhitespace": true,
// vetur插件格式化使用beautify內置規則
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.validation.template": false,
// VScode 文件搜索區域配置
"search.exclude": {
"**/dist": true,
"**/src": true,
"**/.git": true,
"**/.gitignore": true,
"**/.editorconfig": true,
"**/.eslintrc.js": true,
"**/.package.json": true,
"**/.vue.config.js": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},
// 排除文件搜索區域，比如node_modules(貼心的默認設置已經屏蔽了)
"files.exclude": {
"**/.idea": true,
"**/yarn.lock": true,
"**/tmp": true
},
// 配置文件關聯，以便啟用對應的智能提示，比如wxss使用css
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 配置emmet是否啟用tab展開縮寫
"emmet.triggerExpansionOnTab": true,
// 配置emmet對文件類型的支持，比如vue后綴文件按照html文件來進行emmet擴寫
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
// xml類型文件默認都是單引號，開啟對非單引號的emmet識別
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加對emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact"
},
// 是否開啟eslint檢測
"eslint.enable": false,
// 文件保存時，是否自動根據eslint進行格式化
"eslint.autoFixOnSave": false,
// eslint配置文件
"eslint.options": {
"plugins": [
"html",
"javascript",
{
"language": "vue",
"autoFix": true
},
"vue"
]
},
// eslint能夠識別的文件后綴類型
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
],
// 格式化快捷鍵 shirt+alt+F
// prettier進行格式化時是否安裝eslint配置去執行，建議false
"prettier.eslintIntegration": true,
// 如果為true，將使用單引號而不是雙引號
"prettier.singleQuote": true,
// 細節,配置gitlen中git提交歷史記錄的信息顯示情況
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 開啟apicloud在vscode中的wifi真機同步
// "apicloud.port": "23450",
// 設置apicloud在vscode中的wifi真機同步根目錄
// "apicloud.subdirectories": "/apiclouduser",
// git是否啟用自動拉取
"git.autofetch": true,
// node調試服務，根據vue項目src文件夾配置
"launch": {
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node.js",
"program": "${file}"
}
// {
// "type": "chrome",
// "request": "launch",
// "name": "vuejs: chrome",
// "url": "http://localhost:8080",
// "webRoot": "${workspaceFolder}/src",
// "breakOnLoad": true,
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
],
"compounds": []
}
```
