開胃菜
我們在用 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 命令，可以很方便的打開文件或文件夾，同樣是修改上述文件
自動複製終端中選擇的文本
有時候我們在啟動項目時會出現一些報錯需要通過百度去解決
這時候就需要去搜索一些終端列印的關鍵字，配置自動複製的話就可以省去手動複製的操作
"terminal.integrated.copyOnSelection": true
禁止通過拖放來移動選中內容
有時候選中了一些文本，但因為誤觸不小心把代碼移到了別處，如下
這個因人而異，我是不需要這個功能，反而有時候因為誤觸讓我很困惑，配置如下
// 改为false即可禁止拖动
"editor.dragAndDrop": false
代碼提示與跳轉
package.json
有些包的版本使用了^修飾，導致版本並未完全鎖定，有時候可能某個小版本有問題需要我們排查
這個時候就需要知道我們具體安裝了哪個版本
通過下圖我們可以知道當前安裝的版本，最新版本，也可以直接進入查看細節
我們知道有些包是間接依賴的，並沒有列在 package.json 里，我想知道 node_moduels 里到底有沒有，可以直接搜索，以 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 為宇宙級編輯器(#.#)。
也許，在程式設計師的世界，收費的並不一定就是最好的吧!!!