開胃菜
我們在用 vscode 寫程式碼時常常需要選中文字，比如下圖
但絕大多數情況下我們想選中的是整個類別名稱，如下圖
其實這個就牽涉到了 vscode 的分詞機制，它認為 - 應該截斷文字
其實不止 -，還有其他字元都被 vscode 認為是分隔符號
所以貼心的它提供了如下設定
{
// 如下是被vscode認為是分隔符號的字元
// 我們在設定中搜尋editor.wordSeparators
// 然後根據自己的需要刪除不想要的分隔符號即可
// 例如刪除@，這樣我們就可以直接選中less變數和裝飾器如@xxx
"editor.wordSeparators": "`~#!@$%^&*()-=+[{]}\\|;:'\",<>/?."
}
我把 webstorm 的設定全看了一遍，沒有找到類似設定，如果有大佬知道怎麼在 webstorm 設定的還請留言區留言指教
如果你覺得上方這種小設定可以提升你的程式碼編寫效率以及幸福感，那就繼續往下看吧，一定不會讓你失望>_<
與 vscode 並不美麗的邂逅
本人是透過 Java 入門程式設計的，接觸的第一個編輯器是 ecilpse，後來 idea 越來越紅，讓我第一次接觸到了 jetbrains 家的編輯器，剛開始使用 idea 時我就受到了深深的震撼，原來編輯器之間亦有差距。後來機緣巧合成為前端，第一次接觸到同為 jb 家出品的真正的前端編輯器 webstorm，由於 idea 使用得很熟，所以基本無縫切換。
因為本人一直對數學很感興趣，小時候就參加過奧數比賽，接觸過一些演算法題，再加上有 java 開發經驗，所以 typescript 上手也很快且很感興趣。因為擅長這兩項，所以即使學歷平庸，甚至都不是電腦相關科系，但仍然可以得到 jz 及 la 的面試官認可並與他們成為同事
猶記得剛進 jz 的時候，因為公司有提供正版 jetbrains 開發工具，但我發現身邊的同事都在使用免費的 vscode，所以讓我非常詫異，為什麼放著 webstorm 不用，都去用 vscode。肯定是收費的更好用啊！所以小組內只有我一個人在使用 webstorm，後來因為安全原因我們組必須要安裝一個擴充功能，但是一開始只有 vscode 版本的，也就意味著必須要使用 vscode，我有嘗試使用，但是發現它就像一張白紙一樣，令我很不習慣，所以我拒絕使用，甚至和 mentor 吵了一架。
現在想來，估計是我當初付費購買的時候就已經被它給 CPU 了，為了說服自己不是冤大頭，自己也在催眠自己吧。在此不得不感謝那位 mentor，我當時應該是走火入魔了，但她仍然不離不棄，甚至找了心理部門的同事給我做心理輔導及擴充功能開發組的同事為我講解 vscode 的相關設定，讓開發更有效率。在此，對生命中遇到的那些給予過我幫助的人，說一聲謝謝——這個世界並不溫柔，但有些人真的很溫柔^_^
話不多說，下面進入正題。因為前端開發領域各不相同，所以我會進行分類講解。
通用
字串裡的檔案路徑快速跳轉到對應檔案中
有些字串裡的檔案路徑支援 cmd+點選跳轉。如大多數的匯入陳述句，見下圖
但其他位置的字串裡的檔案路徑大多不支援跳轉，如下圖
安裝擴充功能
https://marketplace.visualstudio.com/items?itemName=duXing.quick-go-to-selected-file-path
將滑鼠游標放到包含檔案路徑的字串上，使用 cmd + e（Windows 系統 ctrl + e）
即可彈出最匹配的檔案查詢，就我使用的情況來看，第一個總是最匹配的。
如果預設行為不符合，我們可以手動選取字串，它就會按我們選擇的字串精確搜尋
如果這個快速鍵不符合你的要求，可以自行修改
更快捷清晰的列印除錯
有時候我們為了排查問題，需要列印一些東西，其實大部分情況下這屬於一種模板操作
如下圖，複製要列印的變數，然後輸入自訂程式碼片段
"log列印": {
"prefix": "clog",
"body": ["console.log('[ $CLIPBOARD ] >', $CLIPBOARD)$0"],
"description": "log列印",
"scope": "typescript,typescriptreact,javascript,javascriptreact"
},
其實可以透過設定鉅集一步完成
也可以安裝擴充功能實現，類似的擴充功能有很多
我舉其中一個，感興趣的可以自行搜尋 console 關鍵字就行
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
在此順便推薦一個非常好用的 vscode 程式碼片段產生工具
https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode
舉個例子，把自己常用的程式碼片段或 webstorm 裡好用的程式碼片段轉移過來
清晰的程式碼高亮
檢視程式碼時不需要進入對應檔案，甚至都不需要滑鼠 hovre 就能知道一段程式碼到底是什麼型別
看到紫色的加粗屬性我就知道它是唯讀的
看到綠色斜體我就知道它是列舉，紫色斜體是列舉值
看到黃色底線我就知道它是被 async 修飾的方法，我下意識就會考慮到要不要加 await 呼叫，雖然 eslint 之類的也能偵測到，但它只會一刀切地全部警告。實際上並不一定要加 await 修飾，全部都警告一定是好的嗎？無用的警告，甚至錯誤的警告只會影響寫程式碼的心情。它應該表達一種語義，用我喜歡的不同於變數、屬性之類的其他顏色就很好
更快捷的功能入口
檔案總管以及原始碼管理面板裡的功能 tab 是可以拖曳或者隱藏的
可以隱藏不想要的 tab 讓檔案總管更加清爽
也可以把一些常用的 gitlens 的 tab 拖出來，讓 git 檢視空間更大，更清晰
讓資料夾層級更清晰
預設情況下，如果一個資料夾下面只有一個資料夾，那麼這兩個資料夾會合併顯示
如下圖，style 的下層資料夾是 public 嗎？
不，其實是 css，這種不統一的顯示至少會讓我有些困惑
更改如下設定即可顯示為下圖樣子
"explorer.compactFolders": false
快速開啟並利用 vscode 自身強大的功能修改非專案檔案
有時候我們安裝使用一些工具時需要修改設定檔或是 host 檔案之類的，那些文章一般都會說使用 vim 之類的指令，說實話真的很難用，不僅看著不清晰，修改更是不方便。如下圖
其實 vscode 提供了一個 code 指令，可以很方便地開啟檔案或資料夾，同樣是修改上述檔案
自動複製終端機中選取的文字
有時候我們在啟動專案時會出現一些報錯需要透過 Google 去解決
這時候就需要去搜尋一些終端機列印的關鍵字，設定自動複製的話就可以省去手動複製的操作
"terminal.integrated.copyOnSelection": true
禁止透過拖放來移動選取內容
有時候選取了一些文字，但因為誤觸不小心把程式碼移到了別處，如下
這個因人而異，我是不需要這個功能，反而有時候因為誤觸讓我很困惑，設定如下
// 改為false即可禁止拖動
"editor.dragAndDrop": false
程式碼提示與跳轉
package.json
有些套件的版本使用了 ^ 修飾，導致版本並未完全鎖定，有時候可能某個小版本有問題需要我們排查
這個時候就需要知道我們具體安裝了哪個版本
透過下圖我們可以知道目前安裝的版本，最新版本，也可以直接進入檢視細節
我們知道有些套件是間接依賴的，並沒有列在 package.json 裡，我想知道 node_modules 裡到底有沒有，可以直接搜尋，以 lodash 為例，如下圖
Vue
屬性與方法等提示和跳轉
css 類別名稱提示和跳轉
vuex 跳轉
檔案路徑提示與跳轉
React
本人主用 react，個人認為 vscode 對 react 的支援比 vue 更好，上面 vue 能做到的， react 也都能做到，就不贅述了
這裡簡單再舉個 css 的例子
順便就此說一個相關的，屬性的值，如 className 到底是字串還是 jsx 運算式，vscode 預設是自動推斷的，也就是說 className 預設是字串。
由此就出現了一個問題，比如本人專案中使用的都是 cssmodule，其實需要輸入 jsx 運算式。其實倒不如這樣說，絕大多數屬性值，包括 className，其實我想輸入的都是 jsx 運算式，可以進行如下設定
"javascript.preferences.jsxAttributeCompletionStyle": "braces",
"typescript.preferences.jsxAttributeCompletionStyle": "braces"
話說 webstorm，你連大小寫都不認識了嗎，這樣會生效嗎，你還**跳轉？？？真是！
這裡就不得不說 webstorm 的一大缺點，總是喜歡強行提示，給人一種彷彿很智慧的感覺。所以很吃效能，容易卡頓
vscode 不僅可以正確提示，對於錯誤也有很清晰的解釋，並且提供了解決方案
結語
作為一個使用 webstorm 遠超兩年半的開發者，vscode 僅用半個月就透過它強大的程式碼提示與搜尋及程式碼跳轉讓我有更加高效的開發效率，難怪大公司的員工可以免費使用的情況下都不願意看 webstorm 一眼，基本都在使用 vscode。
本人最近在準備升遷資料，所以有點忙。且由於設定稍微有點多，為了不耽誤大家閱讀，我只截取了一部分功能。
如果讀者老爺有遇到什麼痛點都可以在留言區留言，我會一一解決，請相信我的能力！等我升遷之後基本上就不用寫程式碼了，到時候會把文章補齊並且就 vscode 的技巧開個專題。
俗話說，工欲善其事，必先利其器。有一個趁手的編輯器可以極大提升自己的開發效率及幸福感。畢竟跟編輯器相處的時間甚至比跟物件相處的時間還要長 ╮(╯▽╰)╭。
webstorm 在某些人眼裡或許很好用，但我願稱 vscode 為宇宙級編輯器(#.#)。
也許，在程式設計師的世界，收費的並不一定就是最好的吧！！！