WebStrom是jetbrains公司旗下的一款JavaScript開(kāi)發(fā)工具，目前被廣大的中國(guó)JS開(kāi)發(fā)者譽(yù)為quotWeb前端開(kāi)發(fā)神器quot，quot最強(qiáng)大的HTML5編輯器quot和quot最智能的JavaScript IDEquot等 3PhpStormPhpStorm是一個(gè)專業(yè)輕量級(jí)且便捷的PHP IDE，旨在提供了用戶效率，可深刻理解用戶的編碼，提供智能的代碼補(bǔ)全，快速導(dǎo)航以及即時(shí)錯(cuò)誤檢查等等強(qiáng)大的功能；7 Beautify一鍵格式化 HTMLJSCSS 代碼8 JavaScript ES6 code snippets提供 ES6 語(yǔ)法智能提示和快速輸入代碼風(fēng)格規(guī)范插件 9 ESLint規(guī)范 JS 代碼書(shū)寫(xiě)規(guī)則，支持自定義規(guī)則10 TSLint規(guī)范 TypeScript 代碼，支持多版本11 Code Spell Checker拼寫(xiě)檢查，自動(dòng)警告錯(cuò)誤12 koro；f12鍵在網(wǎng)頁(yè)上是一個(gè)非常重要的快捷鍵，它主要用于打開(kāi)瀏覽器的開(kāi)發(fā)者工具以下是關(guān)于f12鍵在網(wǎng)頁(yè)上作用的 一打開(kāi)開(kāi)發(fā)者工具 當(dāng)用戶在瀏覽網(wǎng)頁(yè)時(shí)，按下f12鍵可以迅速打開(kāi)瀏覽器的開(kāi)發(fā)者工具這個(gè)工具對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，是進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試測(cè)試以及診斷問(wèn)題的必備神器二查看網(wǎng)頁(yè)源代碼 在開(kāi)發(fā)者。

4 CSS Peek CSS Peek讓開(kāi)發(fā)者追蹤到HTML中CSS選擇器的定義，方便樣式調(diào)試和理解5 HTML Boilerplate 通過(guò)此插件，新文件的HTML結(jié)構(gòu)自動(dòng)生成，節(jié)省了大量重復(fù)的模板編寫(xiě)工作6 Prettier Prettier Eslint Prettier是代碼格式化的神器，而Prettier Eslint則提供了ESLint的 linting 功能；常用的寫(xiě)代碼軟件有以下幾個(gè)1WebStormWebStorm是jetbrains公司旗下一款JavaScript開(kāi)發(fā)工具目前已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”“最強(qiáng)大的HTML5編輯器”“最智能的JavaScriptIDE”等2SublimeTextSublimeText是一個(gè)代碼編輯器也是HTML和散文先進(jìn)的文本編輯器3HBuilderH；對(duì)于簡(jiǎn)單的網(wǎng)站數(shù)據(jù)抓取需求，使用專業(yè)的零代碼工具如Web Scraper可以更高效地實(shí)現(xiàn)Web Scraper是Chrome瀏覽器的一個(gè)擴(kuò)展，無(wú)需編寫(xiě)復(fù)雜的代碼，直接在F12開(kāi)發(fā)者工具中操作即可安裝方法分為有在線商店和離線下載兩種在Chrome商店搜索安裝或從crxdlcom下載crx文件離線安裝安裝后重啟瀏覽器，F(xiàn)12工具欄；目前，前端開(kāi)發(fā)人員最常用的編輯器是Sublime和WebStormSublime Text是一款強(qiáng)大的代碼編輯器，具備豐富的擴(kuò)展功能，最初是作為Vim的一個(gè)替代品開(kāi)發(fā)的它擁有漂亮的用戶界面，支持多種功能，如代碼縮略圖Python插件代碼段等，用戶還可以自定義鍵綁定菜單和工具欄Sublime Text主要功能包括拼寫(xiě)檢查。

Light Table 創(chuàng)新突破 由微軟項(xiàng)目成員開(kāi)發(fā)的Light Table，獨(dú)特的內(nèi)容管理工具，為代碼管理帶來(lái)全新的視角 Neovim Vim的超進(jìn)化版 Neovim作為Vim的擴(kuò)展，擁有無(wú)限的擴(kuò)展性，是追求極致代碼編輯體驗(yàn)的程序員的首選 Notepad2 小巧而功能強(qiáng)大的輕量級(jí)神器 Florian Balmer的開(kāi)源之作Notepad2，小巧；CSS Peeper是專為UI設(shè)計(jì)師打造的CSS查看器，快速讀取網(wǎng)頁(yè)元素的樣式信息，檢查代碼中文字行高字體大小按鈕尺寸，以及隱藏CSS樣式訪問(wèn)其官方網(wǎng)站下載，同樣通過(guò)Google應(yīng)用商店安裝使用時(shí)，打開(kāi)前端開(kāi)發(fā)地址，啟動(dòng)工具，查看樣式表效果通過(guò)右側(cè)窗口查看樣式內(nèi)容，與設(shè)計(jì)稿對(duì)比，找出不一致之處通過(guò)使用C。

二SublimeText代碼編輯利器 SublimeText是一款輕量級(jí)但功能強(qiáng)大的代碼編輯器，它支持多種編程語(yǔ)言，具有高度的定制性和豐富的插件生態(tài)系統(tǒng)設(shè)計(jì)師可以通過(guò)SublimeText快速編寫(xiě)和調(diào)試網(wǎng)頁(yè)代碼，并且提供了豐富的代碼提示和自動(dòng)補(bǔ)全功能，極大地提升了工作效率 三Figma協(xié)作網(wǎng)頁(yè)設(shè)計(jì)神器 Figma是一款基于云端的設(shè)計(jì)工具；推薦1初學(xué)div+css，建議先從Dreamweaver開(kāi)始，萌新都是從這里走過(guò)來(lái)的，完善的功能和測(cè)試功能，以及代碼提示和補(bǔ)全功能推薦2HBuilder后起之秀，也是一款強(qiáng)悍的代碼編輯器軟件，該軟件聲稱360度提示無(wú)死角，也不虛此言，代碼格式代碼提示等功能 推薦3其它推薦Sublime Text3這也是代碼神器Notepad++；跨平臺(tái)的代碼編輯器，插件擴(kuò)展豐富，支持常見(jiàn)的語(yǔ)法提示代碼高亮自動(dòng)補(bǔ)全Git等功能，使用起來(lái)非常方便，對(duì)于前端網(wǎng)頁(yè)開(kāi)發(fā)來(lái)說(shuō)，是一個(gè)非常不錯(cuò)的選擇2Sublime Text這也是一個(gè)免費(fèi)跨平臺(tái)的代碼編輯器，基本功能和VS Code差不多，輕巧靈活界面簡(jiǎn)潔，支持語(yǔ)法檢查提示智能補(bǔ)全等功能，插件拓展也比較豐富，對(duì)于。

WebStorm 2019 for mac軟件特色如下JavaScript和TypeScript自動(dòng)導(dǎo)入?yún)?shù)提示多行待辦事項(xiàng)覆蓋方法使用箭頭函數(shù)轉(zhuǎn)換等，提升編碼效率構(gòu)架增強(qiáng)Angular模板編輯改進(jìn)Nodejs API支持支持Vuetify組件，提供更全面的開(kāi)發(fā)工具HTML和樣式表輔助功能檢查移動(dòng)并提取規(guī)則集CSS代碼樣式選項(xiàng)刪除；ESLint插件ESLint是一個(gè)用于識(shí)別并報(bào)告JavaScript代碼中模式的工具，旨在使代碼保持一致并避免錯(cuò)誤它為開(kāi)發(fā)者提供了強(qiáng)大的代碼質(zhì)量檢查功能Prettier插件Prettier是一個(gè)代碼格式化工具，支持多種編程語(yǔ)言，包括JavaScriptTypeScriptCSSSCSSLess等，能幫助您統(tǒng)一代碼風(fēng)格，提高代碼可讀性Live Server插件；2 控制臺(tái)Console如同JavaScript開(kāi)發(fā)者的得力助手，控制臺(tái)讓你直接運(yùn)行代碼，查看日志錯(cuò)誤和警告你可以在這里執(zhí)行交互式操作，對(duì)頁(yè)面的JavaScript對(duì)象和變量進(jìn)行深入探索3 源代碼面板Sources這里是代碼的海洋，HTMLCSS和JavaScript文件盡收眼底使用快捷鍵Ctrl + P或Cmd + P快速搜索文件；達(dá)內(nèi)教育1Visual studio是一款由美國(guó)微軟公司開(kāi)發(fā)的開(kāi)發(fā)工具集，簡(jiǎn)稱VS，它包括了整個(gè)軟件的生命周期所需要的大部分工具2PhpStorm是一個(gè)專業(yè)輕量級(jí)且便捷的PHP IDE，旨在提供了用戶效率，可深刻理解用戶的編碼，提供智能的代碼補(bǔ)全，快速導(dǎo)航以及即時(shí)錯(cuò)誤檢查等等強(qiáng)大的功能3Notepad++，能夠支持27種。