【建议收藏】前端开发必备文档（持续更新中...）

前言

大家好，我是 simple ，我的理想是利用科技手段来解决生活中遇到的各种问题。

本文尽可能为各大插件、工具、框架等官方文档导航，标注为中文文档参考则为民间有志青年翻译。
文章篇幅较长，请直接阅读目录跳往到自己感兴趣的部分。
以下书签为作者在日常开发、学习中的积累，会不定时更新。
部分还未接触过的领域，敬请各位评论，本人会在看到后尽快补充。

学无止境

学习平台

w3school

这是一个免费的在线学习资源，提供HTML的完整教程，包括各种标签和属性的详细介绍，并附有实例演示。

MDN Web Docs

这是Mozilla开发的免费学习资源，提供HTML的详细介绍和教程，并包含实例演示和用法示例。

HTML Dog

这是一个HTML教程和参考网站，提供HTML的基础知识、标签、属性和实例，还包括HTML的最佳实践和CSS样式。

HTML.com

这是一个专门为HTML初学者准备的网站，提供HTML的入门教程和实例演示，以及更高级的技巧和用法。

菜鸟教程

菜鸟教程是一个免费的中文编程学习网站，它的内容丰富、易于理解，非常适合初学者学习使用。

CSS-Tricks

CSS-Tricks是一个由Coyier创办的CSS学习网站。它提供了大量的CSS教程、技巧和代码实例，适合初学者和进阶者使用。此外，它还有一个社区论坛和博客，让学习者可以和其他开发者交流。

Coding Fantasy

Coding Fantasy是一个通过游戏的方式，让你迅速学习到flex和grid布局方式，让你在玩游戏的过程学习到知识。

bilibili

在B站上，有很多优质的前端编程视频，其中包括Web开发入门、HTML、CSS、JavaScript等基础课程，也有Vue.js、React等流行前端框架的教程，以及一些实用的编程技巧和开发工具的介绍。这些视频由许多有经验的前端工程师制作，涵盖了从基础到高级的前端知识和实践内容。

leetcode

LeetCode 平台提供了一个大量的算法练习题库，其中包括了多个类别的算法问题，例如数组、链表、树、字符串、动态规划等等。在这里，用户可以免费练习、在线编程比赛和竞赛、提交和评估自己的算法问题解决能力，同时也可以通过和其他用户的比较，激发自己更好的表现。

技术交流

GitHub

一个非常受欢迎的开源代码托管平台，让开发者可以共享、合作、探索各种开源项目，同时也是一个非常活跃的技术社区。

Stack Overflow

一个专门针对编程问题的问答社区，开发者可以在这里提问、回答问题，并与其他开发者交流和分享经验。

掘金

稀土掘金是一个专注于程序员技术分享和交流的社区平台，致力于帮助开发者互相学习、交流和成长。它提供了丰富的技术博客和文章、开源项目、求职招聘信息等内容，同时也有大量的技术社区和问答平台。

知乎

知乎是一个知识分享社区，也是一个非常受欢迎的技术博客平台。在知乎上，不仅可以阅读大量的技术文章和博客，还可以与其他技术爱好者交流和分享经验，获得专业的技术指导和解决方案。

dev

dev社区和国内的掘金社区很相似，技术分类也比较多，像 Java、Python、js、分布式等应有尽有，文章质量普遍都还不错，其实如果平时多留意不难发现，掘金上有一些文章是翻译自 dev社区。

书读百遍，其意自现

JS风格指南

这里包含了各种代码的规范风格，不会让你立刻变成一个优秀的工程师，长期奉行他们也并不意味着你能够高枕无忧不再犯错。

千里之行，始于足下。我们需要时常和同行们进行代码评审，不断优化自己的代码。

你不知道的JavaScript

这里讲述了很多你曾经并不在意但是又不可忽略的js小细节，它将带你把js的不同槽点、另类之处，一次性说个明白。

what the f*ck JavaScript

JavaScript 是一个不错的语言。它的语法简单，生态系统也很庞大，最重要的是，它拥有最伟大的社区力量。我们知道，JavaScript 是一个非常有趣的语言，但同时也充满了各种奇怪的行为。这些奇怪的行为有时会搞砸我们的日常工作，有时则会让我们忍俊不禁。

正确的学习JavaScript

这是一份为 JavaScript 新手准备的指南，同时也包含了可以给高手学习的最佳资料，虽然网站的名字是 the right way,但并不代表是学习 JavaScript 的唯一方法。这里只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网民身上收集而来，故称之为 'the right way'或是最佳做法。

JavaScript数据结构和算法完全解析

这里包含了多种基于 JavaScript 语法的算法与数据结构。每种算法和数据结构都有自己的README.md，包含相关说明和链接，以便进一步阅读。

优秀开源项目大全

awesome-vite

awesome-vite 是一个收集了 Vite 生态圈相关资源的 GitHub 仓库，包括插件、模板、示例、文章等等。它的目的是为了帮助开发者更好地使用和探索 Vite。这个仓库由社区驱动，大家可以通过 Pull Request 来贡献自己发现的有价值的 Vite 资源，也可以通过 Issues 来反馈问题和建议。

awesome-react

awesome-react是一个收集了 React 相关资源的精选列表，包括工具、组件、学习资源、示例等等。如果你是 React 开发者，这个列表可能对你很有用。该列表包含了一些非常流行和广泛使用的 React 组件和工具，也包含了一些相对较新但很有潜力的项目。

awesome-webpack-cn

awesome-webpack-cn 是一个中文版的 Webpack 相关资源列表，收录了很多 Webpack 相关的文章、教程、插件等，方便开发者学习和使用 Webpack。它包含了从入门到深入的 Webpack 相关内容，以及在 Webpack 使用过程中会用到的各种工具和插件。同时，Awesome-Webpack-CN 的内容也在不断更新和完善中。

awesome-github-vue

awesome-github-vue 是一个汇集了许多 Vue 相关的优秀开源项目、组件、工具、插件等资源的 GitHub 仓库。该仓库以清晰的分类和详细的介绍，方便开发者查找和使用 Vue 生态中的优秀资源。

Javascript

正则

正则表达式是一种表示字符串模式的方法，常用于搜索、替换和匹配文本。它可以用来匹配特定模式的字符串，比如验证邮箱、手机号、身份证号码等。
RegexOne提供了一个互动的教程来学习正则表达式。
regulex是一个超级好用的正则表达式可视化工具。
regex101是一个在线的正则表达式测试平台。

ES6

ES6（ECMAScript 6）是 JavaScript 语言的一次重大更新，也称为 ECMAScript 2015。ES6 主要增加了许多新的语法特性，如箭头函数、解构赋值、let 和 const 关键字、模板字符串、类等，同时也增加了许多新的内置函数和方法，如 Promise、Set、Map、Array.from 等。
ECMAScript 6 入门(阮一峰)

typescript

TypeScript 中文网是 TypeScript 官方中文文档网站，提供全面的 TypeScript 中文学习资源，包括入门指南、手册、工具、文章、案例等。该网站由社区维护，更新及时、质量高，是学习 TypeScript 的好帮手。
深入理解 TypeScript

Vue.js

vue学习

vue

Vue.js官方文档是学习 Vue.js 的最佳资源之一，提供了全面的 Vue.js 教程和 API 文档。
vue源码
 vue-router
vuex
pinia

vue开发插件

一个 Vue.js 应用程序的浏览器调试工具，可以在 Chrome 和 Firefox 上使用。

vueuse

VueUse是一个基于Vue 3的轻量级、模块化的函数库，提供了一些方便实用的Vue自定义Hooks。这里包含了许多常用的功能，例如状态管理、表单处理、时间处理、剪贴板操作、动画效果、浏览器API等，也支持Tree Shaking，可以根据需求选择所需要的模块，避免浪费不必要的资源和加载时间。

vue项目模版

nuxt

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，用于创建服务端渲染 (SSR) 应用程序。它基于 Vue.js，封装了服务端渲染、异步数据加载、打包优化、静态资源预加载、路由系统等一系列的解决方案和最佳实践，使开发人员可以更快地构建高性能、可扩展的应用程序。

vuepress

VuePress是一个基于Vue.js的静态网站生成器，它能够生成具有文档阅读体验的静态网站。VuePress使用Vue.js的单文件组件和Webpack进行开发，支持Markdown写作格式，并提供了丰富的主题和插件可供选择。

vue-admin-template

Vue Admin Template 是一个基于 Vue.js 2.x 的后台管理系统模板，它使用了一些流行的技术栈，如 Element UI、Vue Router、Vuex 等等。Vue Admin Template 提供了丰富的页面和组件，使得快速搭建后台管理系统变得更加简单。

React.js

react学习

react

这是学习 React 最好的网站。它包含 React 完整的文档和教程,从基础到高级,涵盖了 React 的方方面面。建议从官网的 learn react 入手,系统学习 React。
react源码
 redux
React Router
React Hooks

react开发插件

这是一个由 Facebook 官方开发的浏览器插件，可以方便地查看 React 组件的层次结构，以及 props 和 state 的值。

react项目模板

next.js

Next.js是一个基于 React 的服务器端渲染框架，支持自动代码分割、静态页面生成和基于数据的客户端路由等特性，可以帮助开发者快速构建高性能、可扩展的 Web 应用。 next.js中文文档

Gatsby

Gatsby是一个基于 React 的静态网站生成器，支持使用 Markdown、React 组件、GraphQL 等构建静态网站，可以帮助开发者快速构建 SEO 友好、高性能的静态网站。 Gatsby中文文档

Ant Design Pro

Ant Design Pro是一个基于 Ant Design 的企业级后台管理系统模板，提供了丰富的组件和模板，可以帮助开发者快速构建高质量的企业级应用。

小程序开发

微信小程序

在该文档中，你可以学习如何开发小程序，包括小程序的基础知识、开发工具的使用、小程序开发的各种组件和接口的使用方法等等。

taro

Taro是由京东·凹凸实验室开发的一款多端统一开发框架，支持编译成微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、QQ小程序、H5等多个平台的代码。

uni-app

uni-app是由DCloud公司开发的一款基于Vue.js开发的多端统一开发框架，支持编译成微信小程序、支付宝小程序、百度智能小程序、QQ小程序、快应用、H5等多个平台的代码。

react Native

React Native是 Facebook 推出的一种跨平台移动应用开发框架，支持使用 JavaScript 和 React 以及其他web技术进行移动应用开发。可以在 Android 和 iOS 上构建本机应用，同时也支持在 web 上开发。

微前端

Qiankun

Qiankun是阿里巴巴前端体系基于微前端规范实现的一套解决方案。它提供主应用和微应用两种角色。主应用作为整个项目的入口,微应用负责独立业务场景。微应用可以选择React、Vue或者其他框架开发,并且可以部署在不同域名下。主应用动态加载微应用,微应用之间也可相互嵌套。提供沙箱机制,确保微应用之间的隔离性。提供主应用和微应用之间的通信方案。支持SSR渲染和TypeScript。

工具

环境配置

node.js

这是Node.js的官方网站，提供了关于Node.js的文档、API参考和下载链接等信息。官网还提供了一个交互式的Node.js教程，帮助初学者了解Node.js的基本概念和语法。
node中文文档参考。

npm

npm是Node.js官方的包管理器，用于帮助Node.js开发人员安装、发布、分享和管理Node.js模块（也称为包或库）。这里提供了npm的文档、包管理器、包搜索和社区等。学习者可以在这里找到各种npm相关的信息和资源，包括如何使用npm安装、发布和管理包等。
npm快速入门。

git

Git 是一个开源的分布式版本控制系统，用于管理软件开发过程中的源代码。它最初由Linus Torvalds在2005年创建，目的是更好地管理Linux内核的开发。Git 可以轻松地管理大型项目，并使多人协作变得更加简单和高效。
常用 Git 命令清单

常用库

axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种简洁、优雅、灵活和易于使用的方式，使得发送 HTTP 请求变得容易。
axios中文文档参考

moment.js

Moment.js 是一个流行的 JavaScript 库，用于处理、解析和显示日期和时间。它提供了丰富的日期和时间处理功能，包括格式化、解析、时区转换、相对时间计算等。

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

echarts

ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库，支持各种常见图表类型，如折线图、柱状图、散点图、饼图、仪表盘等，可以灵活扩展和定制化，广泛应用于数据可视化和图表展示的场景。

xlsx

sheetjs 提供了excel在前端使用纯js导出的解决方案，在线阅读excel和导出excel工具。

构建工具

webpack

webpack是一个非常强大的JavaScript模块打包工具，可以处理各种类型的文件，支持自定义配置和插件，同时也提供了一些优化功能，如代码压缩、缓存等。
webpack中文文档参考
 深入浅出 Webpack

vite

Vite是一个现代化的构建工具，可以快速构建现代Web应用程序。Vite可以快速启动项目，支持快速热更新、动态导入和静态分析等功能。与传统的打包工具不同，Vite采用原生ES模块作为开发时的模块系统，可以实现按需编译，避免了不必要的打包时间和编译过程。

rollup

rollup是一个专门用于打包JavaScript库的构建工具，支持ES6模块和Tree Shaking等功能。
rollup中文文档
 rollup-plugin-vue
rollup团队仓库

项目配置

eslint

ESLint 是一个 JavaScript 代码检查工具，用于检测代码中潜在的问题和错误，以保证代码质量和一致性。它可以识别并纠正常见的代码风格问题，如缩进、括号、引号等，还可以检查语法错误、未使用变量、未声明变量、代码重复等问题。
eslint中文文档参考

prettier

Prettier 是一个代码格式化工具，可以根据配置自动格式化代码，使代码风格一致，减少开发者在代码格式上的时间和精力投入，从而提高开发效率。

style-lint

style-lint 是一款强大的 CSS 代码规范检查工具，它可以帮助开发者保持一致的 CSS 代码风格，提高代码可维护性和可读性。Stylelint 支持配置文件，可以针对不同的项目需求进行定制化设置。
style-lint中文文档参考

husky

Husky 是一个 Git hook 工具，可以让开发者在代码提交、推送等 Git 操作前自动执行一些脚本。常见的用途包括在提交代码前自动运行代码检查、格式化代码等操作，从而保证代码的质量和风格一致性。
husky中文文档参考

babel

Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在使用 Babel 进行开发时，需要进行相应的配置才能使 Babel 正常工作。

lint-staged

lint-staged是一个在git暂存文件(staged files)上运行代码格式规范的工具。它只校验暂存文件的改动(diff),而不是整个项目。这样可以提高lint效率,并且避免提交未修改的文件产生的lint错误。

css编译器

less

Less 是一种动态样式语言，是 CSS 的一种扩展，提供了许多 CSS 所没有的功能，如嵌套规则、变量、运算、函数等，使得 CSS 更加易读、易维护和易扩展。
less中文文档参考

sass

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。它扩展了CSS，并添加了许多有用的特性，如变量、嵌套规则、Mixin（混合）、函数等。
sass中文文档参考

stylus

Stylus是一种CSS预处理器，Stylus具有类似于Less和Sass的功能，但它的语法更加简洁，并且可以非常容易地与Node.js集成。同时，Stylus还支持实时编译，可以让开发人员更快地调试和开发CSS样式。
stylus中文文档参考

PostCSS

PostCSS 是一个 CSS 后处理器，它能够解析 CSS 代码并且使用插件来转换 CSS。PostCSS 的插件生态系统非常丰富，可以实现各种 CSS 的转换，例如自动添加浏览器前缀、将 rem 单位转换为 px、压缩 CSS 等等。

单元测试

Jest

jest是由Facebook开发的JavaScript测试框架，可用于测试React、Angular和Vue等前端框架。

Mocha

Mocha是一个基于Node.js和浏览器的JavaScript测试框架，支持异步和同步测试，并且可以与各种断言库和测试覆盖率工具配合使用。

AVA

AVA是一个轻量级的JavaScript测试框架，支持异步测试和并发执行，具有快速、简单和易于使用的特点。