前端插件b

Ⅰ 谷歌瀏覽器進行前端開發需要什麼插件

1.firebug:大名鼎鼎的firebug,雖然Chrome自帶的審查元素就很牛叉，不過有的地方還是firebug用得要順手些。審查元素+firebug,雙劍出鞘，威力驚人啊。
2.WebDeveloper:這個也是名氣很大的插件，不錯值得推薦使用。
3.code cola :一款在線修改css的插件，使用很傻瓜化，可以完全不用神馬css代碼，拖動滑塊，選擇屬性是類的操作幫你很迅速的修改css。相當帥氣（國人開發的喲，絕對要支持），對於css不是很熟的童鞋，此插件吐血推薦啊！
4.Editor Lite:一個在線編輯html代碼的插件，可以當成一個簡潔版的Dw編輯器，一些少點的代碼可以在此插件內，很快的編寫，還加入了w3c認證功能，灰常不錯。

Ⅱ 前端可視化開發要用到哪些工具、插件

ThingJS 基於 HTML5 和 WebGL 技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持 PC 和移動設備。ThingJS
為可視化應用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發經驗即可上手。
ThingJS
提供了場景載入、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度雲圖、界面數據展示、粒子效果等各種可視化功能。
ThingJS提供如下相關組件和工具供用戶使用：
CityBuilder：聚焦城市的 3D 地圖搭建工具，打造你的 3D 城市地圖。
CamBuilder：簡單、好用、免費的 3D 場景搭建工具。
ThingPano：全景圖製作工具，輕松製作並開發全景圖應用，實現 3D 宏觀場景和全景微觀場景的無縫融合。
ThingDepot：上萬種模型，數十個行業，自主挑選，一次製作多次復用。

Ⅲ 前端問題 highcharts插件中 tooltip屬性 怎麼設置 讓裡面的內容在一行顯示。

用formatter格式化你的文本。
例：
formatter: function() {
var s = '<b>'+ this.x +point.series.name +': '+point.y'</b>';
return s;
}

Ⅳ 適合前端開發人員的vscode擴展插件有哪些

1，HTML snippets(Visual Studio Code HTML snippets)
這是一款前端開發者必備的擴展，它能將你從手動鍵入每個標簽中解放出來。只需輸入 div 然後按下回車，一對標簽就出現了。更厲害的是，對於需要嵌套的標簽，你可以直接用 ul>li>a 的格式表示，按下回車後就能看到你需要的嵌套。還有一點，這個擴展已經包括所有的 HMTL5 片段。
2，JavaScript (ES6) code snippets
幾乎每個前端程序員都是 JavaScript 的使用者，為了提高編寫 JS 代碼的效率，這個擴展很有用，並且它還支持 .ts, .tsx 和 .jsx 文件。
擴展中有很多快捷縮寫，比如想要調用 export default class ClassName{}，輸入 ecl 按下空格即可。
3，CSS Peek
既然已經分別介紹了 HTML 和 JS 的助手，我們也不能落下 CSS。CSS Peek 是一個支持 .html 和 .js 文件的擴展，它能幫助開發者快速找到和查看選定類或 id 所用的樣式。對於那些不喜歡來回切換文件或者分屏的開發者來說這個擴展很有用。
4，Angular/React/Vue
既然提到了代碼片段，我們最好也提一下每個框架下的不同擴展。
對 AngularJS 來說，Angular Snippets(Version 8)是針對 AngularJS 8 的一款擴展，它為我們提供 Typescript 和 HTML 的代碼片段。
對於 React.js 框架，ES7 React/Rex/GraphQL/React-Native snippets 是一個優秀的擴展，它使用 ES7 提供 React 和 Rex 的代碼片段，用法和 Javascript snippets 類似，都是按空格鍵。
對 Vue.js 開發，有一個叫 Vetur 的擴展相當棒，它目前的下載量已經有將近2,000萬。Vetur 的功能很強大，包括代碼片段，Emmet，錯誤檢查，格式化，調試和高亮語法等。
5，ESLint
如果你想要寫出友好，易讀，干凈的代碼，我建議你在 VSC 中安裝一個 ESLint 擴展，它會幫助你持續養成好的編碼習慣，比如縮進等。
6，Prettier 代碼格式工具
說到漂亮整潔的代碼，Prettier 聽名字你就值得擁有。尤其在項目需要你和其他同事合作完成時，Prettier 會強勢地將代碼格式全部統一，讓你再也不用和同事討論自己的代碼。
7，GitLens
VSC 是整合了 git 功能的，通過安裝 GitLens 這個功能將會更強大，它能讓你看到每一行代碼是由誰在什麼時候寫的，並且快速查看代碼提交詳情，在團隊協作中這個擴展很有用。
8，Auto import 自動導入包
Auto import 是一個自動導入包擴展。如果目前手頭的項目是基於不同組件的，那麼你需要做的就是給每個組件命名，剩下的事交給 Auto import 就好。
9，Path autocomplete 路徑自動補全
提到了導入的問題，另一個重要的擴展就是能夠智能補全導入文件路徑的 Path autocomplete。使用時，輸入 ./ 後你就會看到一個包含所有文件名的下拉菜單。當文件目錄繁雜時，這個擴展真的是很好用，它為你省去了很多一層一層刨開目錄的痛苦。
10，Bracket Pair Colorizer 括弧著色器
括弧著色器能讓我們一眼看出當前代碼塊的反括弧在哪裡。有時候在稍微復雜的函數中，找到正確的那對代碼並不是那麼容易，但 Bracket Pair Colorizer 在你鍵入一個括弧時就為這一對括弧分配了自己的顏色，便於閱讀。
11，Indenticator 縮進指示器
Indenticator 可以高亮顯示出當前縮進的深度，深度由線和點表示，同樣使代碼更整潔，提高代碼易讀性。
12，Debugger for Chrome 調試器
放在最後的是重磅級的調試擴展 Debugger for Chrome。這個插件能讓你在 VSC 裡面直接調試 JS 文件，效果和 Chrome 的控制台中差不多，讓你不用打開瀏覽器就直接打斷點。 （BY三人行慕課）

Ⅳ 前端開發如何引用插件

一般的插件都是有自己的CSS和JS文件的，你直接把它們載入你的head里，如下：

<script src="你找到的插件提供的JS文件地址">

如果你在用J2EE或者，C#MVC框架開發web應用系統的話，有一個神器推薦給你--「活字格」，絕對好用。另外，就是任何的插件都是有說明文檔的你看他的說明文檔怎麼用。

還有，做為一個開發者，糾正你一個名詞，這個一般叫控制項不叫插件 。

Ⅵ Notepad++ 有哪些適用於前端開發的插件

常用的前端開發插件如下：

Emmet
Emmet的前身是Zen Coding，一款使用仿CSS選擇器的語法來快速開發HTML和CSS的插件，是前端開發神器。它無視了編輯器的自動提示和自動完成，秒殺了你自定義的各種快捷鍵或者 AHK 的熱字元串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種復雜而枯燥的 HTML 和 CSS 代碼的體驗。現在可以在Notepad++的插件管理器里直接安裝了。

Finger Text

標簽代碼替換和文本自動完成插件，編輯器配合這個功能可以有效地提升代碼的書寫速度，提高自己的工作效率，例如我輸入if然後按Tab鍵將會把if替換成一個完整的if結構，可以極大的提高效率，當然具體怎麼替換是可以配置的。

TextFx
這個號稱是Notepad++上面最好用的plugin，具有超強的文本處理能力，比如文本編碼處理等。編程某種程度上就是文本工作，所以這個插件對開發人員應該是非常有幫助的。以前是默認安裝的，現在需要自己手動安裝。

Task List
自動掃描當前文檔，將所有"TODO:"開頭的注釋都找出來，列在右邊的面板中，雙擊可以跳轉該行。這和Eclipse里的TODO功能很相似，便於標記查找沒有完成的工作。

HTML Tag
編輯HTML代碼時比較有用，它主要的功能是匹配選擇的標簽，對HTML標簽編碼及解碼，對JS編碼及解碼，我認為對HTML標簽編碼及解碼是最有用的功能了。

TagsView
可以列出當前文檔的全局變數，函數列表等，方便查找定位函數，變數等。

JSON Viewer
可以以樹的形式查看JSON，同時可以格式化JSON，增加縮進。

JSLint
JSLint一個JavaScript語法檢查工具，可以檢查你的代碼是否優秀，規則請參考<<JavaScript語言精粹>>。

RegEx Helper
在文檔的中匹配正則表達式，可以用來測試正則表達式。

Compare Plugin
一個非常實用的工具，可以用來比較兩個文件不同之處，主要用來對比相鄰的兩個文件。

Explorer
一個文件瀏覽窗口，可以在裡面創建文件，文件夾等。還可以快速定位當前打開的文件的文件夾。

File Switcher
一個快速切換窗口的工具，支持通過輸入文件名，路徑或者tab index來查找切換，可以用來替換默認的Ctrl + Tab。

Ⅶ 前端組件和插件的區別

組件：組件這個詞通常是現在描述產品的時候出現，一個大的產品會有很多小的部分組成，而小的部分除了是一個大的組件的部分以外，自己可能還包含更小的組件，所以組件是遞歸的，那麼組件到底是什麼呢？最常見的組件就是我們已經寫好的程序代碼，任何一小段代碼都可以是一個組件，它可以和其它代碼段連接起來組成更大的一段程序代碼，一個更大的組件，然後可能是一個函數，或者一個類程序單元，或者數個類單元文件的集成，當不同的組件的組裝形成更大的組件時候，我們實際就是在做我們通常提到的一件事情：集成，軟體中有很多集成工作要做，每日集成，重要版本集成等等。
插件：根據對組件和模塊的分析，插件屬於組件，而且還是一個程序模塊，也是一個功能模塊。插件是一種電腦程序，通過和應用程序的互動，來替應用程式增加一些特定的功能。
插件必須依賴於應用程序才能發揮自身功能，僅靠插件是無法正常運行的。

Ⅷ 前端開發有什麼插件可以實時看到頁面效果

在IDE中進入「文件（File）→設置（Settings）→插件（Plugins）」中查找LiveEdit。如果你用的IDE版本沒有內置這一插件，可以點擊，會自動載入插件列表，這個過程可能會等待一段時間，請保持耐心。然後找到插件，點擊下載即可。隨後根據提示重啟IDE。

Ⅸ 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

• underscore.js

• lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

• Sugar在原生對象上增加一些工具方法

• functional.js提夠了一些Curry的支持

• Watch.js監視對象或屬性的變化

• bacon.js函數式編程，cool

• streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

• eventproxy朴靈出品

• Arbiter.js詳細

• 發布訂閱

• qPromise風格的

• Async.js

mock

• Mock.js生成隨機數據和mock Ajax 請求

• jquery-mockjaxmockajax請求

時間庫

• moment

• datejs

瀏覽器探測

• Bowser探測具體瀏覽器和版本

• ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

• console-polyfill能放心的使用 console.log()之類的console方法

• log讓控制台輸出的log有樣式

• Konsole.js在頁面的一個元素里輸出log信息詳細

• uri.jsuri操作

• cookie增刪改cookie的工具庫

• director前端路由庫詳細

• BigDecimal.js提高精度的數字操作

• JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

• hotkeys鍵盤事件的封裝

• MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

• Selectivizr讓IE 6-8一些的css3選擇器

• ieBetter讓ie6-8有高級瀏覽器的特性

• ExplorerCanvas讓IE8-的瀏覽器支持canvas

• CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

• formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

• https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

• HTML5 Cross Browser Polyfills一堆Polyfills

• flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

• Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

• prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

• jquery-file-upload上傳文件組件詳細

• zTree文件樹形視圖控制項

• Treed樹編輯器。感覺展示的感覺很像思維導圖

• FileAPI對文件選擇框內的文件的一些處理

表單驗證

• .Validate詳細

• jQuery-Validation-Engine

表單元素美化

• uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

• select2多選下拉框

• selectivity和unfirom比較類似

• DropKick下拉框，單，多選。外觀比uniform好

• switcheryios7風格的開關組件

• nouislider用滾動條來設置/控制（音量等）

• range.css美化input[type=range]元素的外觀

圖片類

• holderjs生成占點陣圖片

• lazyload

• imagesLoaded選取的圖片都載入好後執行調回

• CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

• Icon Font匯總

• SVG做的圖標

• svgicons

• iconic

• HYBICON帶交互效果。如 hover, click

• HTML字元實體圖標

• http://www.amp-what.com/

• transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

• css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

• fancybox彈出查看圖片，視屏等等demo

• yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

• wookmark

UI 框架

• WeUI由微信官方設計團隊為微信 Web 開發量身設計。

• Framework7

UI 組件類

拖拽

• dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

• angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

• Echarts網路出品

• highcharts功能強大。是收費的。

• Plottable.JS基於D3的一個圖表庫

• flot文檔不給力

• chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

• ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

• foundation-datepicker

• DatePicker一個簡單的日歷詳細

• full calendar支持脫放的方式來改變待辦事宜的時間

• Simple Events Calendar外觀很喜歡。收費 5$

• jQuery ui datepicker經典，不是很好看

• pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

• zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

• bootstrap-datepickerbootstrap風格。

• dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

• perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

• iscroll在移動設備上用不錯

載入(Loding)效果

• CSS SpinnersCSS做的

• Loaders.cssCSS做的

表格組件

• jsGridData Grid。詳細

• backgrid基於Backbone.js的DataGrid

• excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

• datatables表格可交互（對內容進行排序，刪除等）

• handsontable生成Excel外觀的數據

• JSpreadsheets表格數據的組件庫

選取顏色

• Spectrum

分享到SNS

• JiaThis生成分享代碼。

編輯器

• ace代碼編輯器，可以用來做demo演示

• ckeditor

• ueditor網路做的

• tinymce對html內容進行實時的編輯

• summernote在移動設備上用不錯

通知組件

• notie.js

HTML5播放器

• jwplayer被大量網站使用

• html5media簡單的h5player，輕量級

• jplayer功能強太，可換膚

展示

• Impress.js各種旋轉，和奇特的體驗

• fullPage全屏顯示。用滾輪來翻頁詳細

• zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

• pagePiling和fullPage類似

• turn.js做一本書，帶漂亮的翻頁的效果

幻燈

• slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

• iSlider無任何插件依賴的手機平台javascript滑動組件詳細

• bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

• Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

• coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

• wowslider幻燈切換時各種很炫的效果。收費。

• cycle2普通的幻燈，竟然不支持垂直滾動。。。

• jcarousel普通的幻燈，不兼容IE6

• reveal3d滾動。做ppt相當不錯

• nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

• roundabout3d切換，看的後面圖片的邊

彈出框

• Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

• layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

• mixitup用漂亮的動畫效果來完成排序和篩選

• jQuery.Marquee跑馬燈效果

• quickflip卡片翻轉效果

• 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

• TheaterJS模擬兩個人在屏幕上對話

• midnight.js文字顏色隨著背景變，屌炸了

• color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

• transit對元素進行css的變換

• tagcanvas3D標簽雲效果詳細

• iconate圖片切換動畫

• Snap.js左/右側導航的出現效果

• CSS shake抖動動畫

• ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

• scrollorama比較簡單

• superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

• scrolldeck

flash

• swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

• wScratchPad刮刮卡刮獎效果

• jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

用戶體驗增強類

• Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

• blockUILolding組件。

• simple-hint提示信息。用css做的。兼容性IE 9+。

• dotdotdot文字溢出時，添加在文字末尾加省略號

• jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

• AnythingZoomer放大鏡功能

• 美化/高亮語法代碼

• google-code-prettify

• DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

• please按要求隨機舒服的顏色

• Awesomplete輸入的智能提示，自動補全

• proTip提示。感覺比 Bootstrap 的 tip 好

• Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

• velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

SVG

• Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

• walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

• Mocha

• Chai

• Should

• Snoion

• DeviceMock.jsmock 設備。

其他類

• ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

• html2canvashtml轉化成canvas，可以用來做截圖。詳細

• Ink響應式html郵件框架

• 性能測試

• 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

• jFeed

• jRss簡單版的jFeed

• scriptcam與攝像頭交互

• cylon.js機器人框架，支持35個平台

• Masonry一個瀑布流框架

• devices.css移動設備邊框的外觀。做原型的時候用不錯。

Bootstrap相關類

• Bootbox.js對bootstrap的彈出框做的一些封裝

• 免費皮膚

• AdminLTE

JS Plugins倉庫

• jQuery Cards高質量的 jQuery 插件網站

• jster

• node moles

• npmrankSort npm packages by page rank

• YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

• awesome-nodejs

• Libraries.io各種語言的庫

• OniUI去哪兒網做的一套基於Avalon的框架

常用的移動端框架

zepto.js

語法與jquery幾乎一樣，會jquery基本會zepto~

最新版本已經更新到1.16

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引起的問題~

實現下拉刷新，滑屏，縮放等功能~

最新版本已經更新到5.0

underscore.js

筆者沒用過，不過聽說好用，推薦給大家~

該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

最新版本已經更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

Ⅹ 前端開發中有哪些插件或組件，值得自己去實現一次

基礎：圖片懶載入，滾動到底部載入，tab選項卡，幻燈片輪播
高級：富文本編輯器