打造舒适高效的前端开发环境 #

各种原因，常年使用 windows 电脑进行开发工作，这里也罗列一下个人推荐的一些工具组合以供参考。

如果运行命令失败，请尝试使用管理员身份运行命令。 Mac 相关的配置请参考这里

科学上网 #

• lantern
  • Windows7 及以上 Windows 7+
    • 备用地址 1
    • 备用地址 2
• iGG 谷歌学术助手 免费为广大科研及医务工作者、高校学生提供谷歌学术文献、期刊等资料产品的查询与加速访问.不包含 Youtube,谷歌网盘

Step1: chocolatey #

THE PACKAGE MANAGER FOR WINDOWS。windows 系统下推荐的包管理工具，方便安装 node、python2(3) 等等工具。

安装 #

见 CLI#choco/setup。

Install with cmd.exe #

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Install with PowerShell.exe #

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'))

常用命令 #

见 CLI#commands。

• search - searches remote or local packages (alias for list)
• list - lists remote or local packages
• find - searches remote or local packages (alias for search)
• info - retrieves package information. Shorthand for choco search pkgname --exact --verbose
• install - installs packages from various sources
• pin - suppress upgrades for a package
• outdated - retrieves packages that are outdated. Similar to upgrade all --noop
• upgrade - upgrades packages from various sources
• uninstall - uninstalls a package
• pack - packages nuspec, scripts, and other Chocolatey package resources into a nupkg file
• push - pushes a compiled nupkg to a source
• new - generates files necessary for a chocolatey package from a template
• source - view and configure default sources
• sources - view and configure default sources (alias for source)
• config - Retrieve and configure config file settings
• feature - view and configure choco features
• features - view and configure choco features (alias for feature)
• setapikey - retrieves, saves or deletes an apikey for a particular source (alias for apikey)
• apikey - retrieves, saves or deletes an apikey for a particular source
• unpackself - re-installs Chocolatey base files
• support - provides support information
• help - displays top level help information for choco
• export - exports list of currently installed packages
• template - get information about installed templates
• templates - get information about installed templates (alias for template)
• download - downloads packages - optionally internalizing all remote resources
• synchronize - synchronizes against system installed software - generates missing packages
• sync - synchronizes against system installed software - generates missing packages
• optimize - optimizes installation, reducing space usage
• convert - converts packages from one type to another type

升级 chocolatey #

choco upgrade chocolatey

Step2: git #

部分工具需要使用 bash 安装，因此优先安装 git。

choco install git

深入了解 git 请阅读：《Pro Git》

初次运行 Git 前的配置 #

查看所有的配置以及它们所在的文件

git config --list --show-origin

用户信息

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

配置 alias

# 配置非常多，请查看下面的 github 仓库

参考 gitalias

检查配置信息

git config --list

参考 初次运行 Git 前的配置

autocrlf：格式化与多余的空白字符 #

Windows 使用回车（CR）和换行（LF）两个字符来结束一行，而 macOS 和 Linux 只使用换行（LF）一个字符。 虽然这是小问题，但它会极大地扰乱跨平台协作。许多 Windows 上的编辑器会悄悄把行尾的换行字符转换成回车和换行， 或在用户按下 Enter 键时，插入回车和换行两个字符。

如果你是 Windows 程序员，且正在开发仅运行在 Windows 上的项目，可以设置 false 取消此功能，把回车保留在版本库中：

git config --global core.autocrlf false

参考 autocrlf：格式化与多余的空白字符

生成 SSH 公钥 #

同时配置 GitLab 和 GitHub 的 SSH #

# 进入 ssh 根目录
cd ~/.ssh

# 使用 github 邮箱创建 github 的秘钥（一路回车即可）
ssh-keygen -t rsa -C "jogiter.g@gmail.com" -f github_id-rsa

# 使用 gitlab 邮箱创建 gitlab 的秘钥（一路回车即可）
ssh-keygen -t rsa -C "ding.zy@company.cn" -f gitlab_id-rsa

# 创建配置文件
touch config

更新 ~/.ssh/config 文件：

# GitLab.com
Host github.com
  Preferredauthentications publickey
  IdentityFile ~/.ssh/github_id-rsa

# Private GitLab instance
Host gitlab.company.cn
  Preferredauthentications publickey
  IdentityFile ~/.ssh/gitlab_id-rsa

测试 ssh 连通性：

# 测试 github
ssh -T git@github.com

# 测试 gitlab
ssh -T git@gitlab.company.cn

参考 生成 SSH 公钥

文本编辑器 #

git config --global core.editor "code --wait"

参考 git config core.editor

Step3: Node.js #

安装 nodejs #

这里推荐两种安装方式：

• 使用 volta
• 使用 chocolatey

使用 volta 安装 #

# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node

# start using Node
node

如果 volta 不支持当前操作系统，则使用 chocolatey 进行安装。

使用 chocolatey 安装 #

• 查询 nodejs 版本: choco search nodejs

• 安装制定版本: choco install nodejs-lts

Step4: VSCode #

choco install vscode

vscode#Installation

推荐插件 #

首（先且重）要安装的插件：Settings Sync。用于将个人喜好的插件同步到 github-gist，方便跨电脑一键安装插件。推荐指数满星。

我的插件 gist

Step5: node-pacakge-manager and nrm #

install nrm #

npm install -g nrm

nrm ls

# * npm ---------- https://registry.npmjs.org/
  # yarn --------- https://registry.yarnpkg.com/
  # tencent ------ https://mirrors.cloud.tencent.com/npm/
  # cnpm --------- https://r.cnpmjs.org/
  # taobao ------- https://registry.npmmirror.com/
  # npmMirror ---- https://skimdb.npmjs.com/registry/

install nvm #

latest installer

Resolving EACCES permissions errors when installing packages globally

npm7 vs Yarn2 vs pnpm #

总结：pnpm 是非常优秀的包管理工具，速度快且节省磁盘空间。（个人觉得非常适合 serverless）

• 关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
• 为什么 vue 源码以及生态仓库要迁移 pnpm?
• benchmarks-of-javascript-package-managers
• pnpm
• yarn-berry
  • yarn set version
  • Plug'n'Play#features
  • migration to yarn2

1. 切换 yarn 版本

# yarn v1
yarn set version 1.22.1
yarn init


# yarn v2
yarn set version berry
yarn init -2

更多内容阅读yarn set version

总结：yarn2 与 yarn1 有较多的改动，旧项目升级建议保持当前版本，不建议升级。