- webpack - 打包项目。
- rollup - 打包 npm 库。
- parcel - webpack 竞品,但发展前景不乐观,再观察一段时间。
- systemjs - 针对一些特殊场景会比较有用,比如云 ide,支付宝小程序 IDE 等。
- microbundle - 基于 rollup,简化配置。
- bili - 基于 rollup,同上。
- father - 组件打包工具,提供 babel 和 rollup 两种打包方式。
- vue-cli - vue 命令行工具。
- create-react-app - react 官方脚手架。
- prepack - 通过预先执行的方式优化打包结果。
- lebab - 把 es5 代码转成 es6,反向 babel。
- esm-to-cjs - 把 esm 转成 cjs。
- tsdx - Zero-config CLI for TypeScript package development.
- webpack-dev-server - webpack 开发服务器。
- webpack-dev-middleware - webpack 中间件。
- webpack-merge - 合并 webpack 配置。
- webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
- svgr - svg 转 react 组件。
- postcss - CSS 界的 babel。
- autoprefixer - 为 CSS 选择权自动加 prefix。
- cssnano - CSS 压缩,也有类 preset 的概念。
- mini-css-extract-plugin - 提取 CSS 为单独文件。
- webpackbar - webpack 进度条。
- webpack-bundle-analyzer - 构建产物占比分析。
- uglifyjs-webpack-plugin - JS 压缩,产物为 ES5 语法。
- terser-webpack-plugin - JS 压缩,产物为 ES6 语法。
- webpack-manifest-plugin - 生成 manifest.json。
- copy-webpack-plugin - 复制额外的文件到输出目录。
- case-sensitive-paths-webpack-plugin - 大小写敏感检测,能规避一些问题,但构建时性能消耗较大。
- css-hot-loader - CSS 热更新,搭配 mini-css-extract-plugin 使用。
- duplicate-package-checker-webpack-plugin - 重复依赖检测。
- fork-ts-checker-webpack-plugin - ts 语法检测。
- speed-measure-webpack-plugin - 统计 webpack 各阶段耗时。
- vite
- snowpack - 浏览器里跑 npm 依赖,面向现代浏览器。
- es-dev-server
- boa - 基于 Rust,嵌入式 Javascript 引擎。
- cjs-module-lexer - 通上,cjs 模块解析,也可以用 cjs-module-lexer-rollup-reexports。
- deno_lint - 基于 Rust,支持 JavaScript 和 TypeScript 的 lint 工具。
- dprint - 基于 Rust,代码格式化工具,Prettier 替代品。
- elsa - 基于 Go,JavaScript 和 TypeScript 的 runtime。
- es-module-lexer - 基于 C,输出 Web Assembly,esm 模块解析。
- esbuild - 基于 Go,Webpack 替代品。
- esbuild-node-tsc - 用 esbuild 编译 TypeScript 项目,但不支持类型检测。
- markdown-wasm - 基于 wasm 的 markdown 解析工具。
- minify - 基于 Go,压缩器,支持 HTML5、CSS3、JS、JSON、SVG 和 XML。
- paperclip - 基于 Rust 和 WAMS,React 视图组件的快速编译和预览。
- RSLint - 基于 Rust,lint 工具。
- sucrase - 基于 Rust,Babel 替代品。
- swc - 基于 rust 的语法转换器,babel 的竞争者。
- swc-node
- quick-lint-js - 基于 C++。
- markdown-wasm - 基于 wasm 的 markdown 解析工具。
- babel
- babel-plugin-dynamic-import-node - 有些场景下会需要禁用
import()语法。 - babel-plugin-macros - 前端文件写 node 逻辑。
- babel-plugin-rawest - React 的 DOM 直出方案。
- babel-plugin-react-require - 自动为 jsx 语法加 react 引用。
- babel-plugin-transform-react-remove-prop-types - 删除 prop-types,生产环��用。
- jest
- ts-jest
- enzyme
- jsdom
- puppeteer
- react-test-rerender - 官方出品。
- react-testing-library - kentcdodds 出品。
- gastby
- rekit - IDE and toolkit for building scalable web applications with React, Redux and React-router.
- choo - dva 最初的 API 是参考这个实现的,已经不怎么发展了,再关注一段时间。
- after.js
- mint - 提供了语言层方案的框架。
- quasar - 基于 vue,一套代码多处适用。
- preact - 轻量级 React 实现。
- inferno - 轻量级 React 实现。
- react-router - React 路由方案。
- material-ui - UI 库。
- react-intl - React 的国际化方案。
- react-dnd - 拖拽实现。
- react-helmet - 修改 html 的 header 内容。
- react-jsonschema-form - A React component for building Web forms from JSON Schema.
- history
- path-to-regexp - path 转正则,路由相关处理的底层库。
- lodash - 工具集合。
- fastclick
- date-fns - 时间处理。
- lerna - monorepo 管理。
- lerna-changelog - 为 lerna 项目自动生成 changelog。
- eslint - JS 风���约束。
- eslint-config-airbnb
- xo - 封装自 eslint。
- prettier - 更主观的风格自动修改。
- yeoman-generator - 脚手架工具。
- serve - 本地静态服务器。
- servor - 另一个静态服务器。
- budo - 又一个静态服务器。
- np - npm publish 辅助,自动 push、打 tag、升版本等。
- lint-staged - eslint 提速,只 lint 提交的代码。
- coveralls - 覆盖率。
- husky - 添加 git hooks。
- cross-env - 跨平台的环境变量声明。
- projj - 本地 git 项目管理,支持 github 和 gitlab。
- nvm - 管理 node 版本。
- concurrently - 在 npm scripts 里并行执行命令。
- @zeit/ncc - 打包为 npm 包为一个文件。
- npm-check - 检测依赖升级情况,我会和
yarn upgrade-interactive配合着用,主要用来检测冗余依赖。 - cpx - 复制,支持 glob,并且可以 watch。
- onchange - 监听文件变动然后做一些事。
- just - 微软出的任务管理器。
- tern - 代码分析器,为不少编辑器服务。
- lightproxy - 底层协议代理工具,跨平台。
- ajv - 参数校验。
- chalk - 输出不同颜色。
- cheerio - 用类 jQuery 语法处理 HTML。
- chokidar - 文件监听。
- clipboardy - 复制文本到粘贴板。
- debug - 打印调试信息。
- depd - 给出 deprecated 警告。
- deprecate - 给过期警告。
- enquirer - 同上,更 cool 一些。
- execa - 比 child_process 好用,返回 Promise。
- figures - ✔︎ 等特殊字符,做了 windows 兼容处理。
- glob - 文件查找。
- ink - 用 React 处理命令行输出。
- inquirer - 交互式命令接口,比如 prompt。
- ora - 控制命令行光标,显示 loading 等。
- rimraf - 删除文件。
- signale - 漂亮的日志打印。
- semver - semver 版本处理。
- tiny-glob - 文件查找。
- update-notifier - 更新提醒。
- why-is-node-running - 检查 node 没退出的原因。
- yargs - 命令行入口套件。
- yargs-parser - 命令行参数解析。
- compressing - 压缩和解压缩。
- tar-fs - tar 的压缩和解压缩。
- yauzl - zip 解压缩。
- yazl - zip 压缩。
- esquery - 语法树查询。
- markdown-it - Markdown 转 HTML。
- remark - Markdown 语法解析器。
GitLens【荐】Git History有些同学习惯使用编辑器中的 Git 管理工具,而不太喜欢要打开另外一个 Git UI 工具的同学,这一款插件满足你查询所有 Git 记录的需求。GitLens【荐】热更新Chinese (Simplified) Language Pack for Visual Studio Code让软件显示为简体中文语言。Bracket Pair Colorizer 2:突出显示成对的括号【荐】sftp:文件传输 【荐】open in browser在 HTML 文件中「右键选择 --> Open in Default Browser」,即可在浏览器中预览网页。highlight-icemode:选中相同的代码时,让高亮显示更加明显【荐】VS Code 自带的高亮就可以关掉了:在用户设置里添加"editor.selectionHighlight": false即可。 ** vscode 选中后相同内容高亮插件推荐 **vscode-icons根据文件的后缀名来显示不同的图标Project Manager提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便。TODO Highlight写代码过程中,突然发现一个 Bug,但是又不想停下来手中的活,以免打断思路,怎么办?按照代码规范,我们一般是在代码中加个 TODO 注释。比如:(注意,一定要写成大写TODO,而不是小写的todo)WakaTime统计在 VS Code 里写代码的时间Code Time录编程时间,统计代码行数。Markdown Preview Github Styling【荐】以 GitHub 风格预览 Markdown 样式Markdown Preview Enhanced预览 Markdown 样式。Markdown All in One这个插件将帮助你更高效地在 Markdown 中编写文档Settings Sync多台设备之间,同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具vscode-syncing多台设备之间,同步 VS Code 配置。VeturVue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。VS Code 官方钦定 Vue 插件,Vue 开发者必备。ES7 React/Redux/GraphQL/React-Native snippetsReact/Redux/react-router 的语法智能提示。minapp:小程序支持Prettier:代码格式化ESLint:代码格式校验Beautify代码格式化工具。JavaScript(ES6) code snippetsES6 语法智能提示,支持快速输入。Search node_modules【荐】indent-rainbow:突出显示代码缩进javascript console utils:快速打印 log 日志【荐】Code Spell Checker:单词拼写错误检查Local History【荐】 维护文件的本地历史记录,强烈建议安装。代码意外丢失时,有时可以救命。Polacode-2020:生成代码截图 【荐】Image Preview【荐】 图片预览。鼠标移动到图片 url 上的时候,会自动显示图片的预览和图片尺寸。Auto Close Tag、Auto Rename Tag自动闭合标签、自动对标签重命名Better Comments为注释添加更醒目、带分类的色彩。CSS Peek增强 HTML 和 CSS 之间的关联,快速查看该元素上的 CSS 样式。Vue CSS PeekCSS Peek 对 Vue 没有支持,该插件提供了对 Vue 文件的支持。Color Info这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。RemoteHub可以在本地查看 GitHub 网站上的代码,而不需要将代码下载到本地。Live Share:实时编码分享Import Cost我们会引入很多 npm 包,有时候可能只用到了某个包里的一个方法,却引入了整个包,导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们,当前引入的包会增加多少体积,这很有助于帮我们优化代码的体积。paste JSON as Code此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。
https://github.com/sorrycc/awesome-f2e-libs https://juejin.cn/post/6844903826063884296#heading-56