成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

提高 JavaScript 開(kāi)發(fā)效率的高級(jí) VSCode 擴(kuò)展之二！

cyrils / 1355人閱讀

摘要：將這些命令綁定到鍵盤快捷鍵是有幫助的，例如向上箭頭用于平衡向外，而向下箭頭用于平衡向內(nèi)。是和的快速原型開(kāi)發(fā)平臺(tái)。

本系列的第一篇可以在這里看到：

提高 JavaScript 開(kāi)發(fā)效率的高級(jí) VSCode 擴(kuò)展！

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

作為一名業(yè)余愛(ài)好者、專業(yè)人員，甚至是每月只有一次編程的開(kāi)發(fā)人員，你必須知道，對(duì)于任何愿意在工作中投入最大生產(chǎn)時(shí)間的人來(lái)說(shuō)，擁有智能和敏捷的工具是至關(guān)重要的，廢話不多說(shuō)，介紹插件比較重要。

1. Material Theme & Icons

這是 VS Code 主題中的重要角色。 作者認(rèn)為重要的主題是在編輯器中用筆和紙書(shū)寫(xiě)最接近的東西（特別是在使用無(wú)對(duì)比變體主題時(shí)）。 從集成的工具到文本編輯器，你的編輯器看起來(lái)幾乎是平的和無(wú)縫的。

想象一個(gè)史詩(shī)般的主題加上史詩(shī)般的圖標(biāo)。 Material Theme Icons 是替換默認(rèn) VSCode 圖標(biāo)的絕佳選擇。設(shè)計(jì)的大型圖標(biāo)目錄與主題融為一體，使其更加美觀，這有助于你在資源管理器中輕松找到你的文件。

2. 具有居中布局的禪模式或者勿擾模式 (Zen Mode)

為了讓廣大苦逼碼農(nóng)能夠在 coding/docing 時(shí)有清晰的思路，代表最廣大碼農(nóng)利益的 VSCode 也加入了“禪模式”。該模式可以在你在頁(yè)面編輯文件時(shí)啟用，效果是全屏化你的編輯框，然后帶有若隱若現(xiàn)的云霧效果。

打開(kāi)方式：文件 > 首選項(xiàng) > 設(shè)置 > 用戶設(shè)置 > 工作臺(tái) > 禪模式

3. 具有連字的字體

文字的風(fēng)格使閱讀變得簡(jiǎn)單方便，你可以使用好看連字的字體使編輯器看起來(lái)更友好。 這里是支持連字的6種最佳字體 (根據(jù)www.slant.co)

你可以嘗試 Fira Code，它非常棒而且是開(kāi)源的。 以下是引入 Fira Code 后在 VSCode 輥更改該字體的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具體使用方法可以參考：

vscode中修改字體,使用 Fira Code

提高visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)

4.彩虹縮進(jìn) （indent-rainbow）

縮進(jìn)風(fēng)格，這個(gè)擴(kuò)展為文本前面的縮進(jìn)著色，在每個(gè)步驟中交替使用四種不同的顏色。

當(dāng)然如果需要自定義自己喜歡的顏色，請(qǐng)將以下代碼段復(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. 自定義標(biāo)題欄

這是一個(gè)很棒的視覺(jué)調(diào)整，改變了不同項(xiàng)目的標(biāo)題欄顏色，以便輕松識(shí)別它們。 如果你處理可能具有相同代碼或文件名的應(yīng)用程序（例如react-native 應(yīng)用程序和 React Web應(yīng)用程序），這非常有用。

設(shè)置方式：打開(kāi)方式：文件 > 首選項(xiàng) > 設(shè)置 > 工作區(qū)設(shè)置

6. Tag Wrapping

如果你不認(rèn)識(shí) Emmet，那么你可能是一個(gè)喜歡打字的人。Emmet 允許你寫(xiě)入縮寫(xiě)代碼并返回的相應(yīng)標(biāo)記，目前 VSCode 已經(jīng)內(nèi)置，所以不用配置了。

如果你想了解更多的 Emmet 的簡(jiǎn)寫(xiě)，可以查看 Emmet Cheatsheet

7. 內(nèi)外平衡

這條建議來(lái)自 https://vscodecandothat.com/，作者非常推薦它。

你可以使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代碼中選擇整個(gè)標(biāo)記。 將這些命令綁定到鍵盤快捷鍵是有幫助的，例如 Ctrl + Shift + 向上箭頭用于平衡向外，而 Ctrl + Shift +向下箭頭 用于平衡向內(nèi)。

8. Turbo Console.log()

沒(méi)有人喜歡輸入非常長(zhǎng)的語(yǔ)句，比如 console.log()。這真的很煩人，尤其是當(dāng)你只想快速輸出一些東西，查看它的值，然后繼續(xù)編碼的時(shí)候。如果我告訴你，你可以像 Lucky Luke一樣快速地控制臺(tái)記錄任何東西呢?

這是通過(guò)名為 Turbo Console Log 的擴(kuò)展來(lái)完成的。它支持對(duì)下面一行中的任何變量進(jìn)行日志記錄，并在代碼結(jié)構(gòu)之后自動(dòng)添加前綴。你還可以 取消注釋/注釋 alt+shift+u / alt+shift+c 為所有由這個(gè)擴(kuò)展添加的 console.log()。

此外，你也可以通過(guò) alt+shift+d 刪除所有：

9. Live server

這是一個(gè)非常棒的擴(kuò)展，可以幫助你啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，為靜態(tài)和動(dòng)態(tài)頁(yè)面提供實(shí)時(shí)重新加載功能，它對(duì) HTTPS、CORS、自定義本地主機(jī)地址和端口等主要特性提供了強(qiáng)大的支持。

如果與 VSCode LiveShare 一起使用，它甚至可以讓你共享本地主機(jī)。

10. 使用多個(gè)游標(biāo) 復(fù)制/粘貼

當(dāng)在不同的行上添加游標(biāo)來(lái)編輯多行代碼時(shí)，發(fā)現(xiàn)這個(gè)特性非常有用。你可以復(fù)制和粘貼這些游標(biāo)選擇的內(nèi)容，它們將按照復(fù)制的順序進(jìn)行粘貼。

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

11. Breadcrumbs（面包屑）

編輯器的內(nèi)容上方現(xiàn)在有一個(gè)被稱為 Breadcrumbs 的導(dǎo)航欄，它顯示你的當(dāng)前位置，并允許在符號(hào)和文件之間快速導(dǎo)航。要使用該功能，可使用 View > Toggle Breadcrumbs 命令或通過(guò) breadcrumbs.enabled 設(shè)置啟用。要與其交互，請(qǐng)使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。

12. Code CLI

VS代碼有一個(gè)強(qiáng)大的命令行界面，允許你控制如何啟動(dòng)編輯器。你可以通過(guò)命令行選項(xiàng)打開(kāi)文件、安裝擴(kuò)展名、更改顯示語(yǔ)言和輸出診斷信息。

想象一下，你通過(guò) git clone 克隆一個(gè)遠(yuǎn)程庫(kù)，你想要替換你正在使用的當(dāng)前 VS Code實(shí)例。 通過(guò)命令 code . -r 將在不必離開(kāi) CLI 界面的情況下完成這一操作 (在此處了解更多信息)。

12. Polacode

你經(jīng)常會(huì)看到帶有定制字體和主題的代碼截屏，如下所示。這是在VS代碼與 x 擴(kuò)展

我知道 Carbon 也是一種更好，更可定制的替代品。 但是，Polacode 允許你保留在代碼編輯器中并使用你可能已購(gòu)買的任何專用字體，這些字體在 Carbon 中無(wú)法使用。

14. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型開(kāi)發(fā)平臺(tái)。在你輸入代碼時(shí)，它將立即運(yùn)行你的代碼，并在代碼編輯器中顯示各種執(zhí)行結(jié)果。

Quokka 的一個(gè)很棒的擴(kuò)展插件，當(dāng)你準(zhǔn)備技術(shù)面試時(shí)，你可以輸出每個(gè)步驟，而不必在調(diào)試器中設(shè)置斷點(diǎn)。它還可以幫助您在實(shí)際使用之前研究庫(kù)的函數(shù)，如 Lodash 或 MomentJS，它甚至可以用于異步調(diào)用。

15. WakaTime

如果你想記錄每天編程所花的時(shí)間，WakaTime 是一個(gè)擴(kuò)展，它可以幫助記錄和存儲(chǔ)有關(guān)編程活動(dòng)的指標(biāo)和分析。


原文：

https://medium.freecodecamp.o...

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

交流

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101163.html

相關(guān)文章

  • 提高 JavaScript 開(kāi)發(fā)效率的高級(jí) VSCode 擴(kuò)展！

    摘要：使用高亮類似的擴(kuò)展更強(qiáng)大的高亮擴(kuò)展，具有更多功能。為了檢查和檢查響應(yīng)，使用了之類的工具。在這里獲取這兩個(gè)擴(kuò)展自動(dòng)閉合標(biāo)記和自動(dòng)重命名標(biāo)記。類似的擴(kuò)展顯示提交歷史的精美圖表等等。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ Quokka.js Quokka.js 是一個(gè)用于 JavaScript 和 TypeScript 的實(shí)時(shí)運(yùn)行代碼平臺(tái)。這意味著它會(huì)實(shí)時(shí)運(yùn)行...

    zhigoo 評(píng)論0 收藏0

  • 一些你所不知道的VS Code插件

    摘要：摘要你所不知道的系列。允許你寫(xiě)入縮寫(xiě)代碼并返回的相應(yīng)標(biāo)記，目前已經(jīng)內(nèi)置，所以不用配置了。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。摘要： 你所不知道的系列。 原文：提高 JavaScript 開(kāi)發(fā)效率的高級(jí) VSCode 擴(kuò)展之二！ 作者：前端小智 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 作為一名業(yè)余愛(ài)好者、專業(yè)人員，甚至是每月只有一次編...

    Near_Li 評(píng)論0 收藏0

  • 能讓你開(kāi)發(fā)效率翻倍的 VSCode 插件配置（上）

    摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。 工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來(lái)，先后折騰過(guò)的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在...

    feng409 評(píng)論0 收藏0

  • 能讓你開(kāi)發(fā)效率翻倍的 VSCode 插件配置（上）

    摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。 工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來(lái)，先后折騰過(guò)的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在...

    AlanKeene 評(píng)論0 收藏0

  • 如何更有效率和質(zhì)量地開(kāi)發(fā)Vue項(xiàng)目

    摘要：前言自總結(jié)完了上篇前端工程化的思想，并在全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開(kāi)發(fā)項(xiàng)目，以及其中踩過(guò)的一個(gè)個(gè)坑。。。 前言 自總結(jié)完了上篇前端工程化的思想，并在vue全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開(kāi)發(fā)vue項(xiàng)目，以及其中踩過(guò)的一個(gè)個(gè)坑。。。 基于vue-cli的自定義模板（Custom Templates） 小伙伴們的vue項(xiàng)目應(yīng)該都...

    ShevaKuilin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<