當前位置:成語大全網 - 書法字典 - 作為前端開發,vscode有哪些值得安裝的插件?

作為前端開發,vscode有哪些值得安裝的插件?

1.在瀏覽器中打開

因為VSCode沒有提供直接在瀏覽器中打開文件的內置接口,所以這個插件在快捷菜單中增加了在默認瀏覽器中查看文件和在客戶端(Firefox、Chrome、IE)中打開命令面板的選項。

2.闊卡

Quokka是壹個調試工具插件,可以根據妳正在編寫的代碼提供實時反饋。易於配置,可以預覽變量的函數和計算值結果。此外,它可以在使用JSX或TypeScript的項目中開箱即用。

3.騙子

使用Faker,壹個流行的JavaScript庫,可以幫助妳快速插入用例數據。Faker可以隨機生成姓名、地址、圖片、電話號碼,或者經典的隨機假段子,每個類別還包含各種子類別。妳可以根據自己的需要使用這些數據。

4.CSS Peek

使用這個插件,您可以跟蹤樣式表中由CSS類和id定義的位置。當妳右鍵點擊HTML文件中的選擇器,選擇“轉到定義並查看定義”選項,它會給妳發送樣式設置的CSS代碼。

5.HTML樣板文件

通過使用HTML模板插件,您可以擺脫為新的HTML文件重寫header和body標簽的麻煩。妳只需要在壹個空文件中輸入html,按Tab鍵就可以生成壹個幹凈的文檔結構。

6.較美麗

beauty是目前Web開發中最流行的代碼格式化程序。安裝此插件後,它可以自動應用更漂亮,並快速將整個JS和CSS文檔格式化為統壹的代碼樣式。如果還想用ESLint,有壹個更漂亮的-Eslint插件,千萬不要錯過!

7.顏色信息

這個方便的插件將為您提供在CSS中使用的顏色的信息。只需將光標懸停在顏色上,即可預覽顏色塊中有關顏色模型(HEX、RGB、HSL和CMYK)的信息。

8.SVG查看器

這個插件為Visual Studio代碼添加了許多實用的SVG程序。您可以在不離開編輯器的情況下打開並查看SVG文件。同時,它還包含轉換為PNG格式和生成數據URI模式的選項。

9.待辦事項突出顯示

這個插件可以在代碼中標記所有的TODO註釋,以便更容易跟蹤任何未完成的工作。默認情況下,它會查找TODO和FIXME關鍵字。當然,妳也可以添加自定義表達式。

10.圖標字體

這是壹個可以給項目添加圖標字體的插件。該插件支持20多個流行的圖標集,包括字體Awesome、Ionicons、Glyphicons和材質設計圖標。

11.使變小

這是壹個用於壓縮和合並JavaScript和CSS文件的應用程序。它提供了大量的自定義設置,以及自動壓縮、保存和導出為. min文件的選項。它可以分別通過uglify-js、clean-css和html-minifier與JavaScript、CSS和HTML協同工作。

12.更改大小寫

盡管VSCode具有內置的現成文本轉換選項,但它只能轉換文本大小寫。這個插件增加了更多的命名格式來修改文本,包括駝峰命名、下劃線分隔命名、snake_case命名和CONST_CAS命名。

13.正則表達式預覽器

這是壹個實時測試正則表達式的工具。它可以將正則表達式模式應用於任何打開的文件,並突出顯示所有匹配。

14.語言和框架包

默認情況下,VSCode支持大量的主流編程語言,但是如果沒有包含您正在使用的編程語言,您可以通過下載擴展包來自動添加。同時也可以添加壹些相關的Web開發插件包像React Native和Vue。

15.主題

當然,在眾多實用插件中,怎麽能少了壹個美好的主題呢?您每天都與您的VSCode編輯器“親密接觸”。為什麽不打扮的漂亮壹點呢?這裏有壹些主題可以幫助妳改變工具條和圖標的配色方案。

壹個Monokai

阿利亞

壹片黑暗

材料圖標