参考资源和工具

本文档汇总了学习 JavaScript 和 TypeScript 过程中有用的资源、工具和参考材料。

📚 官方文档

JavaScript

• MDN Web Docs - JavaScript

  • 最权威的 JavaScript 文档
  • 包含详细的 API 参考和教程
  • 有中文版本

• ECMAScript 规范

  • JavaScript 语言规范
  • 了解语言的标准定义

TypeScript

• TypeScript 官方文档

  • TypeScript 官方文档
  • 包含完整的类型系统说明
  • 有中文版本

• TypeScript Handbook

  • TypeScript 手册
  • 深入讲解 TypeScript 特性

Node.js

• Node.js 官方文档

  • Node.js 运行时文档
  • API 参考和指南

• npm 文档

  • npm 包管理器文档
  • 包发布和管理指南

框架和库

• React 官方文档

  • React 框架文档
  • 有中文版本

• Express 官方文档

  • Express 框架文档
  • Web 应用开发指南

• Next.js 文档

  • Next.js 框架文档
  • React 服务端渲染

📖 在线教程

综合教程

• JavaScript.info

  • 现代 JavaScript 教程
  • 从基础到高级
  • 有中文版本

• freeCodeCamp

  • 免费编程课程
  • 包含大量实践项目
  • 可获得证书

• Codecademy

  • 交互式编程课程
  • 适合初学者

TypeScript 教程

• TypeScript 入门教程

  • 中文 TypeScript 教程
  • 适合初学者

• 深入理解 TypeScript

  • TypeScript Deep Dive 中文版
  • 深入讲解 TypeScript

视频教程

• Bilibili

  • 搜索 "JavaScript 教程" 或 "TypeScript 教程"
  • 大量中文视频教程

• YouTube

  • Traversy Media
  • The Net Ninja
  • Academind

📚 推荐书籍

JavaScript

1. 《JavaScript 高级程序设计》（第 4 版）

   • 作者：Matt Frisbie
   • 别名：红宝书
   • 适合：初学者到中级

2. 《你不知道的 JavaScript》系列

   • 作者：Kyle Simpson
   • 深入讲解 JavaScript 核心机制
   • 适合：中级到高级

3. 《JavaScript 权威指南》（第 7 版）

   • 作者：David Flanagan
   • 别名：犀牛书
   • 适合：作为参考书

4. 《Eloquent JavaScript》

   • 作者：Marijn Haverbeke
   • 免费在线阅读
   • 适合：初学者

TypeScript

1. 《TypeScript 编程》

   • 作者：Boris Cherny
   • 全面讲解 TypeScript
   • 适合：中级

2. 《深入理解 TypeScript》

   • 作者：Basarat Ali Syed
   • 免费在线阅读
   • 适合：中级到高级

设计模式和架构

1. 《JavaScript 设计模式与开发实践》

   • 作者：曾探
   • 讲解 JavaScript 中的设计模式

2. 《重构：改善既有代码的设计》

   • 作者：Martin Fowler
   • 代码重构经典

3. 《代码整洁之道》

   • 作者：Robert C. Martin
   • 编写高质量代码

🛠️ 开发工具

代码编辑器

• Visual Studio Code

  • 最流行的代码编辑器
  • 丰富的插件生态
  • 免费开源

• WebStorm

  • JetBrains 出品
  • 功能强大
  • 付费软件

VS Code 推荐插件

必装插件：

• ESLint - JavaScript 代码检查
• Prettier - 代码格式化
• JavaScript (ES6) code snippets - 代码片段
• Path Intellisense - 路径自动补全
• Auto Rename Tag - 自动重命名标签
• Live Server - 本地开发服务器

TypeScript 插件：

• TypeScript Vue Plugin (Volar) - TypeScript 支持
• Pretty TypeScript Errors - 美化 TypeScript 错误信息

React 插件：

• ES7+ React/Redux/React-Native snippets - React 代码片段
• React Developer Tools - React 调试工具

其他实用插件：

• GitLens - Git 增强
• Todo Tree - TODO 高亮
• Better Comments - 注释增强
• Bracket Pair Colorizer - 括号配对着色
• indent-rainbow - 缩进彩虹

浏览器工具

• Chrome DevTools

  • Chrome 开发者工具
  • 调试和性能分析

• React Developer Tools

  • React 调试工具
  • Chrome 扩展

• Redux DevTools

  • Redux 调试工具
  • Chrome 扩展

在线工具

代码运行和测试：

• TypeScript Playground

  • 在线运行 TypeScript
  • 查看编译结果

• CodeSandbox

  • 在线代码编辑器
  • 支持多种框架

• StackBlitz

  • 在线 IDE
  • 支持 Node.js

• JSFiddle

  • 在线代码测试
  • 快速分享代码

API 测试：

• Postman

  • API 测试工具
  • 功能强大

• Insomnia

  • API 测试工具
  • 界面简洁

正则表达式：

• Regex101

  • 正则表达式测试
  • 详细解释

• RegExr

  • 正则表达式学习
  • 可视化工具

代码格式化：

• Prettier Playground
  • 在线代码格式化
  • 配置预览

性能分析：

• Lighthouse

  • 网站性能分析
  • Chrome 内置

• WebPageTest

  • 网站性能测试
  • 详细报告

📦 常用 npm 包

工具库

• lodash - 实用工具库
• date-fns - 日期处理
• axios - HTTP 客户端
• uuid - UUID 生成

测试

• Jest - 测试框架
• Vitest - 快速测试框架
• Testing Library - React 测试
• Cypress - E2E 测试

代码质量

• ESLint - 代码检查
• Prettier - 代码格式化
• Husky - Git hooks
• lint-staged - 暂存文件检查

构建工具

• Vite - 快速构建工具
• Webpack - 模块打包器
• esbuild - 极速打包器
• Rollup - 模块打包器

🌐 社区和论坛

中文社区

• 掘金

  • 技术文章分享
  • 活跃的中文社区

• 思否 SegmentFault

  • 技术问答社区
  • 中文技术博客

• V2EX

  • 创意工作者社区
  • 技术讨论

• 知乎

  • 搜索技术问题
  • 高质量回答

国际社区

• Stack Overflow

  • 最大的技术问答社区
  • 搜索问题必备

• GitHub

  • 代码托管平台
  • 开源项目

• Reddit - r/javascript

  • JavaScript 讨论区
  • 技术新闻

• Dev.to

  • 开发者社区
  • 技术博客

技术博客

• 阮一峰的网络日志

  • 高质量技术文章
  • ES6 入门教程

• 张鑫旭的博客

  • 前端技术博客
  • CSS 和 JavaScript

• 冴羽的博客

  • JavaScript 深度文章
  • 系列教程

📰 技术资讯

新闻网站

• Hacker News

  • 技术新闻聚合
  • 高质量讨论

• JavaScript Weekly

  • JavaScript 周刊
  • 邮件订阅

• Node Weekly

  • Node.js 周刊
  • 邮件订阅

技术会议

• JSConf

  • JavaScript 会议
  • 全球各地

• Node.js Interactive

  • Node.js 会议
  • 官方活动

🎓 在线课程平台

免费课程

• freeCodeCamp

  • 完全免费
  • 可获得证书

• The Odin Project

  • 全栈开发课程
  • 完全免费

• MDN Learn

  • MDN 学习区
  • 官方教程

付费课程

• Udemy

  • 大量课程
  • 经常打折

• Frontend Masters

  • 高质量前端课程
  • 专业讲师

• Egghead.io

  • 短视频课程
  • 专注前端

• Pluralsight

  • 技术课程平台
  • 企业培训

🔧 实用工具网站

代码生成

• JSON Generator

  • 生成测试数据
  • JSON 格式

• Mockaroo

  • 生成模拟数据
  • 多种格式

图标和图片

• Font Awesome

  • 图标库
  • 免费和付费

• Unsplash

  • 免费高质量图片
  • 可商用

• Iconfont

  • 阿里图标库
  • 中文界面

颜色工具

• Coolors

  • 配色方案生成
  • 灵感工具

• Color Hunt

  • 配色方案
  • 社区分享

文档工具

• Notion

  • 笔记和文档
  • 团队协作

• Markdown Guide

  • Markdown 教程
  • 语法参考

📱 移动应用

学习应用

• SoloLearn

  • 移动学习应用
  • 支持多种语言

• Grasshopper

  • Google 出品
  • JavaScript 学习

代码编辑

• Termux (Android)

  • 终端模拟器
  • 可运行 Node.js

• iSH (iOS)

  • Linux Shell
  • 可运行命令行工具

🎯 学习路线图

• roadmap.sh

  • 开发者学习路线图
  • 前端、后端、全栈

• JavaScript Roadmap

  • JavaScript 学习路线
  • 详细指南

• TypeScript Roadmap

  • TypeScript 学习路线
  • 进阶指南

💡 其他资源

算法和数据结构

• LeetCode

  • 算法题库
  • 面试准备

• JavaScript Algorithms

  • JavaScript 算法实现
  • GitHub 项目

设计资源

• Dribbble

  • 设计灵感
  • UI/UX 设计

• Behance

  • 设计作品
  • Adobe 平台

开源项目

• Awesome JavaScript

  • JavaScript 资源列表
  • GitHub 项目

• Awesome TypeScript

  • TypeScript 资源列表
  • GitHub 项目

---

提示： 这些资源很多，不需要全部使用。选择适合自己的几个，深入学习即可。重要的是持续学习和实践！

👉 返回主页