建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Visual Studio Code（也被稱(chēng)為VSCode，https://code.visualstudio.com/）是一款功能強(qiáng)大的輕量級(jí)跨平臺(tái)桌面源代碼編輯器。由于其內(nèi)置開(kāi)發(fā)工具支持TypeScript和Chrome開(kāi)發(fā)者工具，這款編輯器讓人越用越喜歡。
站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到恒山網(wǎng)站設(shè)計(jì)與恒山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋恒山地區(qū)。
每個(gè)人都能使用和修改的無(wú)限擴(kuò)展的開(kāi)放源代碼，誰(shuí)不愛(ài)呢？希望這篇文章能幫你找到擴(kuò)充開(kāi)發(fā)工具箱的新工具。
雖然下列工具并不都是JavaScript語(yǔ)言專(zhuān)用，但它們都是JavaScript開(kāi)發(fā)者會(huì)感興趣的。以下是2019年JavaScript開(kāi)發(fā)者的27個(gè)神奇的VSCode工具。
1. 項(xiàng)目代碼段
第一個(gè)是由VSCode內(nèi)置的用戶(hù)代碼段（https://code.visualstudio.com/docs/editor/userdefinedsnippets）衍生而來(lái)的項(xiàng)目代碼段（https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets）。
這項(xiàng)功能能讓開(kāi)發(fā)人員創(chuàng)建自己的代碼段，并在項(xiàng)目中重復(fù)使用。
但是“重復(fù)使用”到底是什么意思呢？
如果開(kāi)發(fā)人員經(jīng)常編寫(xiě)像下面這樣的樣板代碼：
- import { useReducer } from 'react'
- const initialState = {
- //
- }
- const reducer = (state, action) => {
- switch (action.type) {
- default:
- return state
- }
- }
- const useSomeHook = () => {
- const [state, dispatch] = useReducer(reducer, initialState)
- return {
- ...state,
- }
- }
- export default useSomeHook
開(kāi)發(fā)人員可以直接將這段代碼放到“用戶(hù)代碼段”中，通過(guò)鍵入自定義前綴來(lái)生成設(shè)置的代碼段，而不用重新寫(xiě)入或是復(fù)制粘貼整個(gè)代碼段。
你可以通過(guò)File > Preferences > User Snippets，點(diǎn)擊New Global Snippets File來(lái)選擇并創(chuàng)建一個(gè)新的開(kāi)放代碼段。
比如說(shuō)，如果要新建一個(gè)TypeScript React項(xiàng)目，可以點(diǎn)擊New Global Snippets File，輸入文件名typescriptreact.json，進(jìn)入新創(chuàng)建的json文件，用TypeScript語(yǔ)言來(lái)創(chuàng)建React應(yīng)用。
又比如，如果要用上文中的案例代碼來(lái)創(chuàng)建一個(gè)新的用戶(hù)代碼段，應(yīng)該這樣做：
- {
- "const initialState = {}; const reducer = (state, action)": {
- "prefix": "rsr",
- "body": [
- "const initialState = {",
- " //$1",
- "}",
- "",
- "const reducer = (state, action) => {",
- " switch (action.type) {",
- " default:",
- " return state",
- " }",
- "}"
- ]
- }
- }
然后，創(chuàng)建一個(gè)以.tsx結(jié)尾的TypeScript文件，輸入前綴rsr之后就會(huì)跳出生成這個(gè)代碼段的建議。
在彈出窗口上點(diǎn)擊tab鍵就能生成這一代碼段：
- const initialState = {
- //
- }
- const reducer = (state, action) => {
- switch (action.type) {
- default:
- return state
- }
- }
這么做的優(yōu)點(diǎn)在于：所有項(xiàng)目都可以使用這一技巧，這對(duì)于一些適用性比較廣的程序段尤其有用。
有些項(xiàng)目會(huì)有不同的設(shè)置。因此，在需要區(qū)分特定的使用情況時(shí)，設(shè)置公開(kāi)文件的代碼段就會(huì)有困難。
比如說(shuō)，當(dāng)項(xiàng)目之間結(jié)構(gòu)不同時(shí)：
- {
- "import Link from components/common/Link": {
- "prefix": "gcl",
- "body": "import Link from 'components/common/Link'"
- },
- "border test": {
- "prefix": "b1",
- "body": "border: '1px solid red',"
- },
- "border test2": {
- "prefix": "b2",
- "body": "border: '1px solid green',"
- },
- "border test3": {
- "prefix": "b3",
- "body": "border: '1px solid magenta',"
- }
- }
對(duì)于“指定文件/文件夾”結(jié)構(gòu)的項(xiàng)目來(lái)說(shuō)，可能這樣就夠了。但是，如果需要開(kāi)發(fā)一個(gè)鏈接成分的路徑為components/Link的項(xiàng)目呢？
請(qǐng)注意在三個(gè)邊界測(cè)試中，邊界值要用單引號(hào)框?。篵order: '1px solid red'。
這對(duì)于JavaScript來(lái)說(shuō)是非常有效的。但是，如果使用樣式化組件作為樣式化方案，原來(lái)的語(yǔ)法規(guī)則就不再適用了，因?yàn)闃邮交M件應(yīng)用的是標(biāo)準(zhǔn)CSS語(yǔ)法！
這就到了項(xiàng)目代碼段大放光彩的時(shí)刻了。
項(xiàng)目代碼段讓程序員能夠區(qū)分項(xiàng)目層次和工作區(qū)層次的代碼段，這樣就能避免代碼段沖突或者污染其他項(xiàng)目，這一點(diǎn)非常實(shí)用！
2. 優(yōu)化注釋
如果喜歡在代碼中添加注釋?zhuān)赡軙?huì)出現(xiàn)因?yàn)榇a過(guò)于密集而找不到注釋的情況。
借助優(yōu)化注釋工具（https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments）可以把注釋變成顯目的彩色。
這樣就可以輕松地通過(guò)添加!或者?來(lái)提醒組員需要注意的地方了。
3. 括號(hào)配對(duì)著色
第一次見(jiàn)到括號(hào)配對(duì)著色（https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer）的截圖時(shí)，筆者就決定要將其加入開(kāi)發(fā)工具箱中。
對(duì)于酷愛(ài)編程的人來(lái)說(shuō)，這個(gè)擴(kuò)展無(wú)疑能讓編程變得更加有趣。
4. Material Theme
Material Theme（https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme）是一款能直接安裝到VSCode的悠久主題，它能讓代碼變成下面這樣：
這是目前為止最棒的主題了，趕快安裝吧！
5. @typescript-eslint/parser
TypeScript用戶(hù)可能已經(jīng)開(kāi)始由TSLint配置轉(zhuǎn)向ESLint + TypeScript配置了，因?yàn)榻衲?，TSLint背后團(tuán)隊(duì)宣布將弱化對(duì)其的支持。
因此現(xiàn)在越來(lái)越多的項(xiàng)目采用@typescript-eslint/parser及相關(guān)的軟件包，以保證項(xiàng)目設(shè)置不會(huì)過(guò)時(shí)。
在Prettier網(wǎng)站上，依然可以用最新的設(shè)置體驗(yàn)ESLint的規(guī)則和兼容性。
6. Stylelint
對(duì)于所有項(xiàng)目來(lái)說(shuō)，Stylelint（https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint）都是必備的，原因有以下幾個(gè)：
- 它能避免出錯(cuò)。
- 它能執(zhí)行CSS的代碼風(fēng)格規(guī)范。
- 它能與Prettier配合使用。
- 它能支持CSS/ SCSS/Sass/Less。
- 它能支持社區(qū)創(chuàng)建的插件。
7. Markdownlint + docsify
有些人可能有這樣的習(xí)慣：在開(kāi)項(xiàng)目討論會(huì)時(shí)，用Markdown（https://daringfireball.net/projects/markdown/）格式記筆記。
這樣的筆記易于理解，而且有很多便利的Markdown文檔工具，其中就包括markdownlint。
Markdownlint是一款VSCode擴(kuò)展，它不但能幫助檢查.md文件的書(shū)寫(xiě)規(guī)范，而且支持Prettier格式！
筆者在所有項(xiàng)目中都應(yīng)用了docsify，因?yàn)樗С諱arkdown和其他強(qiáng)化。
8. TODO高亮
如果有把待辦項(xiàng)記錄在應(yīng)用代碼中的習(xí)慣，TODO高亮這樣的擴(kuò)展就會(huì)非常有用，因?yàn)樗軌虬颜麄€(gè)項(xiàng)目中的TODO都設(shè)置為高亮。
9. Import Cost
第一次嘗試的時(shí)候，你可能會(huì)覺(jué)得Import Cost非常有用。但是用了一會(huì)你可能就不再需要它了，因?yàn)樗嬖V你的你都已經(jīng)知道了。盡管如此，還是建議你嘗試一下，因?yàn)槟憧赡軙?huì)需要它。
10. Highlight Matching Tag
找不到標(biāo)簽的另一端時(shí)，Highlight Matching Tag就能派上用場(chǎng)了：
11. vscode-spotify
有些人會(huì)覺(jué)得切換到音樂(lè)軟件切歌，然后回到VSCode界面繼續(xù)工作有些麻煩。
Vscode-spotify就能解決這個(gè)麻煩，因?yàn)樗茏尦绦騿T在VSCode里使用Spotify（Spotify是瑞典的在線流媒體音樂(lè)播放平臺(tái)，民間譯名“聲田”或者“聲破天”）！
有了這個(gè)擴(kuò)展就可以在狀態(tài)欄看到正在播放的歌曲，通過(guò)熱鍵切換歌曲，點(diǎn)擊按鍵控制Spotify，等等。
12. 用于VSCode的GraphQL
隨著GraphQL逐步發(fā)展，幾乎每個(gè)JavaScript社區(qū)都能看到它的身影。鑒于此，考慮安裝用于VSCode的GraphQL也許是個(gè)不錯(cuò)的主意。
通過(guò)這個(gè)工具，就可以在處理GraphQL語(yǔ)法時(shí)使用語(yǔ)法高亮、linting以及自動(dòng)完成等功能。
因?yàn)楣P者經(jīng)常使用Gatsby，所以日常編程中常常涉及到GraphQL語(yǔ)法。
13. 彩虹縮進(jìn)
跟上文中使用括號(hào)配對(duì)著色的理由類(lèi)似。如果很難找到對(duì)應(yīng)的縮進(jìn)，使用彩虹縮進(jìn)就能讓縮進(jìn)更有可讀性。
請(qǐng)看這個(gè)例子：
14. Color Highlight
這是一個(gè)到哪都會(huì)被問(wèn)鏈接的擴(kuò)展。簡(jiǎn)單來(lái)說(shuō)，Color Highlight會(huì)這樣給代碼中的顏色標(biāo)注高亮：
15. 拾色器
拾色器是一款圖形用戶(hù)界面的VSCode擴(kuò)展，它幫助用戶(hù)選擇并生成顏色代碼，比如說(shuō)CSS顏色值。
16. REST Client
第一次嘗試REST Client時(shí)，筆者并不認(rèn)為這個(gè)工具會(huì)比著名的Postman軟件更好用。
隨著使用的深入，筆者逐漸意識(shí)到REST Client擴(kuò)展給開(kāi)發(fā)工具帶來(lái)的巨大影響，尤其是在測(cè)試API時(shí)。
你可以新建一個(gè)文件，輸入：https://google.com。
只需要高亮這一行，進(jìn)入控制面板（快捷鍵：CTRL + SHIFT + P），點(diǎn)擊Rest Client: Send Request就可以發(fā)起HTTP GET請(qǐng)求，很快響應(yīng)詳情就會(huì)出現(xiàn)在彈出的新標(biāo)簽頁(yè)中。
這非常有用：
甚至可以略過(guò)參數(shù)或者請(qǐng)求body數(shù)據(jù)來(lái)發(fā)起POST請(qǐng)求，只需要添加下面這幾行代碼：
- POST https://test.someapi.com/v1/account/user/login/
- Content-Type: application/json
- { "email": "someemail@gmail.com", "password": 1 }
這樣就可以發(fā)起一個(gè)以{ "email": "someemail@gmail.com", "password": 1 }為body參數(shù)的POST請(qǐng)求了。
而這只是這個(gè)擴(kuò)展最基礎(chǔ)的功能。
更多信息傳送門(mén)：https://marketplace.visualstudio.com/items?itemName=humao.rest-client
17. Settings Sync
如果非常討厭既要手寫(xiě)一份Markdown筆記記錄用到的擴(kuò)展工具，又要記錄在印象筆記這樣的筆記應(yīng)用中，Settings Sync就能解決這個(gè)煩惱。
只需要一個(gè)gist/GitHub賬戶(hù)，在記錄快捷鍵、代碼段、擴(kuò)展等設(shè)置時(shí)，同時(shí)按下SHIFT + ALT + U，就可以將個(gè)人設(shè)置上傳到gist賬戶(hù)。下次登錄或者設(shè)置另一臺(tái)電腦時(shí)，運(yùn)用快捷鍵SHIFT + ALT + D就可以下載設(shè)置了。
18. Todo Tree
Todo Tree能找到應(yīng)用代碼中的所有待辦項(xiàng)，并整理到面板左側(cè)的單一樹(shù)架結(jié)構(gòu)中。
19. Toggle Quotes
Toggle Quotes是個(gè)有趣而實(shí)用的擴(kuò)展，它能夠切換引號(hào)。在插入字符串、需要切換到反引號(hào)時(shí)，尤其是當(dāng)Prettier總是美化代碼時(shí)給字符串加上單引號(hào)的時(shí)候，Toggle Quotes就能派上用場(chǎng)。
20. Better Align
使用Better Align，不用預(yù)先選定就可以對(duì)齊所有代碼。
只需把光標(biāo)放在需要對(duì)齊的代碼上，通過(guò)CTRL + SHIFT + P（或者是其他自定義的快捷鍵）打開(kāi)控制面板，就可以調(diào)用Align命令。
21. 自動(dòng)閉合標(biāo)記
自動(dòng)閉合標(biāo)記是一個(gè)第一次使用VSCode時(shí)就能派上用場(chǎng)的工具。如果輸入
雖然這個(gè)工具并不是VSCode專(zhuān)有，但是它非常有用。
22. Sort Lines
有人會(huì)因?yàn)槲谋拘袥](méi)有按照字母順序排列而不舒服，幸運(yùn)的是，Sort lines這樣的工具對(duì)強(qiáng)迫癥患者非常友好。
如果你也有類(lèi)似的強(qiáng)迫癥，你也許會(huì)覺(jué)得這個(gè)工具有用。
23. VSCode谷歌翻譯
可能很多人認(rèn)為這個(gè)工具沒(méi)什么用處。因?yàn)楣P者在多語(yǔ)言環(huán)境中工作，所以VSCode谷歌翻譯在項(xiàng)目中非常有用。
運(yùn)用這個(gè)工具，可以在編輯界面內(nèi)查單詞。
24. Prettier
Prettier是一款自動(dòng)優(yōu)化JavaScript、TypeScript等代碼格式的VSCode擴(kuò)展。
25. Material Icon Theme
相比于其他圖標(biāo)主題，筆者更喜歡Material Icon Theme，因?yàn)檫@款主題讓不同的文件類(lèi)型更易于區(qū)分，特別是在應(yīng)用了暗色主題的情況下。
26. IntelliSense for CSS Class Names in HTML
IntelliSense for CSS class names in HTML能夠基于工作區(qū)內(nèi)的定義將HTML中CSS class的名字補(bǔ)全。
27. Path Intellisense
Path Intellisense是一款能夠自動(dòng)補(bǔ)全文件名的VSCode擴(kuò)展。
網(wǎng)頁(yè)題目：JavaScript開(kāi)發(fā)者的27個(gè)神奇VSCode工具
URL分享：http://www.5511xx.com/article/cdcjcgs.html
