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

如何學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，執行流暢，可以說是微軟的良心之作。