完整的 Windows Web 开发人员设置指南

2025-05-27

完整的 Windows Web 开发人员设置指南

🔭 概述

经过反复尝试，我终于搭建了一个相当不错的 Windows 开发环境。市面上已经有很多指南，但似乎没有一个能涵盖所有方面。我尝试在这里做到这一点，但不会深入探讨任何单个主题。我相信这能让大多数用户拥有流畅的 Windows 开发体验。

本指南的repo包含一些附加信息，并将不断更新。

先决条件

🐧 WSL

设置 Windows 开发环境的首要步骤是安装 Windows Linux 子系统 (WSL)。我建议坚持使用 Ubuntu，但您可以随意尝试其他发行版。一次安装多个发行版也没有问题。

安装 WSL 2

WSL 2 是 WSL 的最新版本，增加了完整 Linux 内核和完整系统调用兼容性等新功能。以前安装它需要几个步骤，但现在我们只需要在 PowerShell 或命令提示符中输入以下命令：



wsl --install
Enter fullscreen mode Exit fullscreen mode

此命令执行以下操作：

  • 启用可选的 WSL 和虚拟机平台组件
  • 下载并安装最新的 Linux 内核
  • 将 WSL 2 设置为默认
  • 下载并安装 Ubuntu Linux 发行版（可能需要重新启动）

该--install命令默认使用 Ubuntu，并且仅在尚未安装 WSL 的情况下有效。如果您想更改默认的 Linux 发行版，请遵循以下文档。

用户配置

安装 Linux 发行版并安装 WSL 完成后，请使用“开始”菜单打开发行版（默认为 Ubuntu）。系统将要求您为 Linux 发行版创建用户名和密码。输入新密码后，终端中不会显示任何内容。您的键盘仍然可以使用！这只是一项安全功能。

  • 此用户名和密码特定于您安装的每个单独的 Linux 发行版，与您的 Windows 用户名无关。

  • 一旦您创建了用户名和密码，该帐户将成为您分发的默认用户，并在启动时自动登录。

  • 该帐户将被视为 Linux 管理员，具有运行 sudo（超级用户执行）管理命令的能力。

  • 每个在 WSL 上运行的 Linux 发行版都有其自己的 Linux 用户帐户和密码。每次添加发行版、重新安装或重置时，都需要配置 Linux 用户帐户。

更新 Linux

建议您定期更新和升级软件包。在 Ubuntu 或 Debian 中，我们使用以下apt软件包管理器：



sudo apt update && sudo apt upgrade
Enter fullscreen mode Exit fullscreen mode

Windows 不会自动更新或升级您的 Linux 发行版。大多数 Linux 用户更喜欢自己控制这项任务。

映射您的Linux驱动器

打开 Windows 文件资源管理器后，它会显示你的设备和驱动器。我们将添加 Ubuntu 虚拟驱动器作为网络位置，以便于访问。

  1. 从文件资源管理器打开\\wsl$\位置：
    文件资源管理器搜索栏

  2. 右键单击 Ubuntu 文件夹，然后选择Map network drive：
    映射网络驱动器

  3. 选择您想要使用的驱动器号，保留Reconnect at sign-in选中和Connect using different credentials未选中状态，然后单击完成（我的看起来会略有不同，因为它已经完成）：
    映射网络驱动器

  4. 最终结果应该看起来像这样：
    文件资源管理器

如果您想从 Linux 终端访问您的 Windows 文件，它们位于/mnt/目录中，因此您的 Windows 用户目录将位于/mnt/c/Users/username。

映射 Ubuntu 驱动器后，您可以使用文件资源管理器轻松地将 Windows 文件拖放或复制/粘贴到 Linux 文件系统。

但是，建议将项目文件存储在 Linux 文件系统上。这比从 Windows 访问文件要快得多，但也可能存在一些 bug。

固定您的代码目录

我的另一个小技巧是在 Ubuntu 中创建一个代码目录，然后将其固定到文件资源管理器左侧的快速访问菜单中。这在 Windows 和 Linux 之间快速传输文件时非常方便。

  1. 打开文件资源管理器并单击我们创建的 Ubuntu 网络驱动器
  2. 选择主目录，然后选择您的用户目录
  3. 右键单击并创建一个新文件夹，将其命名为代码或任何你喜欢的名称

  4. 将新文件夹拖到左侧，位于星形图标下方，显示Quick access

    我的代码目录

重启 WSL

如果由于某种原因 WSL 停止工作，您可以使用 PowerShell/命令提示符中的这两个命令重新启动它：



wsl.exe --shutdown
wsl.exe
Enter fullscreen mode Exit fullscreen mode

如果您返回 Linux shell，一切都会恢复正常。

👨‍💻Windows 终端

要启动 Linux 终端，我们目前需要使用“开始”菜单中的 Ubuntu 图标，或在 PowerShell/命令提示符中输入wsl或bash命令。另一个选项是使用 Windows 终端，它可以提供更多功能，例如选项卡、拆分视图、主题、透明度和按键绑定。此外，还有一些其他终端，例如Cmder、ConEmu或Hyper，但根据我的经验，Windows 终端效果非常好。

安装 Windows 终端

Windows 11 默认自带 Windows 终端，但如果您使用的是 Windows 10，请通过Microsoft Store下载并安装 Windows 终端。

终端设置

我建议快速设置几个项目：默认配置文件和起始主目录。这些设置使得启动 Windows 终端时，会直接在用户主目录中打开 WSL。

默认配置文件

Windows Terminal 默认启动时会打开 PowerShell 或命令提示符 shell，以下是如何将其切换到 WSL：

  1. 从 Windows 终端中选择˅图标并转到设置菜单：
    Windows 终端设置

  2. 在“启动”部分，您将找到“默认配置文件”下拉菜单，选择“Ubuntu”。在其下方，选择“Windows 终端”作为默认终端应用程序：
    默认 shell 配置文件

起始目录

Ubuntu 默认终端会打开到根目录。为了更快地找到您的文件，我们可以将其打开到您的主目录。

  1. 在设置菜单的“配置文件”部分下，单击“Ubuntu”

  2. 在常规选项卡中，您将找到起始目录输入

  3. 输入以下内容，将“用户名”替换为您的 Ubuntu 用户名：\\wsl$\Ubuntu\home\username

  4. 您可以Use parent process directory不选中此框

  5. 如果它仍然打开到您的/目录中，请将输入框Command line正上方的设置更改Starting directory为以下内容：wsl.exe -d Ubuntu

Ubuntu 终端中的起始目录

还有更多设置可供探索，并且还有一个 JSON 文件可供您编辑以进行更高级的自定义。

查看本指南了解一些流行的 Windows 终端主题以及如何安装它们。

📝 Git 配置

大多数（如果不是全部）WSL Linux 发行版都应该预装 Git。为了确保你拥有最新版本，请在基于 Ubuntu 或 Debian 的发行版中使用以下命令：



sudo apt install git
Enter fullscreen mode Exit fullscreen mode

姓名

要设置您的 Git 配置文件，请打开 WSL 命令行并使用此命令设置您的名称（将“您的名称”替换为您喜欢的用户名）：



git config --global user.name "Your Name"
Enter fullscreen mode Exit fullscreen mode

电子邮件

使用此命令设置您的电子邮件（将“ youremail@domain.com ”替换为您喜欢的电子邮件）：



git config --global user.email "youremail@domain.com"
Enter fullscreen mode Exit fullscreen mode

用户名

最后，添加您的 GitHub 用户名以将其链接到 git（区分大小写！）：



git config --global user.username "GitHub username"
Enter fullscreen mode Exit fullscreen mode

确保您输入的是user.username，否则user.name您将覆盖您的名字，并且无法正确同步到您的 GitHub 帐户。

git config --global user.name您可以通过输入等命令来仔细检查任何设置。如需进行任何更改，只需像上述示例一样再次输入必要的命令即可。

😺 GitHub 凭证

创建您的个人访问令牌

GitHub 已移除在远程仓库中工作时使用传统密码的功能。现在您需要创建个人访问令牌。

在使用GitHub API或命令行时，个人访问令牌 (PAT) 是使用密码向 GitHub 进行身份验证的替代方法。

按照这些文档获取有关创建个人令牌的分步说明。

Git 凭证管理器

一旦您第一次输入令牌，它就可以通过Git Credential Manager (GCM)存储，这样您就不必每次都进行身份验证。

您可以同时在 WSL 和 Windows 中安装 Git。Windows版 Git包含 GCM，因此是安装 Git 的首选方式。

Windows Git 安装程序菜单

您还可以下载适用于 Windows 的最新安装程序来安装 GCM 独立版本。

存储你的令牌

安装 Git Credential Manager 后，您可以将其设置为与 WSL 一起使用。打开 WSL 终端并输入以下命令：



git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager-core.exe"
Enter fullscreen mode Exit fullscreen mode

笔记：

如果您收到以下错误消息：



/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe store: 1: 
/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe: not found
Enter fullscreen mode Exit fullscreen mode

尝试使用这个命令：



git config --global credential.helper store
Enter fullscreen mode Exit fullscreen mode

💤 Zsh

Z Shell 的工作原理与 Linux 默认安装中的标准 BASH Shell 几乎完全相同。它的独特之处在于支持插件和主题，以及一些额外的功能，例如拼写纠正和递归路径扩展。是时候把 BASH 扔进垃圾桶了！

安装 Zsh

可以使用一个命令安装 Zsh：



sudo apt install zsh
Enter fullscreen mode Exit fullscreen mode

安装完成后，输入zsh命令。Zsh 会要求你选择一些配置。我们稍后安装 oh-my-zsh 时会进行这些操作，因此请选择0创建配置文件的选项，这样就不会再出现此信息了。

OhMyZsh

目前最流行的插件框架是OhMyZsh。它预装了大量插件、主题、辅助工具等等。它确实能提高效率，但更重要的是，它看起来很酷😎。

卷曲

首先，我们需要确保已安装cURL。cURL是“客户端 URL”的缩写，它是一种从命令行传输数据的方式，我们下载 OhMyZsh 就是通过 cURL 来实现的。

使用以下命令安装 curl：



sudo apt install curl
Enter fullscreen mode Exit fullscreen mode

安装 OhMyZsh

在终端中输入以下命令来安装 OhMyZsh：



sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

就是这样！现在你应该.oh-my-zsh在主目录中看到一个目录了。要更改插件和主题，你需要编辑你的.zshrc文件，该文件也位于主目录中。

这是OhMyZsh 捆绑的所有主题和插件的列表。

更多插件

可用的插件数不胜数，但这两个是我最推荐的。

zsh 自动建议

zsh 的自动建议，它会根据历史记录和完成情况在您键入时建议命令。

  • 1. 将此存储库克隆到$ZSH_CUSTOM/plugins（默认情况下~/.oh-my-zsh/custom/plugins）


git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Enter fullscreen mode Exit fullscreen mode
  • 2. 将插件添加到 Oh My Zsh 加载的插件列表中（在里面~/.zshrc）：


plugins=(git zsh-autosuggestions)
Enter fullscreen mode Exit fullscreen mode
  • 3. 启动新的终端会话。

zsh 语法高亮

此软件包为 shell zsh 提供语法高亮功能。它支持在交互式终端中 zsh 提示符下输入命令时高亮显示。这有助于在运行命令之前进行检查，尤其是在捕获语法错误方面。

  • 1. 在 oh-my-zsh 的插件目录中克隆此存储库：


git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Enter fullscreen mode Exit fullscreen mode
  • 2. 在以下位置激活插件~/.zshrc：


plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
Enter fullscreen mode Exit fullscreen mode
  • 3. 启动新的终端会话。

更多的

您可以在超棒的 zsh 插件库中找到大量插件列表。

Node.js

Node.js 是一个 JavaScript 运行时环境，可以在 Web 浏览器之外执行 JavaScript 代码。它允许我们安装软件包、运行本地 Web 服务器、创建 API 等等。

非易失性存储器

根据您正在进行的不同项目的需求，您可能需要在多个 Node.js 版本之间切换。Node 版本管理器允许您通过命令行快速安装和使用不同版本的 Node.js。

安装 NVM

  • 1.打开 Ubuntu 命令行并使用以下命令安装 NVM：


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

要验证安装，请输入：command -v nvm。这应该返回“nvm”，如果您收到“找不到命令”或根本没有响应，请关闭当前终端，重新打开它，然后重试。

  • 2. 列出当前安装的 Node 版本（此时应该没有）：


nvm ls
Enter fullscreen mode Exit fullscreen mode

Ubuntu 终端显示节点未安装

  • 3. 安装 Node.js 的当前版本和稳定 LTS 版本。

安装 Node.js 的当前稳定 LTS 版本（推荐用于生产应用程序）：



nvm install --lts
Enter fullscreen mode Exit fullscreen mode

安装当前版本的 Node.js（用于测试最新的 Node.js 功能和改进，但更有可能出现问题）：



nvm install node
Enter fullscreen mode Exit fullscreen mode
  • 4.列出安装的 Node 版本：


nvm ls
Enter fullscreen mode Exit fullscreen mode

现在您应该看到列出的刚刚安装的两个版本。

Ubuntu 终端显示节点已安装

  • 5.验证Node.js是否已安装以及当前版本：


node --version
Enter fullscreen mode Exit fullscreen mode

然后验证您是否也安装了 NPM：



npm --version
Enter fullscreen mode Exit fullscreen mode

更改节点版本

使用以下命令更改您想要用于任何给定项目的 Node 版本：

切换到当前版本：



nvm use node
Enter fullscreen mode Exit fullscreen mode

切换到 LTS 版本：



nvm use --lts
Enter fullscreen mode Exit fullscreen mode

您还可以使用已安装的任何其他版本的特定编号：



nvm use v8.2.1.
Enter fullscreen mode Exit fullscreen mode

要列出所有可用的 Node.js 版本，请使用以下命令：nvm ls-remote。

新公共管理

Node.js 的默认包管理器是 Node.js 的默认包管理器。它是一个命令行工具，用于下载或发布包以及管理项目的依赖项。https ://www.npmjs.com/上有一个可搜索的 NPM 包仓库，其中包含所有可用的 NPM 包。

新项目

创建将使用 NPM 的新项目时，必须使用该init命令进行初始化。首先，确保您位于项目的根目录中，然后使用以下命令：



npm init
Enter fullscreen mode Exit fullscreen mode

包.json

npm init它会生成一个文件，并提示您输入项目的元数据。这包括名称、版本、描述和许可证等信息。您可以将其视为项目的蓝图，因为它还包含项目所依赖的软件包。初始化后，package.json您可以随时通过编辑文件来更改元数据。package.json

如果您希望自动用所有默认值填充初始化，您可以添加--yes标志。



npm init --yes
Enter fullscreen mode Exit fullscreen mode

安装模块

npm install模块通过或命令安装npm i。



npm install react
Enter fullscreen mode Exit fullscreen mode

上述命令将安装 React 模块作为依赖项package.json。

我们还可以全局安装 NPM 包。这对于命令行界面等实用程序非常有用。

Yarn是另一个广泛使用的节点包管理器，如果我们想在所有节点项目上使用它，我们将需要--global或-g标志。



npm install --global yarn
Enter fullscreen mode Exit fullscreen mode

依赖项

您可以将模块保存为依赖项或开发人员依赖项。

依赖项是指您的项目如果没有它就无法正常运行的东西。

该--save标志过去需要将模块作为依赖项来安装，但现在可以使用install命令自动完成。



npm install --save gray-matter
Enter fullscreen mode Exit fullscreen mode

与以下内容相同：



npm install gray-matter
Enter fullscreen mode Exit fullscreen mode

package.json 依赖项部分的 VS Code 示例

开发人员依赖项

开发者依赖项是指用于构建项目（而非运行项目）的模块。这包括诸如 linters 和测试工具之类的东西。

使用--save-dev或标志添加开发者依赖项-D。这会将模块添加到devDependenciespackage.json



npm install --save-dev husky
Enter fullscreen mode Exit fullscreen mode

package.json 的 devDependencies 部分的 VS Code 示例

批量安装

除了安装单个模块外，您还可以安装列为dependencies和 的所有模块devDependencies：



npm install
Enter fullscreen mode Exit fullscreen mode

这将安装package.json当前目录中列出的所有模块。

如果我们只想安装运行项目所需的依赖项，--production则使用以下标志：



npm install --production
Enter fullscreen mode Exit fullscreen mode

该标志将仅安装来自部分的--production模块，而忽略。这样做的好处是显著减小了文件夹的大小。dependenciespackage.jsondevDependenciesnode_modules

卸载

删除模块的方式与安装相同。任何全局或开发者依赖项都需要使用标志。

依赖项：



npm uninstall react
Enter fullscreen mode Exit fullscreen mode

开发人员依赖项：



npm uninstall --save-dev husky
Enter fullscreen mode Exit fullscreen mode

全球安装：



npm uninstall --global yarn
Enter fullscreen mode Exit fullscreen mode

版本控制

软件包版本通过主要版本、次要版本和补丁版本来标识。8.1.1例如，主要版本为 8，次要版本为 1，补丁版本为 1。

您可以使用@符号指定确切的版本号。



npm install react@17.0.1
Enter fullscreen mode Exit fullscreen mode

我们可以使用的另外两个符号是^和~。

^是最新的次要版本。
例如，如果版本是最新的次要版本，则npm install ^8.1.1规范可能会安装版本。8.3.1

~是最新的补丁版本。
与次要版本一样，如果这是最新的可用补丁版本，npm install ~8.1.1则可以安装版本。8.1.6

当使用npm install或npm i命令时，将使用最新的次要版本。

包-lock.json

确切的包版本将记录在生成的package-lock.json文件中。

dependencies文件的和devDependencies对象内的值package.json包括要安装的每个包的一系列可接受版本。

package-lock.json由命令生成npm install，包含所使用的依赖项的确切版本。

脚本

package.json还包含一个scripts属性，可以定义为运行当前项目上安装的命令行工具。这可以包括运行测试、格式化代码以及启动本地服务器等操作。

package.json 脚本部分的 VS Code 示例

NPM 脚本通过命令运行run。使用上述配置，您可以使用以下命令来更漂亮地格式化您的代码：



npm run format
Enter fullscreen mode Exit fullscreen mode

脚本对象中的键是命令名称，值是实际命令。

查看官方npm和Node.js文档以获取更深入的指南。

💻Visual Studio代码

有许多出色的免费代码编辑器，但 Visual Studio Code 已成为事实上的标准和我个人的最爱。

安装 VS Code

VS Code 可在 Windows、macOS 和 Linux 上使用。您可以在此处下载最新的 Windows 安装程序。我建议使用稳定版本。

更改默认 Shell

Ctrl可以通过按+ Shift+P并输入/选择终端：选择默认配置文件，然后选择 zsh，将 WSL2 shell 选为默认 VS Code 终端：

VSCode 默认 shell

远程扩展

在 VS Code 上安装Remote - WSL扩展。

这允许您使用 WSL 作为集成开发环境，并将为您处理兼容性和路径问题。了解更多。

此扩展还允许您使用命令直接从 WSL 终端启动 VS Code code。

如果我在我的存储库的根目录中，我将使用它code .来启动 VS Code 中的整个目录。



cd my-project
code .
Enter fullscreen mode Exit fullscreen mode

更多扩展

VS Code 可用的扩展数量非常多，以下是我最常用的一些扩展。

  • 实时服务器- 启动具有静态和动态页面实时重新加载功能的本地开发服务器。
  • Live Share - 包含开始实时协作编辑和调试所需的一切。
  • GitLens - 快速了解某一行或某一代码块被更改了的人、原因和时间。
  • Git 历史记录- 查看 git 日志、文件历史记录、比较分支或提交
  • Prettier - Prettier 是一个固执己见的代码格式化程序。
  • ESLint——查找并修复 JavaScript 代码中的问题
  • 颜色突出显示- 此扩展程序可设置文档中的 CSS/Web 颜色样式。
  • Markdown All in One - Markdown 键盘快捷键、目录、自动预览等
  • markdownlint - Visual Studio Code 的 Markdown 代码检查和样式检查
  • GitHub Markdown 预览- 添加样式、markdown 复选框、脚注、表情符号和 YAML 序言。
  • Wakatime - 根据你的编程活动自动生成的指标、见解和时间跟踪。
  • Dash - Visual Studio Code 中的 Dash、Zeal 和 Velocity 集成
  • Draw.io 集成- 这个非官方扩展将 Draw.io（也称为 diagrams.net）集成到 VS Code 中。
  • Docker - 轻松创建、管理和调试容器化应用程序。
  • Python - IntelliSense、Linting、调试、Jupyter Notebooks、重构、单元测试等。

笔记：

您需要为 Remote - WSL 安装所有 VS Code 扩展。已在 VS Code 本地安装的扩展将不会自动可用。了解更多。

🍫 巧克力味

Chocolatey 是一个类似于homebrew 的包管理器，但是适用于 Windows。

管理员 Shell

在开始安装过程之前，我想介绍一下如何从 Windows 启动管理 Shell。有几种方法可以做到这一点：

选项 1

右键单击 Windows 开始菜单并选择 Windows 终端（管理员）：

右键单击 Windows 开始菜单
终端加载完成后，点击图标并打开一个新的 PowerShell 选项卡。新选项卡中˅应该显示以下内容：Administrator: Windows PowerShell

管理员 PowerShell

选项 2

如果您的任务栏上有 Windows 终端，请在图标上按Shift+Right-Click并选择以管理员身份运行，然后打开一个新的 PowerShell 选项卡：

右键单击 Windows 终端图标

选项 3

使用“开始”菜单中的搜索栏，输入powershell。随后会显示“以管理员身份运行”的链接：

从开始菜单中搜索 PowerShell

选项 4

Windows 终端新增了一项功能，您可以在管理员终端中自动启动 PowerShell/命令提示符配置文件。在 Windows 终端设置中，向下滚动到所需的配置文件，然后切换开关Run this profile as Administrator。现在，您可以跳过上述所有步骤，终端将始终以管理员身份启动。

Windows 终端中的“管理”选项卡

安装 Chocolatey

  • 1. 打开管理 PowerShell 终端并运行：


Get-ExecutionPolicy
Enter fullscreen mode Exit fullscreen mode
  • 2. 如果返回Restricted，则运行以下命令之一：


Set-ExecutionPolicy AllSigned
Enter fullscreen mode Exit fullscreen mode

或者



Set-ExecutionPolicy Bypass -Scope Process
Enter fullscreen mode Exit fullscreen mode

使用 PowerShell 时，必须确保Get-ExecutionPolicy其不受限制。我们建议使用Bypass此选项来绕过策略以完成安装或AllSigned提高安全性。

  • 3.现在运行以下命令：


Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
Enter fullscreen mode Exit fullscreen mode

如果您没有看到任何错误，就可以使用 Chocolatey 了！立即输入choco或choco -?，或者参阅“入门”了解使用说明。

基本 Chocolatey 命令

我们使用该choco命令来运行 chocolatey。（请记住，您必须使用管理 shell 才能使其正常工作。）

安装新包：



choco install filename
Enter fullscreen mode Exit fullscreen mode

删除包：



choco uninstall filename
Enter fullscreen mode Exit fullscreen mode

列出所有已安装的软件包：



choco list
Enter fullscreen mode Exit fullscreen mode

更新：



choco upgrade filename
Enter fullscreen mode Exit fullscreen mode

或者一次性更新所有内容：



choco upgrade all
Enter fullscreen mode Exit fullscreen mode

Windows 应用

在社区软件包存储库中搜索可用的应用程序。

以下是我最喜欢的几个用于 Windows 生产力和开发的（免费）应用程序：

  • Wox - 功能齐全的启动器
  • RunJs ——JavaScript 和 TypeScript 游乐场
  • 响应式- 经过修改的 Web 浏览器，有助于响应式 Web 开发。
  • Zeal ——Windows 版 Dash
  • Figma - 协作式 UI 设计工具
  • draw.io - 流程图制作器和图表软件
  • GitHub Desktop - Git 的 GUI
  • Postman - API 工具
  • Notion - 项目管理和笔记软件
  • Microsoft PowerToys - 一套面向高级用户的实用程序

您可以在管理 shell 中使用 chocolatey 通过以下命令一次性下载所有这些内容：



choco install wox runjs responsively zeal figma drawio github-desktop postman notion powertoys -y
Enter fullscreen mode Exit fullscreen mode

🪜 Chrome 扩展程序

这些也都可以作为Firefox 扩展使用。

  • React Dev 工具- 将 React 调试工具添加到 Chrome 开发者工具。
  • ColorZilla - 高级吸管、颜色选择器、渐变生成器和其他丰富多彩的工具
  • Axe Accessibility - Chrome 中面向开发人员、测试人员和设计师的可访问性检查器
  • daily.dev - 获取个性化的最热门开发者新闻。
  • Nimbus Capture - 屏幕捕获整个网页或任何部分。
  • WhatFont - 使用此扩展程序，您只需将鼠标悬停在 Web 字体上即可检查它们。
  • JSON 格式化程序- 使 JSON 易于阅读。

📚 参考文献

文章来源：https://dev.to/stephanlamourureux/the-complete-windows-developer-setup-guide-fie
Devto 翻译
PREV
JavaScript 中的线性搜索和二进制搜索
NEXT
我如何学会喜欢单元测试