vscode配置說明文檔
軟體下載下傳
直接在官網進行下載下傳，需要的也可以留言給你發軟體包
Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com
code.visualstudio.comcode.visualstudio.com
首頁
vscode設定成中文
vscode預設的語言是英文，對于英文不好的小夥伴可能不太友好。簡單幾步教大家如何将vscode設定成中文。
- 按快捷鍵“Ctrl+Shift+P”。
- 在“vscode”頂部會出現一個搜尋框。
- 輸入“configure language”，然後回車。
- “vscode”裡面就會打開一個語言配置檔案。
- 将“en-us”修改成“zh-cn”。
- 按“Ctrl+S”儲存設定。
- 關閉“vscode”，再次打開就可以看到中文界面了。
VScode使用者設定
1. 打開設定
檔案--首選項--設定，打開使用者設定。VScode支援選擇配置，也支援編輯setting.json檔案修改預設配置。個人更傾向于編寫json的方式進行配置，下面會附上我個人的配置代碼
這裡解析幾個常用配置項：
（1）editor.fontsize用來設定字型大小，可以設定editor.fontsize : 14;
（2）files.autoSave這個屬性是表示檔案是否進行自動儲存，推薦設定為onFocusChange——檔案焦點變化時自動儲存。
（3）editor.tabCompletion用來在出現推薦值時，按下Tab鍵是否自動填入最佳推薦值，推薦設定為true;
（4）editor.codeActionsOnSave中的source.organizeImports屬性，這個屬性能夠在儲存時，自動調整 import 語句相關順序，能夠讓你的 import 語句按照字母順序進行排列，推薦設定為true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
（5）editor.lineNumbers設定代碼行号,即editor.lineNumbers ：true；
我的個人配置，供參考：
{
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"terminal.integrated.shell.windows": "C:WindowsSystem32cmd.exe",
"git.enableSmartCommit": true,
"git.autofetch": true,
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wpy": "html"
},
//主題顔色
//"workbench.colorTheme": "Monokai",
"git.confirmSync": false,
"explorer.confirmDelete": false,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"editor.wordWrap": "on",
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 2,
//失去焦點後自動儲存
"files.autoSave": "onFocusChange",
// #值設定為true時，每次儲存的時候自動格式化；
"editor.formatOnSave": false,
//每120行就顯示一條線
"editor.rulers": [
],
// 在使用搜尋功能時，将這些檔案夾/檔案排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// 這些檔案将不會顯示在工作空間中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts" //ts編譯後生成的js檔案将不會顯示在工作空中
},
"**/node_modules": true
},
// #讓vue中的js按"prettier"格式進行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue元件中html代碼格式化樣式
"wrap_attributes": "force-aligned", //也可以設定為“auto”，效果會不一樣
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
}
}
常用的快捷鍵
高效的使用vscode,記住一些常用的快捷鍵是必不可少的，我給大家羅列了一些日常工作過程中用的多的快捷鍵。
以下以Windows為主，windows的 Ctrl，mac下換成Command就行了
對于
行的操作：
- 重開一行：光标在行尾的話，回車即可；不在行尾，ctrl
+ enter
shift + enter
- 删除一行：光标沒有選擇内容時，ctrl
+ x
shift + k
- 移動一行：
alt + ↑
alt + ↓
- 複制一行：
shift + alt + ↓
shift + alt + ↑
- ctrl + z 回退
對于
詞的操作：
- 選中一個詞：ctrl
+ d
搜尋或者替換：
- ctrl
+ f
- ctrl
+ alt + f
- ctrl
+ shift + f
通過
Ctrl + `可以打開或關閉終端
Ctrl+P 快速打開最近打開的檔案
Ctrl+Shift+N 打開新的編輯器視窗
Ctrl+Shift+W 關閉編輯器
Home 光标跳轉到行頭
End 光标跳轉到行尾
Ctrl + Home 跳轉到頁頭
Ctrl + End 跳轉到頁尾
Ctrl + Shift + [ 折疊區域代碼
Ctrl + Shift + ] 展開區域代碼
Ctrl + / 添加關閉行注釋
Shift + Alt +A 塊區域注釋
插件安裝
在輸入框中輸入想要安裝的插件名稱，點選安裝即可。安裝後沒有效果，可以重新開機vscode
在浏覽器裡預覽網頁必備。
2、vscode-icons
改變編輯器裡面的檔案圖示
3、Bracket Pair Colorizer
給嵌套的各種括号加上不同的顔色。
4、Auto Rename Tag
自動修改比對的 HTML 标簽。
5、Path Intellisense
智能路徑提示，可以在你輸入檔案路徑時智能提示。
6、Markdown Preview
實時預覽 markdown。
7、stylelint
CSS / SCSS / Less 文法檢查
8、Import Cost
引入包大小計算,對于項目打包後體積掌握很有幫助
9、Prettier
比Beautify更好用的代碼格式化插件
Vue插件
vetur
文法高亮、智能感覺、Emmet等
VueHelper
snippet代碼片段
其它插件
1、CSScombCSS 書寫順序規則，這裡我推薦騰訊 AollyTeam 團隊的規範：
http://alloyteam.github.io/CodeGuide/#css-declaration-orderalloyteam.github.io alloyteam.github.ioalloyteam.github.io
簡單說下這個插件怎麼用：
在項目的根目錄下建立一個名為csscomb.json的檔案，然後添加一些配置項。也可以将配置項寫入項目的 package.json 檔案中的 csscombConfig 字段。
至于添加的配置項，CSScomb 提供了示例配置檔案：
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.jsongithub.com github.comgithub.com
其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規範設定，是以我直接替換成了騰訊的。
這個配置檔案裡面各個字段的作用可以戳這裡檢視：
csscomb/csscomb.jsgithub.com github.comgithub.com
2、Turbo Console Log快捷添加 console.log，一鍵 注釋 / 啟用 / 删除 所有 console.log。這也是我最常用的一個插件
簡單說下這個插件要用到的快捷鍵:
ctrl + alt + l 選中變量之後，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 删除所有 console.log
詳細的 Git 送出日志。
Git 重度使用者必備，尤其是多人協作時：哪一行代碼，何時、何人送出都有記錄。
媽媽再也不用擔心我背鍋了！
4、css-auto-prefix
自動添加 CSS 私有字首。
5、change-case
轉換命名風格。
。
處理 JSON 檔案，用法看圖：
8、Regex Previewer
實時預覽正規表達式的效果。
設定同步
花了一天終于把vscode配置成自己滿意的樣子，如果每換一次電腦就要重新來一次，大家一定會手撕了我。放心，早就幫大家準備好了。Settings Sync，在不同電腦間同步你的插件。
首先要想在不同的裝置間同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上傳到 github 上時, 讓你儲存的那段字元，Gist id 在你上傳插件的那台電腦上儲存着。
先給大家來三個快捷鍵，後面會用到
1、CTRL+SHIFT+P 我也不知道叫什麼，暫且就叫它功能搜尋功能吧
2、ALT+SHIFT+D 下載下傳配置
3、ALT+SHIFT+U 上傳配置
現在手把手教大家配置：
1、安裝Settings Sync
2、登陸Github>settings>Developer settings>personal access tokens>generate new token，輸入名稱，勾選Gist，送出
3、儲存Github Access Token
4、打開vscode，Ctrl+Shift+P打開指令框-->輸入sync-->選擇進階設定-->編輯本地擴充設定-->編輯token
5、Ctrl+Shift+P打開指令框-->輸入sync-->找到update/upload settings，上傳成功後會傳回Gist ID，儲存此Gist ID.
6、在 VSCode 裡，依次打開: 檔案 -> 首選項 -> 設定，然後輸入 Sync 進行搜尋:能找到你gist id
7、若需在其他機器上DownLoad插件的話，同樣，Ctrl+Shift+P打開指令框，輸入sync，找到Download settings，會跳轉到Github的Token編輯界面，點Edit，regenerate token，儲存新生成的token，在vscode指令框中輸入此Token，回車，再輸入之前的Gist ID，即可同步插件和設定
開啟一個本地服務
第一種方式1.安裝Debugger for Chrome插件
2.使用ctrl+`快捷鍵打開終端，然後輸入npm install -g live-server
3.在指令行裡輸入 live-server即可
第二種方式在寫前端頁面中，經常會在浏覽器運作HTML頁面，從本地檔案夾中直接打開的一般都是file協定，當代碼中存在http或https的連結時，HTML頁面就無法正常打開，為了解決這種情況，需要在在本地開啟一個本地的伺服器。 本文是利用node.js中的http-server，開啟本地服務，步驟如下：
1.安裝http-server
在終端輸入： $ npm install http-server -g
2.開啟 http-server服務
終端進入目标檔案夾，然後在終端輸入：
$ http-server -c-1 （⚠️隻輸入http-server的話，更新了代碼後，頁面不會同步更新）
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.8.196:8080
Hit CTRL-C to stop the server
3.關閉 http-server服務
按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關閉服務成功。