當前位置:首頁 > IT技術

Web前端開發工具

時間:2019-09-27 07:14:29來源:IT技術作者:seo實驗室小編閱讀:71次「手機版」
 

前端開發

前言:初入前端開發,少不了當然是開發工具的使用,用戶可以根據自己的習慣進行選擇。以下是我自己總結的一些開發工具的推薦與分享心得,我自己平時主要用以下幾款:

我希望借此博文比較市面上主流軟件,希望對大家有所幫助(主要是windows平臺)。

一、初入篇

? ?1、Hbuilder、HBuilderX(下載地址http://www.dcloud.io/)

(1)介紹:入門首推這兩款工具。這兩款工具都是中國DCcloud(數字天堂)推出的一款支持HTML5的Web開發IDE。區別在于HBuilderX更加輕量,是HBuilder的下一代版本(Hbuilder已經停止更新維護),其壓縮包大小僅10幾M,通過自定義插件的安裝來適應自己開發的需要。當然,作為前端開發者,這兩款工具可以一直使用下去,不局限于前期練習。

(2)優勢:輕量首推!工具內置瀏覽器代碼提示很完整,文檔結構清晰,大幅度提升開發效率。特別是對于H5 APP開發的支持,我認為如果你要從事H5移動端App開發的話,首選這兩款工具。

? ?2、Editplus(收費,破解百度

(1)介紹:EditPlus是一款由韓國 Sangil Kim 出品的小巧但是功能強大的可處理文本、HTML和程序語言的Windows編輯器,是一個超級小巧的IDE。最大特點沒有代碼提示功能,只有語法高亮。因此初學HTML,英語基礎又不好的同學可以首選,多敲多練嘛。

(2)優勢:沒有代碼提示是最大優勢吧~。練習必備,老司機當然不推薦,畢竟工作效率最重要。

? ?3、Dreamweaver(價格不菲,破解版百度)

(1)介紹:Adobe出品,出道多年。最新版本已經是CC 2019了,建議要用這款軟件的同學不要選用老版本,因為前端開發技術一直在更新,老版本對新語法支持不是太友好,新版本對電腦性能有一定要求。

(2)優勢:工具內置瀏覽器功能很強大!通過點擊其某一元素可以自動定位到HTML文檔中的對應標簽,如圖所示:

這樣的功能真的方便了很多小白用戶,畢竟有時候會忘記了這個元素對于的是哪一個HTML標簽,找都要找半天。工具具有代碼重構功能。但是現在主流用戶都不推薦Dreamwaver,我個人也不推薦后期開發使用,至于擴展性,那就是智者見智了。

二、深入開發篇

? ? 1、Sublime Text(下載地址:http://www.sublimetext.com/3?收費)

? ? ?(1)介紹:神器!輕量級IDE,神器神在可擴展性,工具包含大量實用插件,我們可以通過安裝自己領域的插件來提高工作效率。支持VIM模式(linux推薦)、支持宏(批處理)。

? ? ?(2)優勢:集成了各種插件很方便。右邊沒有滾動條,取而代之的是代碼縮略圖。強大的快捷命令“可以實時搜索到相應的命令、選項、snippet和syntex。可以跳轉到任意文件的任意位置。

? ? 2、WebStorm(下載地址:https://www.jetbrains.com/webstorm/?收費)

? ? ?(1)介紹:JetBrains開發的一款javaScript開發工具。同時支持HTML5開發。最大特點是有強大的JavaScript開發功能,例如代碼重構,支持的有重命名、提取變量/函數、內聯變量/函數、移動/復制、安全刪除等等。

? ? ?(2)優勢:同DW,優秀的代碼定位能力,能輕松將光標定位到變量/屬性/方法的定義處,對閱讀代碼非常有用。nodejs 最好的開發工具。

? ?3、Visual Studio Code(下載地址:https://code.visualstudio.com/,本人強烈推薦)

? ? ? (1)介紹:微軟推出的良心之作。是一款免費開源的現代化輕量級代碼編輯器,支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義快捷鍵括號匹配和顏色區分。

? ? ? (2)優勢:軟件界面優美,不多說,看下圖↓ 多種自帶主題(亦可下載)可選,甚至可以自定義背景圖片,具體方法參照我的另一篇博客XXX

? ? ?把最好用的工具放到最后,真有點慚愧了······vs code可以集成多種插件,不僅是前端開發、前端+后端開發,甚至是其它諸如Java、C/C++開發都有很多插件可以使用,Java Test Runner插件如上圖所示。一款軟件就可以完成多種工作了。以下簡單介紹VS Code軟件(前端開發)的使用

1、中文安裝方法:點擊圖中紅圈,在上面搜索“Chinese”,安裝后重啟即可,官方中文漢化。

2、快速生成HTML文檔:由于VS Code新建是文件是文本文檔,所以需要手動切換語言。點擊圖中1,切換為HTML,這是你會發現雖然是HTML文檔了,但是沒有內容。這時需要輸入英文的感嘆號!然后回車,即可快速生成H5文檔模板

相關閱讀

最近學正則表達式寫的一個小工具——ToolsInTools

前陣都沒事做,就抽空看了下正則表達式,畢竟上次打算學它的時候是4年前了~但是沒堅持。正則確實是像傳言的那樣挺難的。但是如果靜下

怎么修復LSP,LSP修復命名及工具——新手上路

什么是LSP? LSP即分層服務提供商,LSP即Layered Service Provider,Winsock 作為應用程序的 Windows 的網絡套接字工具,可以由稱為“分

Microsoft Office 2016 for Mac(安裝包及激活工具)

雖說Mac自帶的Numbers可以編輯文檔;但導出為word類型,總會出現文檔格式紊亂;由此在網上尋覓了許久,找到以下安裝包:鏈接: https://pan.

代碼review工具:Review Board

官網:https://www.reviewboard.org Review Board is a tool for reviewing source code, documentation and other text-based fil

webservice_java實現

1. webservice介紹 1.1? webservice是使用http協議發送soap協議數據的一種遠程調用技術。 1.2 soap:簡單對象訪問協議 1.2.1 soa

分享到:

欄目導航

推薦閱讀

熱門閱讀

云南彩票投注站申请