Ubuntu - 开发

Ubuntu - 开发环境搭建

Ubuntu 是一个流行的软件开发 (software development) 平台，因为它稳定、拥有丰富的命令行工具 (command-line tools)，并且对编程语言 (programming languages) 和开发工具 (development tools) 有广泛的支持。让我们探讨如何搭建一个现代的开发环境 (development environment)，重点介绍 Visual Studio Code (VS Code)。

选择 IDE/文本编辑器

虽然提供有 Gedit (GNOME 文本编辑器) 等基础文本编辑器，但对于严肃的开发工作，推荐使用更强大的集成开发环境 (IDE) 或高级文本编辑器 (advanced text editor)。

• Visual Studio Code (VS Code)： 由微软 (Microsoft) 开发的一款免费、开源且广受欢迎的代码编辑器 (code editor)。它对多种语言提供出色支持，拥有 Git 集成 (Git integration)、庞大的扩展市场 (extension marketplace)、调试工具 (debugging tools) 和集成终端 (integrated terminal)。这将是我们的重点。
• Sublime Text： 一款专有、快速且功能丰富的文本编辑器，以其性能和可定制性而闻名。
• JetBrains IDEs (IntelliJ IDEA, PyCharm, WebStorm 等)： 功能强大、商业化的 IDE，专为特定语言或平台量身定制（例如 PyCharm 用于 Python，IntelliJ IDEA 用于 Java/Kotlin，WebStorm 用于 JavaScript）。通常提供免费的社区版 (Community editions)。
• GNOME Builder： 一个专注于 GNOME 应用开发 (GNOME application development) 的 IDE，也可用于其他项目。
• Vim/Neovim 或 Emacs： 强大的基于终端的文本编辑器，学习曲线陡峭，但一旦掌握效率极高。

安装 Visual Studio Code (VS Code)

VS Code 可以通过几种方式安装到 Ubuntu 上：

方法 1：使用 Snap 包（易于更新）

sudo snap install code --classic

--classic 限制允许 VS Code 访问必要的系统资源。

方法 2：使用 .deb 包（官方）

步骤 1：访问 VS Code 官方网站：https://code.visualstudio.com/

步骤 2：下载 Debian/Ubuntu (64 位) 的 .deb 包。

步骤 3：安装下载的软件包。打开终端，导航到你的 Downloads 文件夹，然后运行（将 vscode_filename.deb 替换为实际下载的文件名）：

cd ~/Downloads
sudo apt install ./<vscode_filename.deb>

此方法还会添加 Microsoft 软件源 (Microsoft repository)，因此 VS Code 可以通过 sudo apt update && sudo apt upgrade 进行更新。

安装完成后，从应用菜单启动 VS Code。

在 VS Code 中搭建一个简单的 Web 项目

让我们创建一个基本的 HTML 项目：

步骤 1：创建一个项目文件夹。打开终端并创建一个目录：

mkdir ~/my_web_project
cd ~/my_web_project

步骤 2：在 VS Code 中打开文件夹。在终端中输入：

code .

此命令将在 VS Code 中打开当前目录 (.)。

步骤 3：创建一个 HTML 文件。在 VS Code 的资源管理器面板 (Explorer panel)（通常在左侧），在空白处右键点击，选择“新建文件 (New File)”。将其命名为 index.html。

步骤 4：添加基本的 HTML 内容。输入 ! 或 html:5，然后按 Tab 或 Enter 键。VS Code 将生成一个基本的 HTML5 模板。添加一些内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, Ubuntu Developers!</h1>
    <p>Welcome to web development with VS Code.</p>
    <script src="script.js"></script>
</body>
</html>

步骤 5：创建一个 CSS 文件（可选）。创建 style.css 并添加一些样式：

style.css

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    padding-top: 50px;
}

h1 {
    color: navy;
}

步骤 6：创建一个 JavaScript 文件（可选）。创建 script.js 并添加一些简单的 JS：

script.js

console.log("JavaScript is running!");
alert("Page Loaded!");

步骤 7：预览你的页面。最好的方法之一是在 VS Code 中使用“Live Server”扩展：

1. 进入“扩展”视图 (Extensions view)（Ctrl+Shift+X 或侧边栏的方块图标）。
2. 搜索 Ritwick Dey 的“Live Server”并安装它。
3. 安装完成后，在资源管理器中右键点击你的 index.html 文件，选择“Open with Live Server”（用 Live Server 打开）。这将在浏览器中打开你的页面，并在你保存更改时自动刷新。

使用 Git 进行版本控制

Git 是现代开发必不可少的版本控制系统 (version control system)。在 Ubuntu 上安装它：

sudo apt update
sudo apt install git

配置 Git，填写你的详细信息：

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

VS Code 拥有出色的内置 Git 集成功能，允许你直接在编辑器中初始化仓库 (initialize repositories)、提交更改 (commit changes)、创建分支 (branch)、合并 (merge) 以及从 GitHub 或 GitLab 等远程仓库 (remote repositories) 推送/拉取 (push/pull)。

常见学习障碍：管理不同的语言版本 (language versions) 和依赖项 (dependencies)（例如，多个 Python 版本，Node.js 版本）。asdf-vm、nvm（用于 Node.js）、pyenv（用于 Python）和 Docker 容器等工具非常宝贵，可用于管理复杂的开发环境设置 (development setups) 并确保项目特定的环境 (project-specific environments)。

实际应用场景： 一位开发者正在构建一个 Node.js 应用。他们会安装 Node.js（可能使用 nvm 来管理版本），使用 npm init 设置项目，安装带有相关扩展（例如 ESLint、Prettier）的 VS Code，初始化一个 Git 仓库，并编写他们的 Express.js 或 React 代码，使用 VS Code 的调试器 (debugger) 和集成终端 (integrated terminal)。