HTML

• awesome-html5 精選的HTML5資源精選清單

CSS

• tailwindcss 與Tailwind CSS相關的很棒的事情
• awesome-css-frameworks 很棒的CSS框架列表
• awesome-css-cn CSS 資源大全中文版，內容包括：CSS預處理器、框架、CSS結構、代碼風格指南、命名習慣等等
• awesome-css 精彩CSS的精選內容:)

預處理器

Sass

• sass 專業級 CSS擴展語言。

Less

• lesscss - 動態樣式表語言。

Styuls

• stylus 為Node.js構建的富有表現力，健壯，功能豐富的CSS語言

樣式初始化

• CSS Reset(樣式重置)與Normalize.css詳解

Normalize.css

• Normalize.css CSS重置的現代替代方法

Tailwindcss

• tailwindcss 實用程序優先的CSS框架，用于快速UI開發。

Materializecss

• materializecss
• Materialize，一個基于Material Design的CSS框架

Bootstrap

• bootstrap
• 最受歡迎的HTML，CSS和JavaScript框架，用于在網絡上開發響應式，移動優先項目。

Postcss

• postcss
• PostCSS是使用JS插件轉換樣式的工具。這些插件可以使您的CSS更加整潔，支持變量和混合，可以轉換將來的CSS語法，內聯圖像等等。
• PostCSS接收一個CSS文件，并提供一個API來分析和修改其規則（通過將其轉換為 Abstract Syntax Tree）。然后，插件可以使用此API進行許多有用的操作，例如自動查找錯誤或插入供應商前綴。

Javscript

• awesome-javascript-cn JavaScript 資源大全中文版，內容包括：包管理器、加載器、測試框架、運行器、QA、MVC框架和庫、模板引擎等
• awesome-javascript 很棒的瀏覽器端JavaScript庫，資源和閃亮的東西的集合。
• standardjs JavaScript樣式指南，帶有linter和自動代碼修復程序
• You-Dont-Know-JS 有關JavaScript的書籍系列。@YDKJS在Twitter上。

TodoMVC

• todomvc 幫助您選擇MV *框架-適用于React.js，Ember.js，Angular等的Todo應用程序

date-fns

• date-fns 現代JavaScript日期實用程序庫

函數庫

Underscore & Lodash

• lodash
• underscore
• 現代化的JavaScript實用程序庫，提供模塊化，性能和附加功能。

Ramda

• ramdajs 實用的功能性Javascript

Moment

• momentjs 用javascript解析，驗證，操作和顯示日期。

day.js

• day.js 具有相同現代API的Day.js 2KB不可變日期時間庫替代Moment.js

Mathjs

• mathjs 廣泛的JavaScript和Node.js數學庫

Polish

• polish.js 用于編寫JavaScript樣式的輕量級工具集

Chance

• chancejs JavaScript的隨機生成器幫助器

HTTP

Httpie

• httpie 就像/ aitch-tee-tee-pie / ????適用于API時代的現代，用戶友好的命令行HTTP客戶端。JSON支持，顏色，會話，下載，插件等。

Netdata

• netdata 實時性能監控

Axios

• axios 基于Promise的HTTP客戶端，用于瀏覽器和node.js

json-server

• json-server 在不到30秒的時間內（嚴重）獲得具有零編碼的完整假REST API

Svelte

• svelte 控制論增強的Web應用程序

Vite

• vite 由本機ESM驅動的Web開發構建工具。它很快。

Vue.js

• vuejs 官網 Vue.js是一個漸進的，可逐步采用的JavaScript框架，用于在Web上構建UI。

• awesome-vue 與Vue.js相關的精彩內容精選清單

• best-resume-ever 快速建立 ????輕松制作多張漂亮的簡歷，創造有史以來最好的簡歷！用Vue和LESS制成。

  • vue 案例 眾多 vue 組件庫

組件庫

Element

• element 適用于Web的Vue.js 2.0 UI工具包

iView

• iview 基于Vue.js 2.0的高質量UI工具包

Vuetify

• vuetifyjs Vue的組件框架

Ant Design Vue

• antdv 基于Ant Design和Vue的企業級UI組件。

Quasar Framework

• quasar Quasar Framework-在創紀錄的時間內構建高性能VueJS用戶界面

Vue Cli

• vue cli Vue.js開發的標準工具

Vuex

• vuex Vue.js的集中狀態管理。

vue-router

• vue-router Vue.js的官方路由器

Weex

• weex 用于構建移動跨平臺UI的框架

Nuxt

• nuxtjs 直觀的Vue框架

React

• reactjs 用于構建用戶界面的聲明性，高效且靈活的JavaScript庫。
• awesome-react 關于React生態系統的很棒的東西的集合

組件庫

Ant Design

• ant.design UI設計語言和React UI庫

Bulma

• bulma 基于Flexbox的現代CSS框架

Material UI

• material-ui 使用React組件進行更快，更簡單的Web開發。建立自己的設計系統，或從材料設計開始。

Semantic UI

• Semantic-UI 語義是一個基于自然語言的有用原理的UI組件框架。

Chakra UI

• chakra-ui 適用于您的React應用程序的簡單，模塊化和可訪問的UI組件

React Bootstrap

• react-bootstrap

工具庫

Reactvirtualized

• reactvirtualized React組件可有效呈現大型列表和表格數據

React Select

• react-select React.js的Select組件

React Beautiful DND

• react-beautiful-dnd 使用React輕松美觀地拖放列表

React Chrono

• react-chrono React的現代時間軸組件

Swr

• swr React Hooks庫用于遠程數據獲取

React Query

• react-query 在React中獲取，緩存和更新異步數據的鉤子

Redux

• redux
• JavaScript應用程序的可預測狀態容器

React Router

• react-router React的聲明式路由

Create React App

• create-react-app 通過運行一個命令來設置現代Web應用程序。

Create React Native App

• create-react-native-app 創建可在iOS，Android和Web上運行的React Native應用

Next.js

• nextjs React框架

Deno

• deno 社區
• deno 安全的JavaScript和TypeScript運行時

Node.js

• node Node.js JavaScript運行時

教程

• node-lessons 《Node.js 包教不包會》
• awesome-nodejs 令人愉快的Node.js軟件包和資源
• nodepractices Node.js最佳實踐列表（2020年12月）
• cnode Node 社區

工具集

nodemon

• nodemon 監視node.js應用程序中的任何更改并自動重啟服務器-非常適合開發

pm2

• pm2 帶有內置負載均衡器的Node.js Production Process Manager。

...

AdminBro

• AdminBro是一個用node.js編寫的應用程序的管理面板

Cote

• cote.js 用于構建零配置微服務的Node.js庫。

Socket.io

• socket.io 實時應用程序框架（Node.JS服務器）

Nw

• nwjs 直接從DOM / WebWorker調用所有Node.js模塊，并啟用一種使用所有Web技術編寫應用程序的新方式。

Straip

• strapi 開源Node.js Headless CMS可輕松構建可定制的API

Express

• express 快速，簡單，極簡的Node Web框架。

Koa

• koa 使用ES2017異步函數的node.js的表達中間件

egg

• eggjs 為使用Node.js和Koa構建更好的企業框架和應用而生

Adonis

• adonisjs Node.js框架高度關注開發人員的人機工程學，穩定性和信心

Nest

• nest
• 一個漸進式的Node.js框架，用于在TypeScript和JavaScript（ES6，ES7，ES8）之上構建高效，可伸縮的企業級服務器端應用程序

Next

• nextjs React框架

Nuxt

• nuxtjs 直觀的Vue框架

Electron

• electronicjs
• Electron框架使您可以使用JavaScript，HTML和CSS編寫跨平臺的桌面應用程序。它基于Node.js和 Chromium，并且被Atom編輯器、VSCode和許多其他應用程序使用。

puppeteer

• puppeteer

Puppeteer是一個Node庫，它提供了高級API來通過DevTools協議控制Chrome或Chromium 。Puppeteer默認情況下無頭運行，但可以配置為運行完整（無頭）的Chrome或Chromium。

富文本編輯器、代碼編輯器

富文本編輯器

Simditor

• simditor 便捷的所見即所得編輯器

tui.editor

• tui.editor Markdown所見即所得編輯器。GFM標準+圖表和UML可擴展

Quill

• quilljs Quill是一種現代的WYSIWYG編輯器，旨在實現兼容性和可擴展性。

Draft

• draftjs 一個用于構建文本編輯器的React框架。

MavonEditor

• mavonEditor mavonEditor-基于Vue的markdown編輯器，支持多種個性化功能

Tiptap

• tiptap Vue.js的無渲染富文本編輯器

Vue Quill Editor

• vue-quill-editor @quilljs的編輯器組件@vuejs

Tinymce

• tinymce
• TinyMCE是世界上最受歡迎的基于Web的開源WYSIWYG編輯器。用于富文本編輯。適用于React，Vue和Angular

Simplemde

• simplemde
• 一個簡單，美觀，可嵌入的JavaScript Markdown編輯器。無論是初學者還是專家，都可輕松編輯。具有內置的自動保存和拼寫檢查功能。

Simplemde Markdown Editor

• simplemde-markdown-editor
• 一個簡單，美觀，可嵌入的JavaScript Markdown編輯器。不論是初學者還是專家，都可輕松編輯。具有內置的自動保存和拼寫檢查功能。

Editor

• editor.js 具有干凈JSON輸出的塊樣式編輯器

Medium Editor

• medium-editor Medium.com所見即所得的編輯器克隆。使用contenteditable API來實現RTF解決方案。

代碼編輯器

CodeMirror

• codemirror 瀏覽器內代碼編輯器

Monaco Editor

• monaco-editor 基于瀏覽器的代碼編輯器

UI 色彩搭配

• web 安全色
• Adobe Color
• 中國色
• uigradients
• palettable 利用數百萬設計師的知識生成漂亮的調色板。
• colorsupplyyy 設計師和插畫家的選色器
• webgradients 是180個線性漸變的免費集合，您可以將其用作網站任何部分的內容背景。輕松復制CSS3跨瀏覽器代碼
• colrd 創造色彩靈感并與世界分享。
• 配色表 網頁設計常用色彩搭配表

后臺管理項目

Vue-Element-Admin

• vue-element-admin 是一個后臺前端解決方案，它基于 vue 和 element-ui實現。

iview-admin

• iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺集成解決方案，由 TalkingData 前端可視化團隊部分成員開發維護。

ant-design-pro

• ant-design-pro 像專業人士一樣使用Ant Design！
• 開箱即用的中臺前端 / 設計解決方案。

vue-admin-beautiful

• vue-admin-beautiful
• vue3，vue3.0，vue，vue3.x，vue.js，后臺管理，管理員，vue-admin，vue-element-admin，主線版本基于element-plus，element-ui，ant-design-vue三者并行開發維護，同時支持電腦，手機，平板，切換分區查看不同的vue版本，element-plus版本已發布（vue3，vue3.0，vue，vue3.x，vue.js）

antd-admin

antd-admin 基于Ant Design和UmiJS的企業應用程序的出色前端解決方案

AdminLTE

• AdminLTE AdminLTE-基于Bootstrap 4的免費管理儀表板模板

Tabler

• tabler Tabler是免費的開源Bootstrap構建的HTML Dashboard UI套件

GIS 和 BIM

• BIM+GIS是什么？BIM+定位系統能干嘛？
• 地理信息系統（GIS）是用來管理地理空間分布數據的計算機信息系統。

cesium

• Cesium 官網
• Cesium 是三維地理可視化的常用庫，在大尺度的可視化（地形、建筑、地球）中十分常用。

Leaflet

• Leaflet 是最著名的前端地圖可視化庫，它開源、體積小、結構清晰、簡單易用。
• 適用于移動設備的交互式地圖的JavaScript庫

mapbox

• mapbox 官網
• Mapbox GL JS 是目前最新潮的前端地圖庫，它的矢量壓縮、動態樣式和三維性能令人印象深刻。它本身是開源的，但一般依賴于Mapbox公司提供的底圖服務。
• Mapbox.js 是 Leaflet 的一個擴展插件（與 Mapbox GL JS 不同）。

ArcGIS

• ArcGIS API for JS 是較為學院派的前端地圖庫，它是ArcGIS開發套件中的一部分，和桌面端和服務器端ArcGIS軟件有較好的協作。它不開源且收費不低，在學術場景下較為常用。

Openlayers

• Openlayers 也是常用的前端地圖庫，它開源，相比于Leaflet更加復雜和完備。

百度地圖 JS /百度地圖 GL

• 百度地圖 JS API 是傳統的二維地圖，百度地圖 API GL 是三維地圖，它們依賴百度地圖提供的后臺服務。除了地圖服務外還有檢索、導航、實時交通等關聯服務。開發者有免費的限額。

高德地圖 JS

• 高德地圖 JS API 與百度類似。

Google Maps JS

• 谷歌地圖 JS API 在境外有更好的數據。

AntV L7

• AntV L7 是空間數據可視化庫，它可以使用高德地圖等協作構建地圖可視化。

團隊

GIT

• learnGitBranching 交互式的git可視化挑戰和教育！
• Git使用教程：最詳細、最傻瓜、最淺顯、真正手把手教！
• 「一勞永逸」一張腦圖帶你掌握Git命令
• git基本操作，一篇文章就夠了！
• 如何優雅地使用 Git
• VSCode 中使用Git實踐，學會了效率翻倍
• 超詳實Git簡明教程與命令大全
• 優雅的提交你的 Git Commit Message
• 高頻使用的 Git 命令

husky

• husky
• Git鉤子變得容易 ???? 緯！預提交鉤子

Pre Commit

• pre-commit
• 自動在您的git儲存庫中安裝git pre-commit腳本，該腳本在pre-commit上運行您的npm test

lint-staged

• lint-staged 在git暫存文件上運行linters

Plop

• 一致性變得簡單
• Plop是一個小工具，可以節省您的時間并幫助您的團隊以一致的方式構建新文件。

hyper

• hyper 基于Web技術的終端

Rocket.Chat

• rocket.chat/ 團隊溝通的終極免費開源解決方案。

靜態網站生成器

• 靜態網站生成器（SSG，Static Site Generator）是指能夠生成一堆 HTML、CSS、JS 文件，方便你快速部署到 WEB 服務器上而不需要安裝和配置數據庫的工具。
• 靜態網站具有速度快，穩定且易于維護的特點。

Gatsby

• Gatsby 使用React構建快速、現代化的應用程序和網站

react-static

• react-static 一個用于React的漸進式靜態站點生成器。

Hexo

• hexo 由Node.js提供支持的快速、簡單且功能強大的博客框架。

VuePress

• VuePress ???? 簡約的Vue供電的靜態網站生成器

Docusaurus

• docusaurus 易于維護的開源文檔網站。

Docsify

• docsify 一個神奇的文檔站點生成器。

API 開發工具

Hoppscotch

• hoppscotch
• 一個免費，快速，美觀的API請求構建器，供10萬多個開發人員使用。
• Hoppscotch 其實是 Postwoman，是基于nodejs寫的，主要特點除了可以支持主流的Restful接口調試之外，還支持 GraphQL和 WebSocket。

Postman

• postman
• Postman是用于API開發的協作平臺。Postman的功能簡化了構建API的每個步驟并簡化了協作，因此您可以更快地創建更好的API。

代碼規范

ESLint

• ESLint 查找并修復JavaScript代碼中的問題。

Prettier

• Prettier 是一個自以為是的代碼格式化程序。

構建工具：Build Tools

Parcel

• parcel 快速，零配置的Web應用程序捆綁程序
• Parcel 不僅提供現代前端開發所需的各種功能，還有個碾壓性的優勢：零配置！這是它與依靠大量 "loaders" 的 Webpack 最大區別。

Webpack

• webpack
• javascript和朋友的捆綁器。將許多模塊打包到少數捆綁資產中。代碼拆分允許按需加載應用程序的某些部分。通過“加載程序”，模塊可以是CommonJs，AMD，ES6模塊，CSS，圖像，JSON，Coffeescript，LESS等。

Gulp

• gulp
• 自動化和增強您的工作流程的工具包

Rollup

• rollupjs
• 下一代ES模塊捆綁器

測試框架

Jest

• jestjs
• 令人愉快的JavaScript測試。

AVA

• ava
• Node.js測試運行器，使您充滿信心地進行開發

Cypress

• cypress 對瀏覽器中運行的所有內容進行快速，輕松和可靠的測試。

Puppeteer

• Puppeteer 無頭的Chrome Node.js API

IDE 和 編輯器

集成開發環境（IDE，Integrated Development Environment ）是用于提供程序開發環境的應用程序，一般包括代碼編輯器、編譯器、調試器和圖形用戶界面等工具。集成了代碼編寫功能、分析功能、編譯功能、調試功能等一體化的開發軟件服務套。所有具備這一特性的軟件或者軟件套（組）都可以叫集成開發環境。如微軟的Visual Studio系列，Borland的C++ Builder、Delphi系列等。該程序可以獨立運行，也可以和其它程序并用。IDE多被用于開發HTML應用軟件。

VS Code

• vscode

Atom

• Atom
• 可破解文本編輯器

Sublime

• sublime
• 復雜的文本編輯器，用于代碼，標記和散文

編譯工具

TypeScript

• typescript TypeScript是JavaScript的超集，可編譯為干凈的JavaScript輸出。

Flow

• flow 在JavaScript中添加靜態類型，以提高開發人員的工作效率和代碼質量。

Babel

• babel Babel是用于編寫下一代JavaScript的編譯器。

圖標、字體庫

圖標庫

Iconfont

• iconfont 阿里巴巴矢量圖標庫

Material Design icons

• Material Design icons Google的Material Design圖標，其中還包含了顏色板預覽

IcoMoon

• IcoMoon 免費矢量圖標

Orion

• Orion 免費SVG矢量圖標

Font Awesome

• fontawesome 標志性的SVG，字體和CSS工具包

SuperTinyIcons

• SuperTinyIcons 每個1KB以下！Super Tiny Icons是您喜歡的網站和應用程序徽標的微型SVG版本

Feather

• feather 簡單漂亮的開源圖標

Zondicons

• zondicons 一組免費的高級SVG圖標，供您在數字產品上使用

Ionicons

• ionicons 由Ionic打造的高級手工制作圖標，適用于世界各地的Ionic應用程序和Web應用程序

Maki

• Maki POI圖標集
• Maki是專為地圖設計師設計的圖標集。Maki包括 公園，博物館和禮拜場所等常見景點的圖標。每個圖標都可用作SVG，有兩種尺寸：11px x 11px和15px x 15px。

字體

Google Fonts

• Google 字體

Free Fonts

• free font

CSS 動畫庫

• 挑選的是一些近一年都在維護的動畫庫

Keyframes

• keyframes 關鍵幀可幫助您編寫更好的CSS

Spinkit

• spinkit 用CSS制作動畫的加載指示器的集合

Animate.css

• animate
• Animate.css是一個可在您的Web項目中使用的即用型跨瀏覽器動畫庫。非常適合強調，主頁，滑塊和引導注意的提示。

Anime

• anime JavaScript動畫引擎

Svg

• svgjs 用于操作和動畫SVG的輕量級庫

Snap

• snapsvg 用于現代SVG圖形的JavaScript庫。

Dynamics

• dynamicsjs Dynamics.js是一個JavaScript庫，用于創建基于物理的動畫

Three

• three.js JavaScript 3D庫

ScrollReveal

• scrollrevealjs 在元素滾動到視圖時對其進行動畫處理。

GSAP

• GSAP 適用于現代網絡的專業級JavaScript動畫

Magic

• magic 具有特殊效果的CSS3動畫

Pixi

• pixi.js HTML5創建引擎：使用最快，最靈活的2D WebGL渲染器創建精美的數字內容。

Tween

• tween.js JavaScript動畫引擎

ScrollTrigger

• ScrollTrigger 讓您的頁面對滾動更改做出反應。

Parallax

• parallax
• 對智能設備的方向做出反應的視差引擎
• 挺好看的，但是很久沒維護了

Matter

• Matter

文件上傳

Uppy

• uppy
• Web瀏覽器的下一個開源文件上傳器

FileSaver

• filesaver HTML5 saveAs() FileSaver實現

Filepond

• filepond 靈活有趣的JavaScript文件上傳庫

React Dropzone

• react-dropzone 使用React.js的簡單HTML5拖放區。

UI

Layui

• layui 采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫形式，極低門檻，拿來即用。

Styled Components

• styled-components 組件年齡的視覺圖元。使用ES6和CSS的最佳功能來輕松設置應用樣式

Tailwindcss

• tailwindcss 實用程序優先的CSS框架，用于快速UI開發。

Storybook

• storybook UI組件瀏覽器。為React，Vue，Angular，Ember，Web Components等開發，記錄和測試！

Ionicframework

• ionicframework
• 功能強大的跨平臺UI工具包，用于使用HTML，CSS和JavaScript構建本機質量的iOS，Android和Progressive Web Apps。

Material Design Lite

• getmdl HTML / CSS / JS中的材料設計組件

Reveal.js

• revealjs 是一個開放源代碼HTML表示框架。它是一種工具，使任何使用Web瀏覽器的人都可以免費創建功能齊全且美觀的演示文稿。

Headlessui

• headlessui 完全無樣式的，完全可訪問的UI組件，旨在與Tailwind CSS完美集成。

圖表、數據可視化

Chart

• chartjs 使用 <canvas> 標簽的簡單HTML5圖表

D3

• d3 借助SVG，Canvas和HTML使數據栩栩如生。

Incubator Superset

• superset.incubator Apache Superset是一個數據可視化和數據探索平臺

echarts

• echarts Apache ECharts（正在孵化）是用于瀏覽器的功能強大的交互式圖表和數據可視化庫

移動端

uni-app

• uni-app 是使用Vue語法開發小程序，H5，App的統一框架

weex

Create React Native App

Flutter

MPVue

• mpvue 基于Vue.js的小程序開發框架，從長期支持Vue.js語法和內置工具體系。

Taro

• taro
• 開放式跨端跨框架解決方案，支持使用陣營/ Vue公司/ NERV等框架來開發微信/京東/百度/支付寶/字節跳動/ QQ小程序/ H5等應用。

Lottie Web

• lottie-web 在Web，Android和iOS以及React Native上本地渲染After Effects動畫。

DiscreteScrollView

• DiscreteScrollView
• 可滾動的項目列表，以當前元素為中心，并提供易于使用的API（用于酷炫的項目動畫）。

Android-SpinKit

• Android-SpinKit Android加載動畫

React Native Elements

• react-native-elements 跨平臺React Native UI工具包

React Native Firebase

• react-native-firebase
• 經過測試的功能豐富的模塊化Firebase實施，用于React Native。同時支持所有Firebase服務的iOS和Android平臺。

React Native Snap Carousel

• react-native-snap-carousel
• React Native的滑動器/旋轉木馬組件，具有預覽，多種布局，視差圖像，對大量項目的高性能處理等。與Android和iOS兼容。

React Native Calendars

• react-native-calendars 關于反應本機日歷組件 ????? ????

Joplin

• joplin
• Joplin-具有Windows，macOS，Linux，Android和iOS同步功能的開源筆記記錄和待辦事項應用程序

Appium

• appium ???? 適用于iOS，Android和Windows Apps的自動化。

NativeBase

• NativeBase React Native的基本跨平臺UI組件

Framework7

• framework7 用于構建iOS和Android應用程序的全功能HTML框架

VSCode 插件

• 具體可以看 CRPER 掘金的 VSCode 文章，從第一篇開始，好像總共十五篇，下面扒下一些用過的
• VS Code折騰記 - (1)扯淡

vue

• vue-vscode-snippets vue 代碼片段
• Vuter
• Vue TypeScript Snippets : 針對vue的ts代碼片段

React

• ES7 React/Redux/GraphQL/React-Native snippets :最好用的snippet匯總,非常全面,墻裂推薦!!!
• React Native Snippet: RN 代碼片段
• react-explorer-addons: 增加鼠標右鍵直接生成react的組件模板,好不好用,用過的才知道
• React PropTypes Intellisense: React props的智能提示
• vscode-styled-components: 對styled-componnents的支持,高亮包括智能提示
• styled-components-snippets : styled-components的代碼片段
• React PropTypes Generate : 一鍵生成react的proptypes , 不用ts的小伙伴必備

微信小程序

• mpvue snippets: mpvue的一些代碼片段,以及部分原生小程序的代碼提示
• minapp : 用VS Code寫小程序必備的插件,里面有眾多實用的特性集成

代碼測試

• Jest: 讓你寫Jest代碼有IDE的感覺
• Mocha Test Explorer: 針對mocha測試的GUI話,會給編輯器多一個獨立的版塊
• Coverage Gutters : 可以直觀的看到你代碼覆蓋率的區域

代碼可視化改善

• Polacode : 生成精美的代碼截圖,很漂亮,根據你當前主題配色生成的
• vscode-pigments: 代碼頁面展示顏色代碼并展示對應的顏色,非常實用
• Json Editor : 非常實用的可視化JSON編輯,不容錯過
• Subtle Match Brackets:快速高亮你配置的閉合,對于聚焦我們的光標區塊代碼很有幫助
• vscode-live-server : 非常全面的HTML預覽工具,支持眾多實際開發需要的特性,比如https,代理,cros

格式化

• prettier
• ESLint
• Prettier ESLint

主題

• Dainty
• Umi
• Min Theme
• Snazzy Plus
• Hypersubatomic
• VSCode Great Icons
• Vue Theme
• Palenight Theme
• Horizon Theme

雜亂的工具

Epic Spinners

• epic-spinners 易于使用的CSS微調器集合與Vue.js集成

Nprogress

• nprogress 適用于YouTube，Medium等上的苗條進度條

Nodemailer

• nodemailer 使用Node.JS發送電子郵件-就像蛋糕一樣容易！

Driver

• driver 輕巧，無依賴的原始JavaScript引擎，可在頁面上吸引用戶的注意力

Dayjs

• dayjs 具有相同現代API的Day.js 2KB不可變日期時間庫替代Moment.js

Glider

• glider.js 快速，輕巧，無依賴的本地滾動輪播替代品！

Mockjs

• mock 模擬數據生成器

Faker

• faker.js 在Node.js和瀏覽器中生成大量逼真的假數據

Sailsjs

• sailsjs 適用于Node.js的實時MVC框架

Swiper

• swiper 最現代的移動觸摸滑塊，具有硬件加速的過渡

fullPage 全屏滾動

• fullPage Alvaro Trigo的fullPage插件。快速簡單地創建全屏頁面

screenfull.js 全屏

• screenfull 用于JavaScript全屏API的跨瀏覽器使用的簡單包裝

html2canvas 屏幕截圖

• html2canvas 使用JavaScript的屏幕截圖

Prism 代碼高亮

• prism 輕巧，健壯，優雅的語法突出顯示。

Draggabilly 拖拽

• draggabilly 使該元素可拖動

Modernizr

• modernizr Modernizr是一個JavaScript庫，可檢測用戶瀏覽器中的HTML5和CSS3功能。

html5-boilerplate 模板

• html5-boilerplate 專業的前端模板，用于構建快速，健壯和適應性強的Web應用程序或網站。

Magic Of Css

• magic-of-css CSS課程，使您成為魔術師。

Odometer

• odometer 輕松平滑地過渡數字

Proton 粒子

• proton Javascript粒子動畫庫

particle.js 粒子

• particle 用于創建粒子的輕量級JavaScript庫

ParticleEffectsButtons

• ParticleEffectsButtons 一個小的庫，可用于使按鈕和其他元素上的粒子效果破裂

Fabric.js 畫布

• fabric
• Hyperledger Fabric是用于開發解決方案和應用程序的企業級許可的分布式分類帳框架。其模塊化和通用設計滿足了廣泛的行業用例。它提供了一種獨特的共識方法，可在保持隱私的同時實現大規模性能。

Sortable

• Sortable 通過拖放創建列表并重新排序。適用于現代瀏覽器和觸摸設備

jsPDF

• jsPDF 面向所有人的客戶端JavaScript PDF生成。

Video

• videojs
• Video.js-開源HTML5和Flash視頻播放器

Better Scroll

• better-scroll 受iscroll的啟發，它支持更多功能并具有更好的滾動性能

PDF

• pdf
• JavaScript中的PDF閱讀器

Clipboard

• clipboardjs
• 現代復制到剪貼板。沒有閃光燈。壓縮后只有3kb????

Nylas Mail

• nylas-mail
• 基于現代網絡的可擴展桌面郵件應用程序。貨叉歡迎！

Sheet

• sheetjs SheetJS社區版-電子表格數據工具包

React Content Loader

• react-content-loader SVG供電的組件可輕松創建骨架荷載。

SkeletonView

• SkeletonView 向用戶顯示正在發生的事情并為他們準備要等待的內容的一種優雅方式

Match Sorter

• match-sorter JavaScript中數組的簡單，預期和確定性最佳匹配排序

Luckysheet

• Luckysheet 是像excel這樣的在線電子表格，功能強大，易于配置且完全開源。

GraphQL

Hasura

• hasura
• 具有細粒度訪問控制的Postgres具有快速，即時的實時GraphQL API，還可以觸發數據庫事件的Webhooks。

Preact

• preactjs
• 具有相同現代API的快速3kB React替代方案。組件和虛擬DOM。
• 您可以在awesome-preact列表中找到一些很棒的庫

Realworld

• realworld
• “所有演示應用程序之母” —由React，Angular，Node，Django等提供支持的示例性全棧Medium.com克隆

Type Fest

• 類型節 基本TypeScript類型的集合

Edex UI

• edex-ui 具有高級監控和觸摸屏支持的跨平臺，可定制的科幻終端仿真器。

Serverless

• serverless
• 無服務器框架–使用AWS Lambda，Azure Functions，Google CloudFunctions及更多功能，利用無服務器架構構建Web，移動和IoT應用！

Meteor

• meteor JavaScript應用平臺

Snowpack

• snowpack WASM支持的前端構建工具。快速，輕巧，無捆綁的ESM。??

Headless Recorder

• headless-recorder 無頭記錄器是Chrome擴展程序，可記錄您的瀏覽器交互并生成人偶或劇本腳本。

.gitignore

• gitignore 有用的.gitignore模板的集合

Cheatsheets

• cheatsheets 備忘錄

LightHouse

• LightHouse 是一個開源的自動化工具，用于改進網絡應用的質量。
• 可以將其作為一個 Chrome 擴展程序運行，或從命令行運行。

Can I Use

• caniuse 來自caniuse.com的原始瀏覽器/功能支持數據

Carbon

• Carbon 創建并共享源代碼的精美圖片

ios font

• ios font
• IOS 字體支持查詢和 IOS 系統自帶字體查詢。

TinyPNG

• TinyPNG
• PNG/JPG 圖片在線壓縮利器，智能 PNG 和 JPEG 圖片壓縮。
• TinyPNG 使用智能有損壓縮技術將您的 PNG 文件的文件大小降低。 通過選擇性的減少圖片中的顏色，只需要很少的字節數就能保存數據。 對視覺的影響幾乎不可見，但是在文件大小上有非常大的差別。

Shape Divider

• Shape Divider
• 定制各種形狀的網站分區 SVG 的工具，調整好了自己想要的形狀之后，可以一鍵復制和下載。

json 格式化

• json 格式化
• 這是一個 json 在線解析的網站
• 功能包括了：json 在線解析，json 格式化，json 格式驗證，json 轉 xml，xml 轉 json，json 壓縮，json 轉義，js 混淆加密，JSON 轉實體，json 在線，JSON 校驗。

FeHelper

• JSON 美化工具
• FH 有一系列的簡便工具

sojson

• sojson 這是一個功能多到發指的網站！

Docz

• docz 記錄您的東西從未如此簡單！

Bug 檢測工具

• Fundebug
• vue-devtools 瀏覽器devtools擴展，用于調試Vue.js應用程序。
• redux-devtools-extension Redux DevTools擴展。
• react-native-debugger 基于React Native官方調試器的獨立應用程序，包括React Inspector / Redux DevTools
• ndb 是由Chrome DevTools支持的Node.js改進的調試體驗
• debug 一個模仿Node.js核心調試技術的微型JavaScript調試實用程序。可在Node.js和Web瀏覽器中使用
• wproxy HTTP，HTTP2，HTTPS，Websocket調試代理
• spy-debugger 微信調試，各種WebView樣式調試，手機瀏覽器的頁面真機調試。便捷的遠程調試手機頁面，抓包工具，支持：HTTP / HTTPS，無需USB連接設備。

在線編輯

• jsbin 協同JavaScript調試應用
• Codepen

國內外優秀網站

國內

• 掘金
• 張鑫旭大佬的博客
• 廖雪峰的官方網站
• 阮一峰的網絡日志
• 凹凸實驗室
• 美團技術團隊
• 螞蟻體驗科技
• ElemeFe
• 現代 JavaScript 教程
• ES6 入門教學
• ...

國外

• CSS-Tricks
• 30 seconds of code
• scotch
• freeCodeCamp
• stackoverflow
• sitepoint
• egghead
• SMASHING
• samanthaming
• exercism
• ...

GitHub 上優秀的前端學習指南

• frontendchecklist 適用于現代網站和細致開發人員的完美前端清單
• front-end-interview-handbook 著名的h5bp“前端求職面試問題”的答案不廢話
• tech-interview-handbook 幫助您完成下一次編碼面試的材料
• Daily-Interview-Question 工作日每天一道大廠前端面試題，一年后再回頭，會感謝曾經努力的自己！
• 開發人員設計資源 從庫存照片，Web模板，CSS框架，UI庫，工具等中精選設計和UI資源的清單
• javascript JavaScript樣式指南
• Javascript 使用Javascript實現的所有算法的存儲庫（僅用于教育目的）
• javascript算法 用JavaScript實現的算法和數據結構，并帶有解釋和進一步閱讀的鏈接
• learn-javascript 使用Javascript的GitBook教學編程基礎
• JavaScript questions 一長串（高級）JavaScript 問題及其解釋
• clean-code-javascript 適用于JavaScript的簡潔代碼概念
• javascript30 30天JS挑戰
• 33-js-concepts 每個JavaScript開發人員都應該知道的33個概念。
• fcc FCC中國開源代碼庫和課程。學會編碼和幫助非營利組織。
• awesome-interview-questions 精選的面試問題清單。隨時貢獻！
• leetcode-solution LeetCode Solutions: A Record of My Problem Solving Journey.( leetcode題解，記錄自己的leetcode解題之路。
• project-based-learning 精選的基于項目的教程列表
• free-programming-books-zh_CN 免費的計算機編程類中文書籍，歡迎投稿
• You-Dont-Know-JS 有關JavaScript的書籍系列。@YDKJS在Twitter上。
• freecodecamp freeCodeCamp.org的開源代碼庫和課程表。在家學習編碼。
• javascript-patterns JavaScript模式
• project-guidelines 一組JavaScript項目的最佳做法
• 冴羽的博客 冴羽目前寫的四個系列：JavaScript深度系列，JavaScript專題系列，ES6系列，React系列。
• 現代js備忘單 有關現代項目中經常遇到的JavaScript知識的備忘單。
• fe-interview 前端面試每日 3+1，以面試題來驅動學習，提倡每日學習與思考，每天進步一點！
• reactjs-interview-questions 前500ReactJS面試問答列表….編碼練習題即將推出！！
• 30-seconds-of-interviews 精選的常見面試問題集合，可幫助您為下一次面試做準備。
• hiring-without-whiteboards 招聘流程沒有中斷的公司
• awesome 關于各種有趣主題的真棒列表
• AndroidInterview-Q-A 頂級互聯網公司android面試問答