2. 环境设置
工具
入门模块
本模块包含与设置和使用你将用于实现网站/应用程序的计算机系统相关的主题。这些主题与创建 Web 代码没有直接关系,但了解你正在使用的操作系统将使你受益匪浅。
通用资源
- Windows 帮助和学习,Microsoft (2024)
- macOS 用户指南,Apple (2024)
- 官方 Ubuntu 文档,ubuntu.com (2024)
2.1 计算机基础
2.2 文件系统
- 基本资源管理器/查找器用法。
- 标准文件夹结构。
- Web 的文件命名最佳实践 - 无空格、小写、选择合理的分割符,例如连字符或下划线。
- 基本文件组织最佳实践。
- 使用资源管理器/查找器创建、移动和删除文件和文件夹。
- 搜索文件和文件夹。
- 处理文件扩展名(例如,在 Windows 中关闭“隐藏已知文件类型的扩展名”,显示点文件(
.env
等)。) - 了解文件类型如何与应用程序关联。
资源
2.3 浏览网页
- 可用的 Web 浏览器。
- 安装 Web 浏览器。
- Web 浏览器、网站和搜索引擎之间的区别。
- 基本搜索引擎用法。
资源
- 网页、网站、Web 服务器和搜索引擎之间有什么区别?
- 如何像专业人士一样使用搜索:Google 及其他搜索引擎的 10 个技巧和窍门,theguardian.com (2016)
2.4 命令行基础
- 了解什么是命令行以及你可以用它做什么。
- 了解如何在不同系统上访问命令行
- 在 Linux 和 macOS 上,你通常都有一个内置的终端可以使用。
- 在 Windows 上,默认的命令提示符功能略有局限;如果你想要与 macOS/Linux 相同的命令和功能,最好安装像 Windows 子系统 Linux (WSL)、PowerShell 或 Git Bash(Git for Windows 的一部分)这样的工具。
- 快捷键(例如,向上箭头访问以前的命令,Tab 键自动完成)。
- 基本命令(例如,
cd
、ls
、mkdir
、touch
、grep
、cat
、mv
、cp
)。 - 命令选项/标志。
资源
- 命令行速成课程
- Stack Overflow 是查找命令行问题特定解决方案的好去处,例如 如何在 macOS 终端中批量重命名文件?
备注:
命令行/终端对于新手来说令人生畏 - 你只会看到一个闪烁的光标,没有任何明显的下一步操作指示。我们并不是说在你开始学习 Web 开发之前应该成为命令行高手,但你至少应该了解它是什么以及一些基本知识 - 你会惊讶地发现自己在 Web 开发工具中有多频繁地遇到命令行用法。
2.5 代码编辑器
- 了解可用的代码编辑器以及哪个适合你的目的
- 像 Microsoft Word 这样的二进制文件编辑器不适合编辑代码。你需要能够干净地处理和输出纯文本的工具。
- 默认的操作系统纯文本编辑器还可以,例如 macOS 上的 TextEdit 或 Windows 上的记事本,但它们也有一些限制。
- 你最好使用功能齐全的代码编辑器,例如 VSCode(跨平台,免费)、Sublime Text(跨平台,非免费)或 Notepad++(Windows,免费)。
- 集成开发环境 (IDE),例如 Visual Studio(Windows,非免费)、NetBeans(跨平台,免费)和 WebStorm(跨平台,非免费)往往比简单的代码编辑器具有更多功能,但往往比你在学习旅程的这个阶段所需的更复杂。
- 了解基本的代码编辑器可以为你做什么
- 打开和编辑代码文件。
- 语法高亮。
- 自动缩进和其他简单的语法修复。
- 代码补全和帮助。
- 查找和替换,通常可以使用正则表达式来增强功能(例如,保留特定字符串的开头和结尾,但替换中间的子字符串)。
- 通常提供与版本控制的集成(另请参阅 版本控制)
- 使用扩展自定义和增强你的代码编辑器
- 特定语言的扩展,例如代码补全、高亮、代码风格检查和调试。这可以应用于特定语言,例如 JavaScript、Python 或 Go,或者语言/框架抽象,例如 TypeScript 或 JSX。
- GitHub/版本控制扩展(如果默认情况下未提供)。
- 主题和配色方案扩展。
- 提高生产力的扩展,如代码片段和脚手架生成器。
- AI 支持的代码建议工具,例如 GitHub Copilot。请注意,虽然有用,但 AI 工具没有推理能力,并且经常提供误导性或完全错误的答案。你不应该仅仅假设 AI 的答案是正确的,而应该用其他来源对其进行测试/验证。