之前一直都是用sublime Text和chrome配合來寫前端的頁面,自從知道了有liveReload這個神奇的插件之后感覺爽翻了啊。好吧跑遠了........
話說最近微軟搞了個VScode,聽說好像很牛逼的樣子,通過擴展通殺各種語言,就沖着信仰去了解了下這個神奇的編輯器到底腫么樣。
下載安裝還是很傻瓜的,直接官網下載安裝包https://code.visualstudio.com/,傻瓜安裝(嗯我的是windows,mac或者linux請參照官網的指示安裝)。
安裝完后VScode自帶了emmet和一些sublime里面常見的插件,不扯了,說正事。
debugger for chrome絕對是前端開發少不了的插件,它可以直接在VScode上調試JavaScript程序(其實我覺得chrome的開發者工具已經很好使了,這個無非就是更裝逼一點而已)。
Ctrl+P 然后輸入
ext install debugger-for-chrome
安裝完后會彈出一個lunch.json配置文件
{ "version": "0.2.0", "configurations": [ { "name": "Launch flex.html", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/flex.html" }, { "name": "Launch Chrome against localhost, with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:8080/flex.html", "sourceMaps": true, "webRoot": "${workspaceRoot}" }, { "name": "Attach to Chrome, with sourcemaps", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] }
name屬性就是在啟動旁邊那里顯示可選擇調試方式的名稱,隨便寫只要能記住就行,根據配置的類型一共有3中不同的調試方式
最簡單的就是第一種不需要服務器的直接lunch打開本地文件,千萬要記得file的路徑一定要寫成${workspaceRoot}/xxx.html,不要寫完整的路徑,否則VScode是找不到外部的JavaScript文件的,最明顯的就是文件在chrome打開了,回到js文件打斷點的時候就會提示Breakpoint ignored because target path not found。
第二種是需要自己搞一個服務器容器比如Apache,比較VScode沒那么聰明,它才不會自己給你建一個臨時服務器,我直接用node的http-server插件,反正不是開發什么大型網站.......這種方式適合有后台數據交互的調試。
第三種attach模式是用chrome的遠程調試API,我還沒試過,官方給的方法是
- Right click the Chrome shortcut, and select properties
- In the "target" field, append
--remote-debugging-port=9222
- Or in a command prompt, execute
<path to chrome>/chrome.exe --remote-debugging-port=9222
在chrome瀏覽器快捷方式后面加上--remote-debugging-port=9222然后雙擊啟動,或者直接命令行輸入chrome的地址加上--remote-debugging-port=9222參數啟動。嘛.....這個我待會再去研究研究怎么弄。
接下來說說live HTML previewer這個插件,本來我是想找找有沒有liveReload插件的,結果沒找到,live HTML previewer有點像dreamwaver里面的拆分模式,就是直接在VScode里面預覽html頁面,這對於初期寫靜態頁面的布局還是很方便的,點擊左邊最下面那個擴展,然后輸入live HTML previewer安裝就行,啟動方式是按F1在輸入Show side preview或者直接按Ctrl+Q,接着按下S。實測這個預覽的渲染好像跟chrome有點不太一樣,慎用。
嗯,順便說一下還有ESlint這種js語法檢查工具,Path Intellisense智能路徑提示等一些比較好用的擴展工具