工欲善其事，必先利其器祭钉。想要優(yōu)雅且高效的編寫代碼瞄沙，必須熟練使用一款前端開發(fā)工具。但前端開發(fā)工具數(shù)不勝數(shù)慌核，像HBuilder距境、Sublime Text、WebStorm垮卓、Visual Studio Code......等等,其中VSCode以其輕量且強大的代碼編輯功能和豐富的插件生態(tài)系統(tǒng)垫桂，獨受前端工師的青睞。網(wǎng)上有很多vscode的配置以及使用博客粟按，但都沒有本篇那么詳細且全面伪货。
首頁
vscode設置成中文
vscode默認的語言是英文，對于英文不好的小伙伴可能不太友好钾怔。簡單幾步教大家如何將vscode設置成中文碱呼。
- 按快捷鍵“Ctrl+Shift+P”。
- 在“vscode”頂部會出現(xiàn)一個搜索框宗侦。
- 輸入“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用來在出現(xiàn)推薦值時嗜闻，按下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:\\Windows\\System32\\cmd.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下?lián)Q成Command就行了
對于 行 的操作：
- 重開一行：光標在行尾的話，回車即可廊移；不在行尾糕簿，ctrl
+ enter向下重開一行；ctrl+shift + enter則是在上一行重開一行 - 刪除一行：光標沒有選擇內容時狡孔，ctrl
+ x剪切一行懂诗；ctrl +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 + [ 折疊區(qū)域代碼
Ctrl + Shift + ] 展開區(qū)域代碼
Ctrl + / 添加關閉行注釋
Shift + Alt +A 塊區(qū)域注釋
插件安裝
必備插件
1殃恒、View In Browser
在瀏覽器里預覽網(wǎng)頁必備。
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啊送、CSScomb
CSS 書寫順序規(guī)則偿短，這里我推薦騰訊 AollyTeam 團隊的規(guī)范：
http://alloyteam.github.io/CodeGuide/#css-declaration-order?alloyteam.github.io
簡單說下這個插件怎么用：
在項目的根目錄下創(chuàng)建一個名為csscomb.json的文件，然后添加一些配置項馋没。也可以將配置項寫入項目的 package.json 文件中的 csscombConfig 字段昔逗。
至于添加的配置項，CSScomb 提供了示例配置文件：
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json?github.com
其中的 sort-order 就是 CSS 屬性書寫順序篷朵，可以按照自己遵循的規(guī)范設置勾怒，所以我直接替換成了騰訊的。
這個配置文件里面各個字段的作用可以戳這里查看：
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
3鉴扫、GitLens
詳細的 Git 提交日志。
Git 重度使用者必備澈缺，尤其是多人協(xié)作時：哪一行代碼坪创，何時、何人提交都有記錄姐赡。
媽媽再也不用擔心我背鍋了莱预！
4、css-auto-prefix
自動添加 CSS 私有前綴项滑。
5锁施、change-case
轉換命名風格。
6杖们、CSS Peek
定位 CSS 類名悉抵。
7、vscode-json
處理 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 上傳配置
現(xiàn)在手把手教大家配置：
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塘偎，即可同步插件和設置
http-server 開啟一個本地服務
在寫前端頁面中疗涉，經(jīng)常會在瀏覽器運行HTML頁面，從本地文件夾中直接打開的一般都是file協(xié)議吟秩，當代碼中存在http或https的鏈接時咱扣，HTML頁面就無法正常打開，為了解決這種情況涵防，需要在在本地開啟一個本地的服務器闹伪。 本文是利用node.js中的http-server，開啟本地服務，步驟如下：
安裝http-server
在終端輸入： $ npm install http-server -g
開啟 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
關閉 http-server服務
按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關閉服務成功硼补。
??關注+點贊+收藏+評論+轉發(fā)??，原創(chuàng)不易熏矿，鼓勵筆者創(chuàng)作更好的文章
前端書籍已骇、獨家入門學習路線+精品課程、前端進階課程票编、前端大廠寶典褪储、前端面試技巧，前端高級vue源碼解析+react服務端渲染慧域，鲤竹，都可以點擊下面的閑魚鏈接進行購買
也可以添加我的私人微信進行購買：yun1015911204 (請備注：前端碼頭)
