Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/left0ver/awesome-web-cn

收集javaScript实用的工具,以及react,vue的一些好用的组件
https://github.com/left0ver/awesome-web-cn

List: awesome-web-cn

awesome awesome-list collection javascript list react vue

Last synced: about 1 month ago
JSON representation

收集javaScript实用的工具,以及react,vue的一些好用的组件

Awesome Lists containing this project

README 

        


  

    

  

  




# About



这个仓库主要提供一些 JavaScript/Typescript 、Vue、React 方面的资源，主要集中于一些实用的库和常用的组件



# Motivation



在做项目的过程中，我会使用到很多库，但是时间久了之后对于那些不是经常用的工具库或者组件库就渐渐地忘记了，因此我想把那些实用的库或者好用组件记录下来，便于以后的查询，之后当项目中需要实现类似的功能时直接用别人的已经实现的库，避免重复造轮子，提高工作效率



# 目录



- [JavaScript/Typescript](https://github.com/left0ver/awesome-web-cn#javascripttypescript)

- [Vue](https://github.com/left0ver/awesome-web-cn#vue)

- [React](https://github.com/left0ver/awesome-web-cn#react)

- [代码规范](https://github.com/left0ver/awesome-web-cn#%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83)

- [VSCode 插件](https://github.com/left0ver/awesome-web-cn#vscode-%E6%8F%92%E4%BB%B6)

- [其他的小工具](https://github.com/left0ver/awesome-web-cn#%E5%85%B6%E4%BB%96%E7%9A%84%E5%B0%8F%E5%B7%A5%E5%85%B7)



# JavaScript/Typescript



- [lodash](https://github.com/lodash/lodash) - 一个 JavaScript 的工具库,包含许多有用的工具函数

- [form-data](https://github.com/form-data/form-data) - 一个用于创建可读的 “multipart/form-data” 流，让你的提交表单和文件上传更简单的 JavaScript 库

- [uuid](https://github.com/uuidjs/uuid) - 一个生成符合 RFC 规范的 uuid 的 Javascript 库

- [nanoid](https://github.com/ai/nanoid) - 一个小巧、安全、URL 友好、唯一的 JavaScript 字符串 ID 生成器(比 uuid 快)

- [p-limit](https://github.com/sindresorhus/p-limit) - 一个可以运行多个 promise-returning & async 函数并且限制并发数量的 JavaScript 库

- [PicGo-Core](https://github.com/PicGo/PicGo-Core) - 一个可以让你上传文件到指定图床的 Javascript 库

- [node-casbin](https://github.com/casbin/node-casbin) - 一个 node 的权限管理库，支持 ACL , RBAC , ABAC 等访问控制模型的库

- [isMobile](https://github.com/kaimallea/isMobile) - 一个判断是不是移动端设备的库

- [sharp](https://github.com/lovell/sharp) - 一个处理图像的库

- [sheetjs](https://github.com/SheetJS/sheetjs) - 一个处理 excel 表格的库

- [node-ip](https://github.com/indutny/node-ip) - 一个处理 IP 地址的工具库

- [clipboard.js](https://github.com/zenorocha/clipboard.js) - 一个将文本复制到剪切板的库

- [clipboardy](https://github.com/sindresorhus/clipboardy) - 一个跨平台的让你访问系统剪切板 (copy/paste) 的库

- [tinykeys](https://github.com/jamiebuilds/tinykeys) - 一个监听用户键盘的库。（例如：同时按下 Shift+D ，依次按下 y e e t）

- [reveal.js](https://github.com/hakimel/reveal.js) - 一个让你能够使用 Javascript 创建 PPT 在 Web 页面上展示的库

- [node-fs-extra](https://github.com/jprichardson/node-fs-extra) - node.js 的 fs 模块的扩展，让你更容易对文件进行操作

- [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) - 一个查找并加载配置文件或者 CommonJS 模块的库

- [node-progress](https://github.com/visionmedia/node-progress) - node.js 中创建进度条的库（可用于 cli 工具中创建进度条）

- [lerna](https://github.com/lerna/lerna) - 一个让你在 javaScript 项目中管理多个包的工具库

- [nexe](https://github.com/nexe/nexe) - Nexe 是一个命令行实用程序，可将您的 Node.js 应用程序编译为单个可执行文件

- [pkg](https://github.com/vercel/pkg) - 一个可以将你的 node.js 项目打包成 .exe 文件的命令行工具

- [atools](https://github.com/wangdaoo/atools) - 一个简单的 JavaScript 实用工具库（包含一些简单的工具函数）

- [tesseract.js](https://github.com/naptha/tesseract.js) - 一个基于 JavaScript 的 OCR 图像识别的库

- [pdf-lib](https://github.com/Hopding/pdf-lib) - 一个可以让你在修改或者添加 pdf 文件的内容的库

- [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) - 一个自动将 px 转化为 vw 或者 vh 的库 （适配移动端应用时非常有用）

- [js-cookie](https://github.com/js-cookie/js-cookie) - 用于处理浏览器 cookie 的简单、轻量级 JavaScript 库

- [svg-captcha](https://github.com/produck/svg-captcha) - node.js 中生成 svg 验证码的库

- [multer](https://github.com/expressjs/multer) - node.js 中处理文件上传的中间件

- [kebab-case](https://www.npmjs.com/package/kebab-case) - 将字符串转换为 kebab-case 的库（例如：WebkitTransform -> -webkit-transform）

- [commander](https://github.com/tj/commander.js) - 帮助你创建 node.js 命令行的库

- [chalk](https://github.com/chalk/chalk) - 一个用于给你的终端的字符添加颜色的库

- [node-archiver](https://github.com/archiverjs/node-archiver) - 一个用于 node.js 的压缩文件的库，支持 zip 和 rar 压缩

- [ora](https://github.com/sindresorhus/ora) - 一个用于 node.js 中给终端添加加载动画的库

- [Inquirer.js](https://github.com/SBoudrias/Inquirer.js) - 一个用于 node.js 中命令行交互的库

- [yalc](https://github.com/wclr/yalc) - 一个帮助你在本地测试 npm 包的库，相比 npm link 和 yarn link ，它有更多的优势

- [listr](https://github.com/SamVerschueren/listr) - 命令行终端的任务列表，让你的命令行工具更好看

- [pkg-install](https://github.com/dkundel/pkg-install) - 一个帮助你轻松地安装 npm 包,如果你的脚手架工具需要拉取代码并下载依赖，这个库会是个不错的选择

- [node-ssh](https://github.com/steelbrain/node-ssh) - 一个用于 node.js 中进行 ssh 连接的库

- [download-git-repo](https://www.npmjs.com/package/download-git-repo) - 一个用于 node.js 中下载 git repository 的库

- [Sortable](https://github.com/SortableJS/Sortable) - 一个用于可重新排序的拖放列表的 JavaScript 库

- [cross-env](https://github.com/kentcdodds/cross-env) - 一个可以让你在 npm scripts 中设置环境变量的库

- [jsPDF](https://github.com/parallax/jsPDF) - 一个可以帮助你生成 pdf 的库

- [KaTeX](https://github.com/KaTeX/KaTeX) - 一个可以帮助你在 web 页面上书写出规范整齐的数学公式的库

- [tsdx](https://github.com/jaredpalmer/tsdx) - 一个零配置的 CLI，可帮助您轻松开发、测试和发布现代 TypeScript 包

- [ag-grid](https://github.com/ag-grid/ag-grid) - 一个 JavaScript Table 表格,支持 Vue 、React 、Angular 以及原生 JavaScript

- [monaco-editor](https://github.com/microsoft/monaco-editor) - 一个基于浏览器端的 VSCode 代码编辑器组件

- [faker](https://github.com/faker-js/faker) - 一个可以为你的 node.js 或者浏览器生成大量假数据的库

- [ioredis](https://github.com/luin/ioredis) - 一个用于 node.js 的 redis 客户端

- [Numeral-js](https://github.com/adamwdraper/Numeral-js) - 一个用于格式化和操作数字的 javascript 库

- [ramda](https://github.com/ramda/ramda) - 一个实用的函数式编程风格的 JavaScript 工具库，查看[API](https://ramdajs.com/docs/)

- [jszip](https://github.com/Stuk/jszip) - 一个使用 JavaScript 创建、读取和编辑 .zip 文件的库

- [tinyws](https://github.com/tinyhttp/tinyws) - 用于 Node.js 的微型 WebSocket 中间件

- [mri](https://github.com/lukeed/mri) - 一个用于获取命令行输入的 flags and arguments 的 JavaScript 库

- [FileSaver.js](https://github.com/eligrey/FileSaver.js) - 一个用于在客户端保存文件的库，支持保存画布， 文件 ， URL ，文本等

- [dotenv](https://github.com/motdotla/dotenv) - 一个用于加载 .env 文件的环境变量的库

- [squoosh](https://github.com/GoogleChromeLabs/squoosh) - 一个用于图像压缩并可以让你编码成多种不同的图像格式的库

- [pinyin](https://github.com/hotoo/pinyin) - 一个将汉字转成拼音的库

- [china_regions](https://github.com/wecatch/china_regions) - 一个包含最全最新中国省，市，地区 json 及 sql 数据的库

- [party-js](https://github.com/yiliansource/party-js) - 一个为你的网站添加粒子效果的库,让你的网站变得更加炫酷

- [figlet.js](https://github.com/patorjk/figlet.js) - 一个可以帮助你在终端或者浏览器打印出好看的 logo 的库

- [terminal-link](https://github.com/sindresorhus/terminal-link) - 一个帮助你在终端创建可以点击的链接的库

- [ip2region](https://github.com/lionsoul2014/ip2region) - 一个查询 ip 归属地的库

- [shelljs](https://github.com/shelljs/shelljs) - 一个在 node 中很简单地执行 unix shell 命令的库，也有对应的命令行版本

- [exceljs](https://github.com/exceljs/exceljs) - 一个读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件的库，相比[sheetjs](https://github.com/SheetJS/sheetjs),他有着详细的中文文档和多个代码示例，并且可以修改写入到 XLSX 文件中的样式，相比之下 sheetjs 的很多高级功能则需要付费

- [morgan](https://github.com/expressjs/morgan) - 一个 nodejs 的日志中间件

- [playwright](https://github.com/microsoft/playwright) - 一个用于 Web 测试和自动化的框架

- [howler.js](https://github.com/goldfire/howler.js) - 一个 JavaScript 的音频库，让你在所有平台上处理音频变得容易

- [video.js](https://github.com/videojs/video.js) - 一个开源的 HTML5 视频播放器，支持 PC 端 和移动端

- [atropos](https://github.com/nolimits4web/atropos) - 一个创建 3D 视差悬停效果的 JavaScript 库，支持 Vue，React 等框架具体效果可看[站点](https://atroposjs.com/)

- [countUp.js](https://github.com/inorganik/countUp.js) - 一个帮助你快速创建以更有趣的方式显示数字数据的动画的库,这里有一个[实例](https://inorganik.github.io/countUp.js/)，也有对应针对 React 和 Vue 的组件

- [ oicq](https://github.com/takayama-lily/oicq) - 基于 nodejs 的腾讯 QQ 库，可以调用一些 QQ 的相关 api 写一些小工具

- [node-rsa](https://github.com/rzcoder/node-rsa) - 一个 node 的 RSA 库,支持生成密钥、长消息的加密解密、签名和验证

- [formidable](https://github.com/node-formidable/formidable) - 一个解析 formdata 格式的库，对于使用 nodejs 做后端的时候想解析 formdata 格式的数据的时候会很有用

- [node-mysql2](https://github.com/sidorares/n$$ode-mysql2) - mysql 的 JavaScript 客户端，兼容第一版本的[mysql](https://github.com/mysqljs/mysql) - （第一版本的对于 mysql8.0 以上的登陆方式不兼容）,同时也推出了一些新功能

- [patch-package](https://github.com/ds300/patch-package) - 帮助你更好地修改 node_modules 里面的源码，对于这个包的使用，可以看一下这篇[教程](https://juejin.cn/post/6962554654643191815)

- [github-webhook-handler](https://github.com/rvagg/github-webhook-handler) - 用于处理 GitHub 的 webhooks 的库，帮助你使用代码监听 GitHub 的 webhooks

- [jsplumb](https://github.com/jsplumb/jsplumb) - jsPlumb 是一个功能强大，可以用来绘制 DOM 节点间连线的库，可以帮助你绘制流程图

- [node-cron](https://github.com/kelektiv/node-cron) - cron for nodejs,类似于 Linux 上的 cron，可用于设置定时任务

- [xterm.js](https://github.com/xtermjs/xterm.js) - 一个帮助你在 web 上构建终端命令行的库

- [dicebear](https://github.com/dicebear/dicebear) - 一个帮助你的 app 生成随机头像的库

- [ArtPlayer](https://github.com/zhw2590582/ArtPlayer) - 一个哔哩哔哩风格的视频播放器

- [tsup](https://github.com/egoist/tsup) - 一个用来帮助你打包你的 ts library 的工具

- [unbuild](https://github.com/unjs/unbuild) - 与 tsup 一样，也可以用来打包你的 ts library，相比之下,unbuild 可以打包子目录，而 tsup 则使用起来更简单,更多区别可以看这篇[文章](https://antfu.me/posts/publish-esm-and-cjs#bundling)

- [ncc](https://github.com/vercel/ncc) - 将你的 node 项目打包成一个文件,这在某些特殊场景下会用到，例如 使用 node 编写自己的 GitHub action 时

- [toolkit](https://github.com/actions/toolkit) - 一个帮助你方便地使用 node 编写自己的 GitHub action 的工具集

- [koishi](https://github.com/koishijs/koishi) - 一个跨平台的机器人框架，支持 QQ，Telegram，Discord 等多个平台

- [docker-api](https://github.com/AgustinCB/docker-api) - nodejs 版的 docker 客户端

- [degit](https://github.com/Rich-Harris/degit) - 用于下载 git 仓库，相比于单纯的 git 命令，他下载速度更快，而且不会有.git 文件夹，可以用于脚手架中下载代码模版

- [log-update](https://github.com/sindresorhus/log-update) - 用当前的 log 输出覆盖先前的终端中的输出。用于渲染进度条、动画等

- [nodemailer](https://github.com/nodemailer/nodemailer) - 一个用于发送邮件的 nodejs 库

- [PubSubJS](https://github.com/mroderick/PubSubJS) - 一个发布订阅模式的 Javascript 库

- [configstore](https://github.com/yeoman/configstore) - 轻松加载和持久化配置，可以将一些有关用户的数据存储到用户的磁盘中,下次再次运行程序的时候可以读取到最新的数据,一般会在桌面端或者 node 中使用



# Vue



- [vxe-table](https://github.com/x-extends/vxe-table) - 一个 Vue 的 table 组件

- [quill](https://github.com/quilljs/quill) - 一个富文本编辑器

- [vue-picture-swipe](https://github.com/rap2hpoutre/vue-picture-swipe) - 一个图片预览组件

- [vue-shepherd](https://github.com/shipshapecode/vue-shepherd) - 一个基于 [shepherd](https://github.com/shipshapecode/shepherd) 的网站用户引导组件

- [particles-bg-vue](https://github.com/lindelof/particles-bg-vue) - 一个粒子动画背景组件

- [giscus-component](https://github.com/giscus/giscus-component) - 一个基于 GitHub Discussions 的评论系统

- [vue.draggable.next](https://github.com/SortableJS/vue.draggable.next) - 一个基于 [Sortable.js](https://github.com/SortableJS/Sortable) 的 Vue 3 兼容拖放组件

- [vue-monaco](https://github.com/egoist/vue-monaco) - 在 Vue 中使用 [monaco-editor](https://github.com/microsoft/monaco-editor) 的组件

- [mathlive](https://github.com/arnog/mathlive) - 针对数学公式的 web component ，你可以通过使用这个库很容易地在你的项目中展示数学公式或者创建可交互的数学公式的 input

- [vue-termui](https://github.com/vue-terminal/vue-termui) - 一个基于 vue 的现代的命令行 UI 框架，使用 vue 来构建命令行终端用户界面

- [chatgpt-api](https://github.com/transitive-bullshit/chatgpt-api) - chatgpt 的 node 客户端

- [modern-errors](https://github.com/ehmicky/modern-errors) - 一个错误处理的库，让你使用简单，统一，稳定的方式 handle error



# React



- [click-to-component](https://github.com/ericclemmons/click-to-component) - 可以让你使用 Alt+左键 点击浏览器上的 React 组件即可自动打开 VSCode ，跳转到对应组件的代码

- [react-page-transition](https://github.com/Steveeeie/react-page-transition) - 一个给你的 React 页面跳转时添加动画的组件

- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) - 一个一键复制内容到剪切板的组件

- [react-zmage](https://github.com/Caldis/react-zmage) - 一个基于 React 的图片缩放组件,让你的图片变得可缩放

- [react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer) - 一个通用型的移动端图片预览 React 组件

- [react-dnd](https://github.com/react-dnd/react-dnd) - 在 React 中实现的拖放操作的库

- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - 一个好看且功能强大的 React 拖拽组件

- [immer](https://github.com/immerjs/immer) - 一个让你在 React 中更新状态变得更简单而不需要考虑状态的不可变性

- [use-immer](https://github.com/immerjs/use-immer) - immer 的 hooks 版本，让你写出更加优雅的代码

- [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules) - 让你使用 css-modules 的方式编写 CSS 变得更简单,代码更优雅

- [styled-components](https://github.com/styled-components/styled-components) - 使用 All in js 的方式在 React 中编写 CSS

- [classnames](https://github.com/JedWatson/classnames) - 一个让你有条件地将类名连接在一起 （经常使用在 React 之中）

- [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics) - 一个将非 react 自己的静态方法从子组件复制到父组件中的库（这在封装高阶组件时经常用到）

- [tsparticles](https://github.com/matteobruni/tsparticles) - 一个粒子动画背景组件，支持 Vue 、React JQuery 等多个框架

- [react-toastify](https://github.com/fkhadra/react-toastify) - 一个 React 的消息通知组件

- [uppy](https://github.com/transloadit/uppy) - 一个文件上传器，支持音频，视频，文件等多种上传方式，支持 node , React ,Vue

- [avvvatars](https://github.com/nusu/avvvatars) - 一个用于 React 项目中的漂亮、独特的头像占位符，利用输入的字符串来生成独特的头像

- [remax](https://github.com/remaxjs/remax) - 使用 React 构建跨平台小程序，不同于 React Native 用于构建多端，remax 只是用来开发小程序的

- [tabler-icons](https://github.com/tabler/tabler-icons) - 一组超过 1950 个免费的基于 MIT 的高质量 SVG 图标，可以在任何 Web 应用中使用它

- [X6](https://github.com/antvis/X6) - 一个使用 SVG 或者 Html 进行渲染的图标库，支持 Vue 、React 、原生 JavaScript ,支持构建流程图，UML 类图， DAG 图等多种图表

- [butterfly](https://github.com/alibaba/butterfly) - 一个基于 JS 的数据驱动的节点式编排组件库 支持 Vue 、React，支持构建流程图，UML 类图， DAG 图，思维导图等多种图表

- [react-pdf](https://github.com/diegomura/react-pdf) - 使用 React 创建 PDF 文件

- [html5-qrcode](https://github.com/mebjas/html5-qrcode) - 一个跨平台的 HTML5 二维码扫描器，支持 PC 端，IOS ,Android,使用这个轻量级库可以轻松/快速地将 QR 码、条形码和其他常见的代码扫描功能集成到您的 Web 应用程序中

- [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) - 一个基于 React 的无限滚动组件

- [remotion](https://github.com/remotion-dev/remotion)- 一个让你使用编程的方式创建视频的 React 组件

- [ink](https://github.com/vadimdemedes/ink) - 一个帮助你创建可交互的命令行的 React 组件

- [mafs](https://github.com/stevenpetryk/mafs) - 用于交互式数学的 React 组件,可以创建可交互的数学函数等等

- [react-window](https://github.com/bvaughn/react-window) - 一个用于创建虚拟列表的 react 组件

- [emoji-mart](https://github.com/missive/emoji-mart) - 一个可自定义的表情符号选择器 react 组件



# 代码规范



敬请期待



# VScode 插件



- [any-rule](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) - 一个拥有常见的正则表达式的插件,按 F1,搜索你想要的正则即可,例如搜索手机,则会出现多种有关手机号的正则表达式

- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - 一个帮助你自动闭合 html 后半部分标签的插件

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - 一个帮助你快速重命名 html 标签的插件

- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) - 一个利用书签标记，可以让你很好地在各个文件中的代码间切换，帮助你快速找到你标记过的代码

- [Class autocomplete for HTML](https://marketplace.visualstudio.com/items?itemName=AESSoft.aessoft-class-autocomplete) - 自动补全 html 的 class 属性

- [Cocos Creator](https://marketplace.visualstudio.com/items?itemName=nextfu.cocos-creator-js) - Cocos Creator 支持 JavaScript 函数跳转，扩展代码提示

- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) - 一个可以一键运行代码片段或代码文件的扩展，支持多种语言

- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 一个帮助你检查代码中英语单词的拼写错误的插件，有效地帮助你避免代码中的拼写错误

- [CSS Modules](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules) - 一个针对 css modules 的扩展

- [CSS Tree](https://marketplace.visualstudio.com/items?itemName=sachinb94.css-tree) - 从选定了 html 或者 jsx 生成对应的 css Tree

- [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) - 将 draw.io 集成到 vscode 中

- [element-ui-helper](https://marketplace.visualstudio.com/items?itemName=oibit.element-ui-helper) - 针对 element-ui 的悬停提示和自动补全。 -[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - react 的代码片段

- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) - 以图表的形式查看 git 的 commit，并从图表中执行 git 操作

- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - 增强 vscode 中的 git

- [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) - 高亮显示匹配的结束标签和开始标签

- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) - 用于 html 的 css 智能感知

- [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) - 在代码的最左侧或者鼠标悬停时预览图片

- [Javascript Function Comments](https://marketplace.visualstudio.com/items?itemName=yuexiawode.javascriptfunctioncommments) - 生成 JavaScript 函数注释

- [JSON to TS](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts) - 将 Json 对象转换成 TS interface

- [Less IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-less) - 针对 less 的自动补全和重构支持

- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) - 在你的工作区启动一个本地服务器，预览网页

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - 为静态或动态页面开启一个具有实时重新加载功能本地开发服务器

- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) - 一个基于 Material Icon 的 vscode 文件图标的插件

- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - 帮助你在导入 npm 包的时候提供自动补全

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - 自动补全文件路径

- [PicGo](https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo) - 自动上传图片文件至配置的图床，让你使用 vscode 编写 markdown 变得更舒服

- [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) - 配合[Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) - 可以让你在 vscode 中连接服务器或者虚拟机

- [Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) - 在 vscode 中预览 svg 文件

- [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) - 提供多种语言的代码的自动补全，让你的开发效率 up up

- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) - 高亮你设置的 TODO, FIXME,还可以自己手动配置高亮其他关键词

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - 以树形视图的形式展示你的 TODO, FIXME,帮助你快速查找 TODO

- [Toggle Quotes](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes) - 使用 ctrl+' 快捷键帮助你快速切换单词的引号,例如' ' -> " " -> ``

- [Vitesse Theme](https://marketplace.visualstudio.com/items?itemName=antfu.theme-vitesse) - 一款 vscode 主题，也是我自己现在在用的主题

- [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) - 针对 vscode 的 Dracula 主题

- [Easy LESS](https://marketplace.visualstudio.com/items?itemName=mrcrowl.easy-less) - 自动在你保存的时候将 less 文件编译成 css 文件，这在你原生开发的时候将会很有帮助，因为相对 css，编写 less 可以让你提高开发效率

- [project-tree](https://marketplace.visualstudio.com/items?itemName=zhucy.project-tree) - 在 README.md 中生成项目的树结构



# 其他的小工具



- [volta](https://github.com/volta-cli/volta) - 一个工具可以帮助你轻易的管理项目中全局的工具的版本，比如 node 版本， yarn 版本，或者全局安装的 TypeScript 的版本

- [deno](https://github.com/denoland/deno) - 一个 JavaScript 和 TypeScript 的运行时，可以帮助你直接运行 ts 文件

- [qnm](https://github.com/ranyitz/qnm) - 用于查询 node_modules 目录的 cli 实用程序,可以用来查询项目的依赖，帮助你更好的调试某些问题

- [esno](https://github.com/esbuild-kit/esno) - 一个帮助你运行 ts 文件或者 ESM 模块的库

- [koodo-reader](https://github.com/troyeguo/koodo-reader) - 一个用来管理你的电子书的桌面端软件

- [n8n](https://github.com/n8n-io/n8n) - n8n 是一个可扩展的工作流自动化工具，让你用可视化的方式来实现一些自动化的任务



# Contribution



如果您有什么实用的库或者组件，欢迎您分享出来，帮助到更多的人，欢迎您的[PR](https://github.com/left0ver/awesome-web-cn/pulls)



# License



[MIT](https://github.com/left0ver/awesome-web-cn/blob/main/LICENSE)