{"id":20450,"url":"https://github.com/Roderick-cc/awesome-fe","name":"awesome-fe","description":"收集平时关注的前端库与资源","projects_count":170,"last_synced_at":"2026-09-03T07:00:26.530Z","repository":{"id":123410741,"uuid":"538776209","full_name":"Roderick-cc/awesome-fe","owner":"Roderick-cc","description":"收集平时关注的前端库与资源","archived":false,"fork":false,"pushed_at":"2022-09-20T02:25:54.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-07-26T04:04:09.239Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Roderick-cc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-09-20T02:22:06.000Z","updated_at":"2023-03-07T04:14:28.000Z","dependencies_parsed_at":"2024-02-02T20:45:58.953Z","dependency_job_id":"744bc582-94ca-4309-b309-ac83d7d6ed0f","html_url":"https://github.com/Roderick-cc/awesome-fe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Roderick-cc/awesome-fe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roderick-cc%2Fawesome-fe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roderick-cc%2Fawesome-fe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roderick-cc%2Fawesome-fe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roderick-cc%2Fawesome-fe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Roderick-cc","download_url":"https://codeload.github.com/Roderick-cc/awesome-fe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roderick-cc%2Fawesome-fe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36650414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-06T04:43:03.162Z","status":"online","status_checked_at":"2026-08-14T02:00:06.934Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T12:55:50.791Z","updated_at":"2026-09-03T07:00:26.531Z","primary_language":"JavaScript","list_of_lists":false,"displayable":true,"categories":["命令行","工程","其他","CSS","编辑器","字体","打包工具","压缩解压缩","vscode 插件","收集来源：","工具类","babel","文档","react 相关库","框架","Markdown","语言","测试","性能优化","包管理","语法解析","CloudIDE"],"sub_categories":["macros","Bundless","非 JavaScript 编译工具","webpack 辅助工具、Loader 和插件"],"readme":"\n## 打包工具\n\n* [**webpack**](https://github.com/webpack/webpack) - 打包项目。\n* [**rollup**](https://github.com/rollup/rollup) - 打包 npm 库。\n* [**parcel**](https://github.com/parcel-bundler/parcel) - webpack 竞品，但发展前景不乐观，再观察一段时间。\n* [**systemjs**](https://github.com/systemjs/systemjs) - 针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等。\n* [**microbundle**](https://github.com/developit/microbundle) - 基于 rollup，简化配置。\n* [**bili**](https://github.com/egoist/bili) - 基于 rollup，同上。\n* [**father**](https://github.com/umijs/father) - 组件打包工具，提供 babel 和 rollup 两种打包方式。\n* [**vue-cli**](https://github.com/vuejs/vue-cli) - vue 命令行工具。\n* [**create-react-app**](https://github.com/facebook/create-react-app) - react 官方脚手架。\n* [**prepack**](https://github.com/facebook/prepack) - 通过预先执行的方式优化打包结果。\n* [**lebab**](https://github.com/lebab/lebab) - 把 es5 代码转成 es6，反向 babel。\n* [**esm-to-cjs**](https://github.com/sidvishnoi/esm-to-cjs) - 把 esm 转成 cjs。\n* [**tsdx**](https://github.com/palmerhq/tsdx) - Zero-config CLI for TypeScript package development.\n\n### webpack 辅助工具、Loader 和插件\n\n* [**webpack-dev-server**](https://github.com/webpack/webpack-dev-server) - webpack 开发服务器。\n* [**webpack-dev-middleware**](https://github.com/webpack/webpack-dev-middleware) - webpack 中间件。\n* [**webpack-merge**](https://github.com/survivejs/webpack-merge) - 合并 webpack 配置。\n* [**webpack-chain**](https://github.com/neutrinojs/webpack-chain) - 通过 chain 风格 api 的方式修改 webpack 配置。\n* [**svgr**](https://github.com/smooth-code/svgr) - svg 转 react 组件。\n* [**postcss**](https://github.com/postcss/postcss) - CSS 界的 babel。\n* [**autoprefixer**](https://github.com/postcss/autoprefixer) - 为 CSS 选择权自动加 prefix。\n* [**cssnano**](https://github.com/cssnano/cssnano) - CSS 压缩，也有类 preset 的概念。\n* [**mini-css-extract-plugin**](https://github.com/webpack-contrib/mini-css-extract-plugin) - 提取 CSS 为单独文件。\n* [**webpackbar**](https://github.com/nuxt/webpackbar) - webpack 进度条。\n* [**webpack-bundle-analyzer**](https://github.com/webpack-contrib/webpack-bundle-analyzer) - 构建产物占比分析。\n* [**uglifyjs-webpack-plugin**](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) - JS 压缩，产物为 ES5 语法。\n* [**terser-webpack-plugin**](https://github.com/webpack-contrib/terser-webpack-plugin) - JS 压缩，产物为 ES6 语法。\n* [**webpack-manifest-plugin**](https://github.com/danethurber/webpack-manifest-plugin) - 生成 manifest.json。\n* [**copy-webpack-plugin**](https://github.com/webpack-contrib/copy-webpack-plugin) - 复制额外的文件到输出目录。\n* [**case-sensitive-paths-webpack-plugin**](https://github.com/Urthen/case-sensitive-paths-webpack-plugin) - 大小写敏感检测，能规避一些问题，但构建时性能消耗较大。\n* [**css-hot-loader**](https://github.com/shepherdwind/css-hot-loader) - CSS 热更新，搭配 mini-css-extract-plugin 使用。\n* [**duplicate-package-checker-webpack-plugin**](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - 重复依赖检测。\n* [**fork-ts-checker-webpack-plugin**](https://github.com/Realytics/fork-ts-checker-webpack-plugin) - ts 语法检测。\n* [**speed-measure-webpack-plugin**](https://github.com/stephencookdev/speed-measure-webpack-plugin) - 统计 webpack 各阶段耗时。\n\n### Bundless\n\n* [**vite**](https://github.com/vitejs/vite)\n* [**snowpack**](https://github.com/pikapkg/snowpack) - 浏览器里跑 npm 依赖，面向现代浏览器。\n* [**es-dev-server**](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server)\n\n### 非 JavaScript 编译工具\n\n* [**boa**](https://github.com/boa-dev/boa) - 基于 Rust，嵌入式 Javascript 引擎。\n* [**cjs-module-lexer**](https://github.com/guybedford/cjs-module-lexer) - 通上，cjs 模块解析，也可以用 [cjs-module-lexer-rollup-reexports](https://github.com/yyx990803/cjs-module-lexer-rollup-reexports)。\n* [**deno_lint**](https://github.com/denoland/deno_lint) - 基于 Rust，支持 JavaScript 和 TypeScript 的 lint 工具。\n* [**dprint**](https://github.com/dprint/dprint) - 基于 Rust，代码格式化工具，Prettier 替代品。\n* [**elsa**](https://github.com/elsaland/elsa) - 基于 Go，JavaScript 和 TypeScript 的 runtime。 \n* [**es-module-lexer**](https://github.com/guybedford/es-module-lexer) - 基于 C，输出 Web Assembly，esm 模块解析。\n* [**esbuild**](https://github.com/evanw/esbuild) - 基于 Go，Webpack 替代品。\n* [**esbuild-node-tsc**](https://github.com/a7ul/esbuild-node-tsc) - 用 esbuild 编译 TypeScript 项目，但不支持类型检测。\n* [**markdown-wasm**](https://github.com/rsms/markdown-wasm) - 基于 wasm 的 markdown 解析工具。\n* [**minify**](https://github.com/tdewolff/minify) - 基于 Go，压缩器，支持 HTML5、CSS3、JS、JSON、SVG 和 XML。\n* [**paperclip**](https://github.com/crcn/paperclip) - 基于 Rust 和 WAMS，React 视图组件的快速编译和预览。\n* [**RSLint**](https://github.com/RDambrosio016/RSLint) - 基于 Rust，lint 工具。\n* [**sucrase**](https://github.com/alangpierce/sucrase) - 基于 Rust，Babel 替代品。\n* [**swc**](https://github.com/swc-project/swc) - 基于 rust 的语法转换器，babel 的竞争者。\n* [**swc-node**](https://github.com/Brooooooklyn/swc-node)\n* [**quick-lint-js**](https://github.com/quick-lint/quick-lint-js) - 基于 C++。\n* [**markdown-wasm**](https://github.com/rsms/markdown-wasm) - 基于 wasm 的 markdown 解析工具。\n\n## 包管理\n\n* [**npm**](https://github.com/npm/cli)\n\n## babel\n\n* [**babel**](https://github.com/babel/babel)\n* [**babel-plugin-dynamic-import-node**](https://github.com/airbnb/babel-plugin-dynamic-import-node) - 有些场景下会需要禁用 `import()` 语法。\n* [**babel-plugin-macros**](https://github.com/kentcdodds/babel-plugin-macros) - 前端文件写 node 逻辑。\n* [**babel-plugin-rawest**](https://github.com/sokra/rawact) - React 的 DOM 直出方案。\n* [**babel-plugin-react-require**](https://github.com/vslinko/babel-plugin-react-require) - 自动为 jsx 语法加 react 引用。\n* [**babel-plugin-transform-react-remove-prop-types**](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - 删除 prop-types，生产环境用。\n\n### macros\n\n* [**import-all.macro**](https://github.com/kentcdodds/import-all.macro)\n\n## 测试\n\n* [**jest**](https://github.com/facebook/jest)\n* [**ts-jest**](https://github.com/kulshekhar/ts-jest)\n* [**enzyme**](https://github.com/airbnb/enzyme)\n* [**jsdom**](https://github.com/jsdom/jsdom)\n* [**puppeteer**](https://github.com/GoogleChrome/puppeteer)\n* [**react-test-rerender**](https://github.com/facebook/react/tree/master/packages/react-test-renderer) - 官方出品。\n* [**react-testing-library**](https://github.com/kentcdodds/react-testing-library) - kentcdodds 出品。\n\n## 框架\n* [**gastby**](https://github.com/gatsbyjs/gatsby)\n* [**rekit**](https://github.com/rekit/rekit) - IDE and toolkit for building scalable web applications with React, Redux and React-router.\n* [**choo**](https://github.com/choojs/choo) - dva 最初的 API 是参考这个实现的，已经不怎么发展了，再关注一段时间。\n* [**after.js**](https://github.com/jaredpalmer/after.js)\n* [**mint**](https://github.com/mint-lang/mint) - 提供了语言层方案的框架。\n* [**quasar**](https://github.com/quasarframework/quasar) - 基于 vue，一套代码多处适用。\n\n## react 相关库\n\n* [**preact**](https://github.com/developit/preact) - 轻量级 React 实现。\n* [**inferno**](https://github.com/infernojs/inferno) - 轻量级 React 实现。\n* [**react-router**](https://github.com/ReactTraining/react-router) - React 路由方案。\n* [**material-ui**](https://github.com/mui-org/material-ui) - UI 库。\n* [**react-intl**](https://github.com/yahoo/react-intl) - React 的国际化方案。\n* [**react-dnd**](https://github.com/react-dnd/react-dnd) - 拖拽实现。\n* [**react-helmet**](https://github.com/nfl/react-helmet) - 修改 html 的 header 内容。\n* [**react-jsonschema-form**](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSON Schema.\n\n\n## 工具类\n\n* [**history**](https://github.com/ReactTraining/history)\n* [**path-to-regexp**](https://github.com/pillarjs/path-to-regexp) - path 转正则，路由相关处理的底层库。\n* [**lodash**](https://github.com/lodash/lodash) - 工具集合。\n* [**fastclick**](https://github.com/ftlabs/fastclick)\n* [**date-fns**](https://github.com/date-fns/date-fns) - 时间处理。\n\n\n\n## 性能优化\n\n* [**workbox**](https://github.com/GoogleChrome/workbox) - PWA 方案，Google 出品。\n* [**critical**](https://github.com/addyosmani/critical) - 提取关键 CSS。\n\n## 语言\n\n* [**typescript**](https://github.com/Microsoft/TypeScript)\n* [**flow**](https://github.com/facebook/flow)\n* [**graphql**](https://github.com/graphql/graphql-js)\n\n## 文档\n\n* [**dumi**](https://github.com/umijs/dumi)\n* [**vuepress**](https://github.com/vuejs/vuepress)\n* [**docz**](https://github.com/pedronauck/docz)\n* [**storybook**](https://github.com/storybooks/storybook)\n* [**mdx**](https://github.com/mdx-js/mdx) - jsx + markdown。\n\n## 工程\n\n* [**lerna**](https://github.com/lerna/lerna) - monorepo 管理。\n* [**lerna-changelog**](https://github.com/lerna/lerna-changelog) - 为 lerna 项目自动生成 changelog。\n* [**eslint**](https://github.com/eslint/eslint) - JS 风格约束。\n* [**eslint-config-airbnb**](https://github.com/airbnb/javascript)\n* [**xo**](https://github.com/xojs/xo) - 封装自 eslint。\n* [**prettier**](https://github.com/prettier/prettier) - 更主观的风格自动修改。\n* [**yeoman-generator**](https://github.com/yeoman/generator) - 脚手架工具。\n* [**serve**](https://github.com/zeit/serve) - 本地静态服务器。\n* [**servor**](https://github.com/lukejacksonn/servor) - 另一个静态服务器。\n* [**budo**](https://github.com/mattdesl/budo) - 又一个静态服务器。\n* [**np**](https://github.com/sindresorhus/np) - npm publish 辅助，自动 push、打 tag、升版本等。\n* [**lint-staged**](https://github.com/okonet/lint-staged) - eslint 提速，只 lint 提交的代码。\n* [**coveralls**](https://github.com/marketplace/coveralls) - 覆盖率。\n* [**husky**](https://github.com/typicode/husky) - 添加 git hooks。\n* [**cross-env**](https://github.com/kentcdodds/cross-env) - 跨平台的环境变量声明。\n* [**projj**](https://github.com/popomore/projj) - 本地 git 项目管理，支持 github 和 gitlab。\n* [**nvm**](https://github.com/creationix/nvm) - 管理 node 版本。\n* [**concurrently**](https://github.com/kimmobrunfeldt/concurrently) - 在 npm scripts 里并行执行命令。\n* [**@zeit/ncc**](https://github.com/zeit/ncc) - 打包为 npm 包为一个文件。\n* [**npm-check**](https://github.com/dylang/npm-check) - 检测依赖升级情况，我会和 `yarn upgrade-interactive` 配合着用，主要用来检测冗余依赖。\n* [**cpx**](https://github.com/mysticatea/cpx) - 复制，支持 glob，并且可以 watch。\n* [**onchange**](https://github.com/Qard/onchange) - 监听文件变动然后做一些事。\n* [**just**](https://github.com/Microsoft/just) - 微软出的任务管理器。\n* [**tern**](https://github.com/ternjs/tern) - 代码分析器，为不少编辑器服务。\n* [**lightproxy**](https://github.com/alibaba/lightproxy) - 底层协议代理工具，跨平台。\n\n## 编辑器\n\n* [**VSCode**](https://code.visualstudio.com/)\n* [**IntelliJ IDEA**](https://www.jetbrains.com/idea/) \n* [**codesandbox**](https://codesandbox.io/)\n* [**stackblitz**](https://stackblitz.com/)\n\n## CloudIDE\n\n* [**che**](https://github.com/eclipse/che)\n* [**codesandbox-client**](https://github.com/CompuIves/codesandbox-client)\n* [**theia**](https://github.com/theia-ide/theia)\n\n## 字体\n\n* [**Dank Mono**](https://dank.sh/)\n* [**FiraCode**](https://github.com/tonsky/FiraCode)\n* [**Operator Mono**](https://www.typography.com/blog/introducing-operator)\n\n## CSS\n\n* [**css modules**](https://github.com/css-modules/css-modules)\n* [**emotion**](https://github.com/emotion-js/emotion)\n\n## 命令行\n\n* [**ajv**](https://github.com/epoberezkin/ajv) - 参数校验。\n* [**chalk**](https://github.com/chalk/chalk) - 输出不同颜色。\n* [**cheerio**](https://github.com/cheeriojs/cheerio) - 用类 jQuery 语法处理 HTML。\n* [**chokidar**](https://github.com/paulmillr/chokidar) - 文件监听。\n* [**clipboardy**](https://github.com/sindresorhus/clipboardy) - 复制文本到粘贴板。\n* [**debug**](https://github.com/visionmedia/debug) - 打印调试信息。\n* [**depd**](https://github.com/dougwilson/nodejs-depd) - 给出 deprecated 警告。\n* [**deprecate**](https://github.com/brianc/node-deprecate) - 给过期警告。\n* [**enquirer**](https://github.com/enquirer/enquirer) - 同上，更 cool 一些。\n* [**execa**](https://github.com/sindresorhus/execa) - 比 child_process 好用，返回 Promise。\n* [**figures**](https://github.com/sindresorhus/figures) - ✔︎ 等特殊字符，做了 windows 兼容处理。\n* [**glob**](https://github.com/isaacs/node-glob) - 文件查找。\n* [**ink**](https://github.com/vadimdemedes/ink) - 用 React 处理命令行输出。\n* [**inquirer**](https://github.com/SBoudrias/Inquirer.js) - 交互式命令接口，比如 prompt。\n* [**ora**](https://github.com/sindresorhus/ora) - 控制命令行光标，显示 loading 等。\n* [**rimraf**](https://github.com/isaacs/rimraf) - 删除文件。\n* [**signale**](https://github.com/klaussinani/signale) - 漂亮的日志打印。\n* [**semver**](https://github.com/npm/node-semver) - semver 版本处理。\n* [**tiny-glob**](https://github.com/terkelg/tiny-glob) - 文件查找。\n* [**update-notifier**](https://github.com/yeoman/update-notifier) - 更新提醒。\n* [**why-is-node-running**](https://github.com/mafintosh/why-is-node-running) - 检查 node 没退出的原因。\n* [**yargs**](https://github.com/yargs/yargs) - 命令行入口套件。\n* [**yargs-parser**](https://github.com/yargs/yargs-parser) - 命令行参数解析。\n\n## 压缩解压缩\n\n* [**compressing**](https://github.com/node-modules/compressing) - 压缩和解压缩。\n* [**tar-fs**](https://github.com/mafintosh/tar-fs) - tar 的压缩和解压缩。\n* [**yauzl**](https://github.com/thejoshwolfe/yauzl) - zip 解压缩。\n* [**yazl**](https://www.npmjs.com/package/yazl) - zip 压缩。\n\n## 语法解析\n\n* [**esquery**](https://github.com/estools/esquery) - 语法树查询。\n\n## Markdown\n\n* [**markdown-it**](https://github.com/markdown-it/markdown-it) - Markdown 转 HTML。\n* [**remark**](https://github.com/remarkjs/remark) - Markdown 语法解析器。\n\n## 其他\n\n* [**electron**](https://github.com/electron/electron)\n* [**fx**](https://github.com/antonmedv/fx) - 交互式 JSON 查看。\n* [**DeskGap**](https://github.com/patr0nus/DeskGap/) - 类 electron，由于不包含浏览器的部分，所以产物更小\n\n\n## vscode 插件\n\n* `GitLens` 【荐】\n* `Git History` 有些同学习惯使用编辑器中的 Git 管理工具，而不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。\n* `GitLens` 【荐】热更新\n* `Chinese (Simplified) Language Pack for Visual Studio Code` 让软件显示为简体中文语言。\n* `Bracket Pair Colorizer 2`：突出显示成对的括号【荐】\n* `sftp`：文件传输 【荐】\n* `open in browser` 在 HTML 文件中「右键选择 --\u003e Open in Default Browser」，即可在浏览器中预览网页。\n* `highlight-icemode`：选中相同的代码时，让高亮显示更加明显【荐】VS Code 自带的高亮就可以关掉了：在用户设置里添加\"editor.selectionHighlight\": false即可。 [** vscode 选中后相同内容高亮插件推荐 **](https://blog.csdn.net/palmer_kai/article/details/79548164)\n* `vscode-icons`  根据文件的后缀名来显示不同的图标\n* `Project Manager`  提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。\n* `TODO Highlight` 写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）\n* `WakaTime ` 统计在 VS Code 里写代码的时间\n* `Code Time` 录编程时间，统计代码行数。\n* `Markdown Preview Github Styling` 【荐】以 GitHub 风格预览 Markdown 样式\n* `Markdown Preview Enhanced` 预览 Markdown 样式。\n* `Markdown All in One` 这个插件将帮助你更高效地在 Markdown 中编写文档\n* `Settings Sync` 多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具\n* `vscode-syncing` 多台设备之间，同步 VS Code 配置。\n* `Vetur` Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。\n* `ES7 React/Redux/GraphQL/React-Native snippets` React/Redux/react-router 的语法智能提示。\n* `minapp`：小程序支持\n* `Prettier`：代码格式化\n* `ESLint`：代码格式校验\n* `Beautify` 代码格式化工具。\n* `JavaScript(ES6) code snippets` ES6 语法智能提示，支持快速输入。\n* `Search node_modules` 【荐】\n* `indent-rainbow`：突出显示代码缩进\n* `javascript console utils`：快速打印 log 日志【荐】\n* `Code Spell Checker`：单词拼写错误检查\n* `Local History` 【荐】 维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。\n* `Polacode-2020`：生成代码截图 【荐】\n* `Image Preview` 【荐】 图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。\n* `Auto Close Tag、Auto Rename Tag` 自动闭合标签、自动对标签重命名\n* `Better Comments` 为注释添加更醒目、带分类的色彩。\n* `CSS Peek` 增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。\n* `Vue CSS Peek` CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。\n* `Color Info` 这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。\n* `RemoteHub` 可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。\n* `Live Share`：实时编码分享\n* `Import Cost` 我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。\n* `paste JSON as Code` 此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。\n\n\n\n## 收集来源：\n\n[https://github.com/sorrycc/awesome-f2e-libs](https://github.com/sorrycc/awesome-f2e-libs)\n[https://juejin.cn/post/6844903826063884296#heading-56](https://juejin.cn/post/6844903826063884296#heading-56)","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/roderick-cc%2Fawesome-fe/projects"}