多个提高前端人效率的实用工具和网站

ChatGPT

• ChatGPT3.5 - 免费的 ChatGPT 网页版
• 智谱清言 - 国内做的比较好的类 GPT 产品

Web Editor

• CodeSandbox - 一个快速启动和分享前端 JavaScript 应用程序的环境
• JS Bin - 一种开放源码的协同 Web 开发调试工具
• CodePen - 支持 HTML、CSS、JS，比 codesandbox 轻量，适合写简单的 demo

Lint 工具

• EditorConfig - 一种配置文件格式，旨在帮助开发团队在不同的编辑器和IDE之间保持代码风格的一致性
• Prettier - 一款流行的代码格式化工具
• ESLint ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误
• commitlint - 一个开源工具，用于规范化和验证Git 提交消息的格式

构建工具

• webpack 是一个模块打包器。它的主要目标是将JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源
• Vite 是一种新型前端构建工具，能够显著提升前端开发体验
• rollup.js 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序
• Parcel - 极速零配置Web应用打包工具

CDN

• jsdelivr - 一个 CDN 服务提供商，优点在于全球通用。 专门提供 js 相关的 CDN，对 npm,github 做了加速镜像
• unpkg 是一个快速的全球内容交付网络，适用于 NPM 上的所有内容

Playground

• React Playground - React 在线编辑器
• Vue SFC Playground - Vue 单文件组件在线编辑器
• TypeScript Playground - TypeScript Playground

CI/CD

• Vercel - 最好用的网站托管服务
• GitHub Pages - GitHub Pages 提供的静态资源托管

在线翻译

• 谷歌翻译 - 谷歌翻译
• 有道翻译 - 有道翻译

代码托管

• GitHub - 一个在线软件源代码托管服务平台
• Gitee - 国内做的最好的代码托管平台

在线服务

• Can I use - 兼容性查询
• bundlephobia - 分析 npm 包添加到捆绑包中的成本
• Vue3 Template Explorer - vue3 的模板解析工具，学习源码必备
• AST Explorer - js 的抽象语法树在线解析工具

图片处理

• TinyPNG - 一种在线图片压缩工具，可以将图片压缩到更小的文件大小，而且不会对图片质量造成明显的影响
• cloudconvert - 将 mp4 文件转为 gif

长期更新中......