VS Code配置紀錄


Posted by Andy Tsai on 2022-01-21

用了Web Storm將近一年,最近重回VS Code懷抱,
Web Storm是IDE,好處就是開箱即用,不用裝什麼額外套件,該有的都幫你用好了。
而VS Code是Editor,比較輕量,一開始沒有Web Storm那樣豐富的功能,
但是只要裝一些好用的套件,加上適當的配置,大部分的功能VS Code也能達到。

這篇記錄我個人的VS Code配置

套件

  • Auto Rename Tag
  • Code Spell Checker
    拼字檢查,裝了這個後會發現專案中很多拼錯的單字xd
  • Color Highlight
  • Git Graph
  • Git Histrory
  • Git Lens
  • Expand Selection To Scope
  • Gremlins tracker
    檢查程式中是否有不可見字元(防被同事坑!?)
  • Guides
  • Prettier
  • Todo Tree
  • Image preview
  • CodeMetrics
    檢測函式複雜度

Setting

{
    "files.autoSave": "onWindowChange",
    // 自動儲存,用慣Web Storm一定要開的
    "window.zoomLevel": 0.8,
    "workbench.editor.enablePreview": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.fontFamily": "'Fira Code', 'Source Code Pro', Consolas, 'Microsoft JhengHei', 'Courier New', monospace",
    // 字體選用可連字的Fira Code
    "editor.fontLigatures": true,
     // 開啟連字功能
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.minimap.enabled": false,
    // 關閉右側minimap功能,這主要是用於快速移動頁面,但我沒什麼在用,不如關掉釋放更多可視空間
}

總結

以上配置完已經能做到Web Storm大部分功能了,再加上ESLint,代碼檢查方面也不會輸Web Storm太多,
但是還是有些目前VS Code沒法做到,像是檔案結構導覽、Git三視窗Marge、變量 函式的跨檔案跳轉等等,不過也已經足夠用了,畢竟免費的嘛,能做到這樣已經很棒了。

VS Code、Web Storm兩個都是非常好用的開發工具,
如果你不喜歡花時間搞配置、裝套件,或是想追求最頂級的開發工具,那花點小錢買Web Storm應該很值得。如果是想用免費的,那VSCode應該目前是最好用的Code Editor了。


#VS Code







Related Posts

信用卡資訊分享 || 2020 下半年

信用卡資訊分享 || 2020 下半年

使用 Golang 打造 Discord 機器人 (一)

使用 Golang 打造 Discord 機器人 (一)

[ CSS 03 ]  盒模型(box model)與定位(position)

[ CSS 03 ] 盒模型(box model)與定位(position)


Comments