设置 Pop!_OS 进行前端开发

如果您最近听说了有关 Pop!_OS 的所有讨论并且一直想尝试一下，这里有一个关于设置前端开发机器的好指南。

如果您对 Linux 比较陌生，并且只是在尝试，我建议您在虚拟机中构建它。我这里有在虚拟机中安装 Pop!_OS 的完整说明。这是在不对计算机进行重大改动的情况下尝试使用的最佳方法。

接下来，你能用 Pop!_OS 搭建一台前端开发机器吗？当然可以！它是最容易搭建的环境之一，并且能提供快速、稳定和美观的外观。以下是操作方法。

获取基本工具

你需要一些基础知识才能开始使用任何开发机器。让我们安装一些核心工具。

通常在这些教程中，我建议第一步安装 Git，但 Pop!_OS 已经默认安装了 Git！

接下来，安装 Node 和 NPM

sudo apt install nodejs npm

运行以下命令以确保其已安装：

node -v
npm -v

完美！我们来安装一个快速 React 应用吧。

npx create-react-app hello world

这将使用create-react-app搭建一个新的 React 应用程序。

cd hello-world
npm start

这就是我们精美的 Feact 应用。现在，让我们开始使用一些工具。

点击 Pop! 商店

首先，我们将安装 Git Kracken。这是一个方便的 Git 可视化工具。

接下来，我们将安装 Postman：

当然还有 Visual Studio Code。

注意，这里可以选择 deb 或 Flatpack。Pop!_OS 中的许多软件包都提供了此选项。

Serve 是我多年来一直使用的工具之一。现在，如果你使用 React、Angular 或 Vue，它内置了一个 Web 服务器。其他所有功能，我都使用 Serve。

sudo npm install -g serve

使用 Serve，您可以从任何文件夹中运行 HTTP 服务器：

对于一次性项目来说它非常方便。

以下是我喜欢设置项目文件夹的方式。

cd ~
mkdir libraries

然后我设置这样的文件夹：

mkdir css
mdir javascript

cd css

在这里我喜欢在 Bootstrap 中克隆

git clone https://github.com/twbs/bootstrap.git

和 Tailwind

git clone https://github.com/tailwindcss/tailwindcss.git

是的，我知道您可以将它们包含在 NPM 中，但我总是喜欢在我的硬盘上保留一份副本，以便我可以抓取它来测试一些东西，并且很容易确保它们是最新的。

在我的 JavaScript 库中，我喜欢保留大型框架和任何其他我可能想要抓取并放入项目中的 JS 内容的副本。

cd ../javascript

这里我将克隆三大巨头：

git clone https://github.com/facebook/react.git
git clone https://github.com/angular/angular.git
git clone https://github.com/vuejs/vue.git

然后，我创建一个项目文件夹。在这里我可以创建不同的项目，然后用 Git 初始化并推送到其他地方。

cd ~
mkdir Projects

我通常会创建一个输出文件夹。这本质上是一个可以运行 Serve 的制品 (dist) 文件夹。这是一个非常好的预测试方法，可以看看最终效果。之后我会把它清空。

mkdir Projects/output

现在已经安装了 Visual Studio Code，我将添加一些插件来帮助我们：

我将安装Prettier

或者您可以使用Angular Extension Pack来获得大量 Angular 优点。

Pop!_OS 用起来超级好玩，而且运行流畅。我最近大部分前端开发工作都在这个操作系统上进行。设置好之后，一切就绪了。感觉就像在 Mac 上开发一样，但又不需要 Mac！如果你还没试过 Pop!_OS，我强烈推荐它。

如果你想提高你的前端开发能力，请查看 Pluralsight 上的一些精彩课程：

您正在用 Pop!_OS 进行前端开发吗？您觉得怎么样？遇到问题了吗？欢迎留言告诉我！