摘要:將這些命令綁定到鍵盤快捷鍵是有幫助的,例如向上箭頭用于平衡向外,而向下箭頭用于平衡向內(nèi)。是和的快速原型開發(fā)平臺。
本系列的第一篇可以在這里看到:
提高 JavaScript 開發(fā)效率的高級 VSCode 擴展!
想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你!
作為一名業(yè)余愛好者、專業(yè)人員,甚至是每月只有一次編程的開發(fā)人員,你必須知道,對于任何愿意在工作中投入最大生產(chǎn)時間的人來說,擁有智能和敏捷的工具是至關(guān)重要的,廢話不多說,介紹插件比較重要。
1. Material Theme & Icons這是 VS Code 主題中的重要角色。 作者認為重要的主題是在編輯器中用筆和紙書寫最接近的東西(特別是在使用無對比變體主題時)。 從集成的工具到文本編輯器,你的編輯器看起來幾乎是平的和無縫的。
想象一個史詩般的主題加上史詩般的圖標。 Material Theme Icons 是替換默認 VSCode 圖標的絕佳選擇。設(shè)計的大型圖標目錄與主題融為一體,使其更加美觀,這有助于你在資源管理器中輕松找到你的文件。
2. 具有居中布局的禪模式或者勿擾模式 (Zen Mode)為了讓廣大苦逼碼農(nóng)能夠在 coding/docing 時有清晰的思路,代表最廣大碼農(nóng)利益的 VSCode 也加入了“禪模式”。該模式可以在你在頁面編輯文件時啟用,效果是全屏化你的編輯框,然后帶有若隱若現(xiàn)的云霧效果。
打開方式:文件 > 首選項 > 設(shè)置 > 用戶設(shè)置 > 工作臺 > 禪模式
3. 具有連字的字體文字的風格使閱讀變得簡單方便,你可以使用好看連字的字體使編輯器看起來更友好。 這里是支持連字的6種最佳字體 (根據(jù)www.slant.co)
你可以嘗試 Fira Code,它非常棒而且是開源的。 以下是引入 Fira Code 后在 VSCode 輥更改該字體的方法。
"editor.fontFamily": "Fira Code", "editor.fontLigatures": true
具體使用方法可以參考:
vscode中修改字體,使用 Fira Code
提高visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)
4.彩虹縮進 (indent-rainbow)縮進風格,這個擴展為文本前面的縮進著色,在每個步驟中交替使用四種不同的顏色。
當然如果需要自定義自己喜歡的顏色,請將以下代碼段復(fù)制并粘貼到 settings.json 中
"indentRainbow.colors": [ "rgba(16,16,16,0.1)", "rgba(16,16,16,0.2)", "rgba(16,16,16,0.3)", "rgba(16,16,16,0.4)", "rgba(16,16,16,0.5)", "rgba(16,16,16,0.6)", "rgba(16,16,16,0.7)", "rgba(16,16,16,0.8)", "rgba(16,16,16,0.9)", "rgba(16,16,16,1.0)" ],5. 自定義標題欄
這是一個很棒的視覺調(diào)整,改變了不同項目的標題欄顏色,以便輕松識別它們。 如果你處理可能具有相同代碼或文件名的應(yīng)用程序(例如react-native 應(yīng)用程序和 React Web應(yīng)用程序),這非常有用。
設(shè)置方式:打開方式:文件 > 首選項 > 設(shè)置 > 工作區(qū)設(shè)置
6. Tag Wrapping如果你不認識 Emmet,那么你可能是一個喜歡打字的人。Emmet 允許你寫入縮寫代碼并返回的相應(yīng)標記,目前 VSCode 已經(jīng)內(nèi)置,所以不用配置了。
如果你想了解更多的 Emmet 的簡寫,可以查看 Emmet Cheatsheet
7. 內(nèi)外平衡這條建議來自 https://vscodecandothat.com/,作者非常推薦它。
你可以使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代碼中選擇整個標記。 將這些命令綁定到鍵盤快捷鍵是有幫助的,例如 Ctrl + Shift + 向上箭頭用于平衡向外,而 Ctrl + Shift +向下箭頭 用于平衡向內(nèi)。
8. Turbo Console.log()沒有人喜歡輸入非常長的語句,比如 console.log()。這真的很煩人,尤其是當你只想快速輸出一些東西,查看它的值,然后繼續(xù)編碼的時候。如果我告訴你,你可以像 Lucky Luke一樣快速地控制臺記錄任何東西呢?
這是通過名為 Turbo Console Log 的擴展來完成的。它支持對下面一行中的任何變量進行日志記錄,并在代碼結(jié)構(gòu)之后自動添加前綴。你還可以 取消注釋/注釋 alt+shift+u / alt+shift+c 為所有由這個擴展添加的 console.log()。
此外,你也可以通過 alt+shift+d 刪除所有:
9. Live server這是一個非常棒的擴展,可以幫助你啟動一個本地開發(fā)服務(wù)器,為靜態(tài)和動態(tài)頁面提供實時重新加載功能,它對 HTTPS、CORS、自定義本地主機地址和端口等主要特性提供了強大的支持。
如果與 VSCode LiveShare 一起使用,它甚至可以讓你共享本地主機。
10. 使用多個游標 復(fù)制/粘貼當在不同的行上添加游標來編輯多行代碼時,發(fā)現(xiàn)這個特性非常有用。你可以復(fù)制和粘貼這些游標選擇的內(nèi)容,它們將按照復(fù)制的順序進行粘貼。
Mac: opt+cmd+up or opt+cmd+down Windows: ctrl+alt+up or ctrl+alt+down Linux: alt+shift+up or alt+shift+down11. Breadcrumbs(面包屑)
編輯器的內(nèi)容上方現(xiàn)在有一個被稱為 Breadcrumbs 的導(dǎo)航欄,它顯示你的當前位置,并允許在符號和文件之間快速導(dǎo)航。要使用該功能,可使用 View > Toggle Breadcrumbs 命令或通過 breadcrumbs.enabled 設(shè)置啟用。要與其交互,請使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。
12. Code CLIVS代碼有一個強大的命令行界面,允許你控制如何啟動編輯器。你可以通過命令行選項打開文件、安裝擴展名、更改顯示語言和輸出診斷信息。
想象一下,你通過 git clone
你經(jīng)常會看到帶有定制字體和主題的代碼截屏,如下所示。這是在VS代碼與 x 擴展
我知道 Carbon 也是一種更好,更可定制的替代品。 但是,Polacode 允許你保留在代碼編輯器中并使用你可能已購買的任何專用字體,這些字體在 Carbon 中無法使用。
14. Quokka (JS/TS ScratchPad)Quokka 是J avaScript 和 TypeScript 的快速原型開發(fā)平臺。在你輸入代碼時,它將立即運行你的代碼,并在代碼編輯器中顯示各種執(zhí)行結(jié)果。
Quokka 的一個很棒的擴展插件,當你準備技術(shù)面試時,你可以輸出每個步驟,而不必在調(diào)試器中設(shè)置斷點。它還可以幫助您在實際使用之前研究庫的函數(shù),如 Lodash 或 MomentJS,它甚至可以用于異步調(diào)用。
15. WakaTime如果你想記錄每天編程所花的時間,WakaTime 是一個擴展,它可以幫助記錄和存儲有關(guān)編程活動的指標和分析。
原文:
https://medium.freecodecamp.o...
代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行l(wèi)og 調(diào)試,這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
你的點贊是我持續(xù)分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總?cè)缦拢X得不錯點個Star,歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨,在進階的路上,共勉!
關(guān)注公眾號,后臺回復(fù)福利,即可看到福利,你懂的。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101163.html
摘要:使用高亮類似的擴展更強大的高亮擴展,具有更多功能。為了檢查和檢查響應(yīng),使用了之類的工具。在這里獲取這兩個擴展自動閉合標記和自動重命名標記。類似的擴展顯示提交歷史的精美圖表等等。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! Quokka.js Quokka.js 是一個用于 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味著它會實時運行...
摘要:摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應(yīng)標記,目前已經(jīng)內(nèi)置,所以不用配置了。自從年雙十一正式上線,累計處理了億錯誤事件,付費客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。摘要: 你所不知道的系列。 原文:提高 JavaScript 開發(fā)效率的高級 VSCode 擴展之二! 作者:前端小智 Fundebug經(jīng)授權(quán)轉(zhuǎn)載,版權(quán)歸原作者所有。 作為一名業(yè)余愛好者、專業(yè)人員,甚至是每月只有一次編...
摘要:如果編輯器在編碼時實時給出反饋,對開發(fā)者個人而言才是最高效的,在提交時做強制檢查只是從團隊的視角保證編碼風格的規(guī)范性和一致性。 工欲善其事必先利其器,軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來,先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,現(xiàn)在...
摘要:如果編輯器在編碼時實時給出反饋,對開發(fā)者個人而言才是最高效的,在提交時做強制檢查只是從團隊的視角保證編碼風格的規(guī)范性和一致性。 工欲善其事必先利其器,軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來,先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,現(xiàn)在...
摘要:前言自總結(jié)完了上篇前端工程化的思想,并在全家桶的項目加以實踐,趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)項目,以及其中踩過的一個個坑。。。 前言 自總結(jié)完了上篇前端工程化的思想,并在vue全家桶的項目加以實踐,趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)vue項目,以及其中踩過的一個個坑。。。 基于vue-cli的自定義模板(Custom Templates) 小伙伴們的vue項目應(yīng)該都...
閱讀 3454·2021-11-22 12:00
閱讀 671·2019-08-29 13:24
閱讀 2905·2019-08-29 11:31
閱讀 2586·2019-08-26 14:00
閱讀 3185·2019-08-26 11:42
閱讀 2476·2019-08-23 18:31
閱讀 798·2019-08-23 18:27
閱讀 2844·2019-08-23 16:58