摘要
无论是否是前端,作为一个程序员,我们在拿到新电脑的时候,首先需要完善我们的开发环境
一些特殊配置
有些网站的访问(如 Github)是存在不稳定的或者是被拦截的状态,对于这种网站,我们又是需要访问的情况,那么就需要一些特殊手段来访问。
Watt toolkit


这个工具箱提供一些网站的访问,如 Github,原理是通过修改 Hosts 文件的域名映射指向具体的 IP 地址,从而无需通过 DNS 解析服务获取域名对应的 IP 地址(网站拦截的一个原理)。
这种方式访问依旧不太稳定,速度也不快,但相对的,不会出现类似下图这种页面。

开发环境配置
Git 配置
安装
公司有自建 GitLab 仓库,但使用的依旧是 Git 工具,所以需要下载 windows 对应的 Git 工具包。Git – Downloading Package 访问该页面,下载 x64 版本。
这里需要使用上面的 Watt toolkit 保证你可以访问 Github,从而安装 Git 命令行工具。
当然,如果你的网络环境是可以正常访问的,那就不需要通过第三方工具去访问git了。
基本配置
打开 gitconfig,windows 建议通过 gitbash 打开对应的配置内容。
cd ~
# 编辑 gitconfig 文件,code 命令通过 VSCode 打开文件
code .gitconfig
.gitconfig 的内容如下
[core]
editor = \"D:\\Microsoft VS Code\\bin\\code\" --wait
autocrlf = true
[safe]
directory = 信任的文件夹
[user]
email = 自己的邮箱
name = 自己的名称
[alias]
lg = log --graph --abbrev-commit --pretty=format:'%C(red)%h%Creset -%C(yellow)%d%Creset %s %C(green)(%cr) %C(bold blue)<%an>%Creset' --all
co = checkout
br = branch
ci = commit
st = status
pl = pull --rebase
pr = pull --rebase
ps = push
dt = difftool
l = log --stat
cp = cherry-pick
ca = commit -a
[core]
editor = code -w
ignorecase = false
配置中有一个 autocrlf 的内容,这个配置是 Git 中用于处理 换行符转换 的重要配置,主要解决不同操作系统(如 Windows、macOS、Linux)对换行符处理方式不一致的问题。
建议在 windows 环境下建议设置为 true:提交时将 CRLF 转换成 LF,本地检查到的时候转换成 CRLF,从而使得远端仓库中的在其他环境下可用。
在 Linux/MacOS 环境下设置为 input:提交时将 CRLF 转换成 LF(避免不一致),本地检出时,不转换。
SSH 配置
工具套件
nvm 套件
nvm 套件是前端必备的 Node 包管理器,我们经常会存在不同项目使用不同的 node 版本的情况,这种情况下,有 NVM 就可以快速的帮助我们进行 Node 版本的切换。
套件有两种版本:nvm
和 nvm-for-windows
。
nvm
是提供给 Linux/MacOS 的,我们可以通过系统的包管理器 brew
或 apt-get
安装。
nvm-for-windows
是提供给 windows 用户的,是 nvm 的一个衍生分支,因为操作系统的差异性,所以使得 windows 用户无法像 Linux 用户那样很便捷的使用命令行工具,缺少一些专业性,但是也因此,在软件开发者提供 exe 安装包后,我们可以无脑安装及配置。
在写这篇文章的时候,Node LTS 版本还是 v22,代号为 Jod
。并且还在提供维护的版本是 v20,代号为 Iron
。正常情况下,我们直接使用 LTS 版本就可以了,但如果你是要运行老的项目,可能对 Node 版本有要求,可以按需安装,然后在对应的项目下使用 nvm
命令进行切换。


在项目中,你可以选择使用 .nvmrc
配置使用的 Node 版本,这样,其他人(包括在构建镜像的时候),可以不需要手动指定版本,只需要在目录下执行 nvm
就可以自动进行切换。
NPM 镜像源
如果你有私有化部署的镜像源(公司或个人),就可以考虑使用私有的镜像源地址,否则,可以考虑使用国内其他大厂开放的镜像源,目前可供选择的镜像源主要有:
- taobao 镜像源
- 腾讯镜像源
切换方式主要有:全局、项目
全局切换会对所有项目生效:
npm config set registry https://registry.npmmirror.com
如果想要恢复官方镜像源:
npm config set registry https://registry.npmjs.org
项目维度的配置,就是在对应项目下,新增文件:.npmrc
registry=https://mirrors.cloud.tencent.com/npm/
值得一提的是,yarn 只有 1.x 版本才会识别这个文件,2.x 版本后不再识别。
开发软件
终端工具
Windows Terminal
微软出品,集成在 Windows11 中,但是 Windows10 也能用,要比以前的 CMD、PowerShell默认的面板强很多,但他只是终端工具,不是shell,所以他还是集成的 PowerShell(默认集成)。

Tabby
第三方,个人在 MacOS 中使用,非常好用的一个终端工具

IDE 编辑器
VS Code
【推荐】VS Code 是微软的开源软件,具有较为强大的插件生态。

Trae
【推荐】是字节跳动AI团队基于 VS Code 开源项目集成了DeepSeek、豆包等大模型的定制版 IDE。

IDEA Webstorm
IDEA 公司为前端开发提供的专业软件,但是不提供社区版,功能很强大,但是收费的。

其他提效软件
7z
国内的压缩包大多是基于 7z 套壳,7z 就是 UI 丑了点,但是没有打不开的压缩文件。
Snipaste
截图软件,即使E+已经自带的截图够用,也推荐使用该软件。

豆包 App
替代搜索引擎,可以直接问答案,比较快捷,但是这只是其中一种 AI 工具,你可以根据自身的喜好安装对应的 AI 工具(kimi、Claude、ChatGPT等)

发表回复