- 🔭概述
- ☑先决条件
- 🐧 WSL
- 👨💻 Windows 终端
- 📝 Git 配置
- 😺 GitHub 凭据
- 💤 Zsh
- 📦 Node.js
- 💻 Visual Studio 代码
- 🍫Chocolatey
- 🪜 Chrome 扩展
- 🇺🇸 VetsWhoCode Web App
经过大量的试验和错误,我已经能够拼凑出一个相当不错的 Windows 开发环境。已经有很多指南,但似乎没有一个涵盖整个范围。我试图在这里这样做,而不是深入任何单个主题。我相信这将为大多数用户留下流畅的 Windows 开发人员体验。
设置 Windows 开发环境的第一个也是最重要的部分是安装 WindowsLinux 子系统(WSL)。我建议坚持使用 Ubuntu,但可以随意尝试尽可能多的发行版。一次安装多个发行版没有问题。
WSL 2 是 WSL 的最新版本,增加了新功能,如全 Linux 内核和全系统调用兼容性。过去安装它需要几个步骤,但我们现在只需要在 PowerShell 或命令提示符中输入以下命令:
wsl --install
此命令执行以下操作:
- 启用可选的 WSL 和虚拟机平台组件
- 下载并安装最新的 Linux 内核
- 将 WSL 2 设置为默认值
- 下载并安装 UbuntuLinux 发行版(可能需要重新启动)
使用 --install
命令默认为 Ubuntu,仅在尚未安装 WSL 时有效。如果你想更改默认 Linux 发行版,关注这些文档。
使用 WSL 安装 Linux 发行版的过程完成后,使用开始菜单打开发行版(默认为 Ubuntu)。系统将要求你为 Linux 发行版创建用户名和密码。当你输入新密码时,终端中不会显示任何内容。你的键盘仍在工作!这只是一个安全功能。
-
此用户名和密码特定于你安装的每个单独的 Linux 发行版,与你的 Windows 用户名无关。
-
创建用户名和密码后,该帐户将成为分发的默认用户,并在启动时自动登录。
-
此帐户将被视为 Linux 管理员,能够运行 sudo(Super User Do)管理命令。
-
WSL 上运行的每个 Linux 发行版都有自己的 Linux 用户帐户和密码。每次添加发行版、重新安装或重置时,都必须配置 Linux 用户帐户。
建议你定期更新和升级软件包。在 Ubuntu 或 Debian 中,我们使用 apt
包管理器:
sudo apt update && sudo apt upgrade
Windows 不会自动更新或升级你的 Linux 发行版。这是大多数 Linux 用户喜欢自己控制的任务。
当你打开 Windows 文件资源管理器时,它会显示你的设备和驱动器。我们将添加我们的 Ubuntu 虚拟驱动器作为网络位置以便于访问。
- 从文件资源管理器打开
\\wsl$\
位置:
- 右键单击 Ubuntu 文件夹,然后选择
Map network drive
:
- 选择你要使用的驱动器号,保留
Reconnect at sign-in
选中和Connect using different credentials
未选中,然后单击完成(我的看起来会略有不同,因为它已经完成):
- 最终结果应该如下所示:
如果你想从 Linux 终端访问 Windows 文件,它们可以在 /mnt/
目录中找到,因此你的 Windows 用户目录将位于 /mnt/c/Users/username
。
映射 Ubuntu 驱动器后,你可以使用文件资源管理器轻松地将 Windows 文件拖放或复制/粘贴到 Linux 文件系统。
但是,建议将你的项目文件存储在 Linux 文件系统上。这将比从 Windows 访问文件快得多,而且也可能有点错误。
我的另一个快速提示是在 Ubuntu 中创建一个代码目录,然后将其固定到文件资源管理器左侧的快速访问菜单上。在 Windows 和 Linux 之间快速传输文件时,这会派上用场。
- 打开文件资源管理器并单击我们创建的 Ubuntu 网络驱动器
- 选择主目录,然后选择你的用户目录
- 右键单击并创建一个新文件夹,将其命名为代码或你想要的任何其他内容
- 将新文件夹拖到左侧,在显示
Quick access
的星形图标下方
如果由于某种原因 WSL 停止工作,你可以使用 PowerShell/命令提示符中的以下两个命令重新启动它:
wsl.exe --shutdown
wsl.exe
如果你回到你的 Linux 壳,一切都应该恢复正常。
要启动 Linux 终端,我们目前需要使用开始菜单中的 Ubuntu 图标,或者在 PowerShell/命令提示符中输入 wsl
或 bash
命令。另一个为我们提供更多功能(如选项卡、拆分视图、主题、透明度和键绑定)的选项是使用 Windows 终端。还有一些其他终端,如Cmder、ConEmu或Hyper,但根据我的经验,Windows 终端运行得非常好。
Windows 11 默认带有 Windows 终端,但如果你使用的是 Windows 10,请通过微软商店下载并安装 Windows 终端。
我建议快速设置的几件事是默认配置文件和你的起始主目录。这些设置使启动 Windows 终端将直接打开到我们用户主目录中的 WSL。
Windows 终端默认启动时会打开 PowerShell 或命令提示符 shell,以下是如何将其切换到 WSL:
- 从 Windows 终端中选择
˅
图标并转到设置菜单:
- 在启动部分,你将找到默认配置文件下拉列表,选择 Ubuntu。在它下面,选择 Windows 终端作为默认终端应用程序:
默认的 Ubuntu 终端将打开到根目录。为了更快地找到你的文件,我们可以将其打开到你的主目录中。
- 在设置菜单的配置文件部分下,单击 Ubuntu
- 在常规选项卡上,你将找到一个起始目录输入
- 输入以下将“用户名”替换为你的 Ubuntu 用户名:
- 你可以不选中
Use parent process directory
框 - 如果它仍在打开你的
/
目录,请将位于Starting directory
输入框正上方的Command line
设置更改为以下内容:wsl.exe-d Ubuntu
还有更多设置需要探索,还有一个 JSON 文件可以编辑以进行更高级的自定义。
查看this guide了解一些流行的 Windows 终端主题以及如何安装它们。
Git 应该预装在大多数(如果不是所有的话)WSLLinux 发行版上。为确保你拥有最新版本,请在基于 Ubuntu 或 Debian 的发行版中使用以下命令:
sudo apt install git
要设置你的 Git 配置文件,请打开 WSL 命令行并使用此命令设置你的姓名(将“你的姓名”替换为你的首选用户名):
git config --global user.name "Your Name"
使用此命令设置你的电子邮件(将“[email protected]”替换为你喜欢的电子邮件):
git config --global user.email "[email protected]"
最后,添加你的 GitHub 用户名以将其链接到 git(区分大小写!):
git config --global user.username "GitHub username"
确保你输入的是 user.username
而不是 user.name
,否则你将覆盖你的姓名并且你将无法正确同步到你的 GitHub 帐户。
你可以通过键入 git config--global user.name
等来仔细检查你的任何设置。要进行任何更改,只需再次键入必要的命令,如上例所示。
GitHub 已删除在远程存储库中工作时使用传统密码的功能。你现在需要创建个人访问令牌。
当使用GitHub API或命令行时,个人访问令牌(PAT)是使用密码对 GitHub 进行身份验证的替代方案。
按照these docs获取有关创建个人令牌的分步说明。
一旦你第一次输入令牌,它就可以通过Git 凭据管理器(GCM)存储,因此你不必每次都对自己进行身份验证。
你可以同时在 WSL 和 Windows 中安装 Git。适用于 Windows 的 Git包括 GCM,是安装它的首选方式。
你还可以下载Windows 的最新安装程序来安装 GCM 独立版。
安装 Git Credential Manager 后,你可以将其设置为与 WSL 一起使用。打开你的 WSL 终端并输入以下命令:
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe"
Z shell 的工作原理几乎与默认 Linux 安装中的标准 BASH shell 相同。它的不同之处在于它对插件和主题的支持,以及一些额外的功能,如拼写更正和递归路径扩展。是时候把 BASH 扔进垃圾桶了!
sudo apt install zsh
安装后,键入 zsh
命令。Zsh 会要求你选择一些配置。我们稍后将在安装 oh-my-zsh 时执行此操作,因此选择选项 0 以创建配置文件并防止再次显示此消息。
到目前为止,最流行的插件框架是OhMyZsh。它预装了大量插件、主题、助手等。它肯定有助于提高生产力,但更重要的是,它看起来😎很酷。
首先,我们需要确保安装了cURL。“客户端 URL”的缩写,它是一种从命令行传输数据的方法,这就是我们下载 OhMyZsh 的方式。
sudo apt install curl
在你的终端中输入以下命令以安装 OhMyZsh:
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
就这样!你现在应该在主目录中看到一个 .oh-my-zsh
目录。要更改插件和主题,你需要编辑你的 .zshrc
文件,也可以在你的主目录中找到。这是与 OhMyZsh 捆绑在一起的所有themes和plugins的列表。
zsh 的自动建议,它根据历史记录和完成情况在你键入时建议命令。
- 将此存储库克隆到
$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
- 将插件添加到要加载的 Oh My Zsh 的插件列表中(在
~/.zshrc
中):
plugins=(git zsh-autosuggestions)
- 开始新的终端会话。
此包为 shell zsh 提供语法高亮显示。当命令在 zsh 提示符下输入到交互式终端时,它可以高亮显示命令。这有助于在运行命令之前查看命令,特别是在捕获语法错误方面。
- 在 oh-my-zsh 的 plugins 目录中克隆此存储库:
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
- 激活
~/.zshrc
中的插件:
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
- 开始新的终端会话。
Node.js 是一个 JavaScript 运行时环境,它在 Web 浏览器之外执行 JavaScript 代码。
你可能需要根据你正在处理的不同项目的需求在 Node.js 的多个版本之间切换。Node Version Manager 允许你通过命令行快速安装和使用不同版本的节点。
- 打开你的 Ubuntu 命令行并使用以下命令安装 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
要验证安装,请输入: command-v nvm
。这应该返回“nvm”,如果你收到“未找到命令”或根本没有响应,请关闭当前终端,重新打开它,然后重试。
- 列出当前安装了哪些版本的 Node(此时应该没有):
nvm ls
- 安装当前和稳定的 LTS 版本的 Node.js.
安装 Node.js 的当前稳定 LTS 版本(推荐用于生产应用):
nvm install --lts
安装当前版本的 Node.js(用于测试最新的 Node.js 功能和改进,但更有可能出现问题):
nvm install node
- 列出安装了哪些版本的 Node:
nvm ls
现在你应该看到列出了你刚刚安装的两个版本。
- 验证是否安装了 Node.js 和当前版本:
node --version
然后验证你是否也安装了 npm:
npm --version
使用以下命令更改要用于任何给定项目的 Node 版本:
要切换到当前版本:
nvm use node
要切换到 LTS 版本:
nvm use --lts
你还可以将特定编号用于你安装的任何其他版本:
nvm use v8.2.1.
要列出所有可用的 Node.js 版本,请使用命令: nvm ls-remote
。
有许多令人惊叹的代码编辑器可免费使用,但 Visual Studio Code 已成为事实上的标准和我个人的最爱。
VS Code 在 Windows、macOS 和 Linux 上可用。你可以下载最新的 Windows 安装程序here。我建议使用稳定版本。
WSL2 shell 可以通过按下 Ctrl
+ Shift
+ P
并键入/选择终端:选择默认配置文件,然后选择 zsh:
在 VS Code 上安装远程-WSL扩展。
这允许你使用 WSL 作为集成开发环境,并为你处理兼容性和路径。Learn more。
此扩展还允许你使用 code
命令直接从你的 WSL 终端启动 VS Code。
如果我在我的存储库的根目录中,我会使用 code.
在 VS Code 中启动整个目录。
cd my-project
code .
VS Code 可用的扩展数量可能是压倒性的,这里有一些我使用最多的扩展。
- 实时服务器-启动具有静态和动态页面实时重新加载功能的本地开发服务器。
- Live Share-包括开始实时协作编辑和调试所需的一切。
- GitLens-快速了解谁、为什么以及何时更改了行或代码块。
- Git 历史-查看 git 日志、文件历史记录、比较分支或提交
- Prettier-漂亮是一个固执己见的代码格式化程序。
- ESLint-查找并修复 JavaScript 代码中的问题
- 颜色亮点-此扩展设置文档中的 CSS/Web 颜色。
- 降价所有在一个-Markdown 键盘快捷键、目录、自动预览等
- MarkDownlint-Visual Studio Code 的 Markdown 加注和样式检查
- GitHub Markdown 预览-添加样式、降价复选框、脚注、表情符号和 YAML 序言。
- Wakatime-从你的编程活动自动生成的指标、见解和时间跟踪。
- Dash-Visual Studio Code 中的破折号、热情和速度集成
- Draw.io 整合-这个非官方扩展将 Draw.io(也称为 diagrams.net)集成到 VS Code 中。
- Docker-可以轻松创建、管理和调试容器化应用程序。
- Python-IntelliSense、Lting、调试、Jupyter Notebook、重构、单元测试等。
- VetsWhoCode 扩展包-在 #VetsWhoCode 学习 javascript 的新退伍军人扩展包
注意:>你需要为 Remote-WSL 安装任何 VS Code 扩展。已在 VS Code 上本地安装的扩展将不会自动可用。Learn more。
Chocolatey 是一个类似于homebrew的包管理器,但适用于 Windows。
在我们开始安装过程之前,我想介绍一下从 windows 启动管理 shell。有几种方法可以做到这一点:
右键单击 Windows 开始菜单并选择 Windows 终端(管理):
终端加载后,单击 ˅
图标并打开一个新的 PowerShell 选项卡。它应该在新选项卡中显示 Administrator: Windows PowerShell
:
如果任务栏上有 Windows 终端,图标上的 Shift
+ Right-Click
并选择以管理员身份运行,然后打开一个新的 PowerShell 选项卡:
使用开始菜单中的搜索栏并输入 powershell
。以管理员身份运行的链接将显示:
-
打开管理 PowerShell 终端
-
运行
Get-ExecutionPolicy
。 -
如果返回
Restricted
,则运行Set-ExecutionPolicy AllSigned
或Set-ExecutionPolicy Bypass-Scope Process
。
使用 PowerShell,你必须确保 Get-ExecutionPolicy 不受限制。我们建议使用 Bypass 绕过策略以安装或 AllSigned 以提高安全性。
- 现在运行以下命令:
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'))
- 如果你没有看到任何错误,你就可以使用 Chocolatey 了!现在键入
choco
或choco-?
,或参见开始使用了解使用说明。
我们使用 choco
命令来使用 chocolatey。请记住,你必须使用管理 shell 才能使其工作。在社区包存储库上搜索可用的应用程序。
安装一个新包:
choco install filename
删除包:
choco uninstall filename
列出所有已安装的软件包:
choco list
更新:
choco upgrade filename
或一次更新所有内容:
choco upgrade all
以下是一些我最喜欢的(免费)应用程序,用于在 Windows 上提高生产力和开发:
- Wox-功能齐全的启动器
- RunJs-JavaScript 和 TypeScript 游乐场
- 响应地-一个修改后的 Web 浏览器,有助于响应式 Web 开发。
- Zeal-Dash 的 Windows 版本
- Figma-协作 UI 设计工具
- draw.io-流程图制作器和图表软件
- GitHub 桌面-Git 的 GUI
- Postman-API 工具
- Notion-项目管理和笔记软件
- 微软 PowerToys-一组高级用户实用程序
你可以在 admin shell 中使用 chocolatey 使用以下命令一次下载所有这些:
choco install wox runjs responsively zeal figma drawio github-desktop postman notion powertoys -y
这些都以Firefox 扩展的形式提供。
- React Dev tools-将 React 调试工具添加到 ChromeDeveloper Tools。
- ColorZilla-高级吸管、颜色选择器、渐变生成器和其他丰富多彩的好东西
- Axe Accessibility-Chrome 中开发人员、测试人员和设计人员的可访问性检查器
- daily.dev-获取为你个性化的最热门开发者新闻的提要。
- Nimbus Capture-屏幕捕获完整网页或任何部分。
- WhatFont-使用此扩展,你可以通过将鼠标悬停在 Web 字体上来检查它们。
- JSON Formatter-使 JSON 易于阅读。
让我们在本地安装并运行 VWC 应用程序。这将是我们为组织做出开源贡献的第一步!
- 克隆回购
使用 git clone
从 GitHub 下载存储库:
git clone https://github.com/Vets-Who-Code/vets-who-code-app.git
这需要几分钟。
- 更改目录
切换到新克隆的目录:
cd vets-who-code-app
- 安装 Node.js
使用 nvm install
将安装 VWC 应用程序所需的 Node.js 版本:
nvm install
- 安装依赖项
npm install
是我们安装 React、Next、Bootstrap 和应用程序所需的所有其他技术的方式。这也需要几分钟。
npm install
会显示一大堆的警告和其他消息,但这是正常的。
- 环境变量
环境变量保存秘密 API 密钥,并且需要通过连接到 Contentful API 来运行博客。
我们可以创建一个默认的. env 文件,该文件将在本地运行博客时使用模拟数据。从 vets-wh-code-app 目录的根目录使用以下命令:
cp .env.example .env
- 运行应用程序
最后,我们可以在本地服务器上启动应用程序:
npm run dev
你应该能够在本地查看网站,网址为http://localhost:3000/.
CTRL
+ Left-Click
在终端的 localhost 链接上启动浏览器中的应用程序。
CTRL
+ C
完成后关闭开发服务器。
我们可以使用更多的语言和工具。如果你对 JavaScript 和 Web 开发以外的内容感兴趣,请查看以下指南,以将你的开发环境提升到一个新的水平。
🛳 Docker
🐍 Python
以下是分步指南,帮助你开始在 Windows 上使用 Python 进行 Web 开发,使用 Windows 子系统 Linux(WSL)。
- [开始在 Windows 上使用 Python 进行 Web 开发](https://docs.microsoft.com/en-us/windows/python/web-frameworks)
⚙Rust
🦡Go
® R
RStudio Server 使你能够为在远程 Linux 服务器上运行的 R 版本提供基于浏览器的界面,将 RStudio IDE 的强大功能和生产力带到基于服务器的 R 部署中。
- [在 Windows WSL2 中使用 RStudio Server](https://support.rstudio.com/hc/en-us/articles/360049776974-Using-RStudio-Server-in-Windows-WSL2)
🅿 PHP
安装 Apache、MySQL 和 PHP 为了创建 LAMP 堆栈的基本结构(Linux、Apache、MySQL、PHP)。
- [在 WSL 2 上安装和配置功能齐全的 Web 服务器](https://needlify.com/post/install-and-configure-a-fully-functionnal-web-server-on-wsl-2-b1aa0954)
这篇文章是关于 Windows PHP 8 Web 开发的设置。这主要是为了 Laravel 开发。
- [Windows PHP8 开发设置与 WSL2](https://joshpress.net/blog/wsl-debian-php8)
🥅. NET
💾Databases
本分步指南将帮助你开始将 WSL 中的项目连接到数据库。开始使用 MySQL、PostgreSQL、MongoDB、Redis、MicrosoftSQLServer 或 SQLite。
- [开始使用 Windows 子系统上的数据库 Linux](https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-database)
[^1]:设置 WSL 开发环境 [^2]:Microsoft WSL 安装指南 [^3]:WSL2 安装指南 [^4]:安装并开始设置 Windows 终端 [^5]:Git a Grip [^6]:Git 凭据管理器 [^7]:在 WSL 中使用 Zsh [^8]:在 WSL 上安装node [^9]:Chocolatey 安装文档