如何學web前端,好用工具推薦

易牛小朗發表於2021-09-30

如何學web前端,選擇一個好用便捷的開發工具,能夠大大的提高我們的開發效率。web前端開發建議使用VScode和HbuilderX,它們強大的程式碼助手能夠幫助你快速完成開發,還有各種方便的快捷鍵以及強大的外掛擴充套件。



易牛雲朗沃給大夥推薦 一些VScode常用外掛:


一、會了吧。沒錯名字就是“會了吧”,開啟原始碼可以自動分析原始碼中所有包含的英語單詞,並顯示解釋結果,先學單詞再看程式碼。用了會了吧,統統都會啦! 對於英語不怎麼好,在學習途中的小夥伴非常友好,很有幫助。


二、檔案圖示 vscode-icons。為了使我們在開發時有一個清晰的介面,我們需要對一些元件做一些美化。vscode-icons 外掛可以實現對各種檔案型別的檔案前的圖示進行優化顯示,這樣我們在檢視繁雜多樣的檔案列表的時候,不用直接去看檔案的字尾名,可以直接通過檔案的圖示就能夠知道檔案的型別。


三、程式碼檢查工具 ESLint。ESLint 是一個對語法規則和程式碼風格的檢查工具,可以用來保證寫出正確的語法並且統一風格的程式碼。VSCode 中的ESLint外掛就直接將ESLint 的功能整合好,安裝後即可使用,對於程式碼格式與規範的細節還可以自定義,並且開發團隊可以共享同一個配置檔案,這樣團隊的所有人寫出的程式碼就可以使用同一個程式碼規範,在程式碼簽入前每個人都可以完成自己的程式碼規範檢查。


四、arrr。這是一款前端開發非常實用的外掛,他能夠把html程式碼提取成為一個元件,我們在開發過程中,有很多程式碼是共用的,例如header、footer,那麼就沒有必要每個頁面都去重複寫html,造成大量的程式碼冗餘。使用時只需要選中需要提取成元件的程式碼部分,能夠快速的生成一個元件,並完成匯入部分的程式碼。



除此之外,還有各種各樣提升開發效率的外掛,在此就不一一展示了。Visual Studio Code (簡稱 VS Code / VSC) 支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補全、自定義快捷鍵、括號匹配和顏色區分、程式碼片段、程式碼對比 Diff、GIT命令 等特性,支援外掛擴充套件,並針對網頁開發和雲端應用開發做了優化。軟體跨平臺支援 Win、Mac 以及 Linux,執行流暢,可以說是微軟的良心之作。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70002837/viewspace-2794650/,如需轉載,請註明出處,否則將追究法律責任。

相關文章