Window WSL 开发环境搭建

开启必须的Windows系统服务

依次打开控制面板 => 程序 => 程序和功能 => 启用或关闭 Windows 功能

使用 Winget 安装常用软件（按需）

注意这是在Windows环境中安装一些常用软件，如果不需要可跳过。

如果 “联想电脑管家” 已启动，则会拦截安装操作，推荐提前关闭该软件

补充：如需要通过 winget 安装其他软件，可通过 https://winstall.app/apps 快速查找、生成安装指令

# Win + Q 搜索 “命令提示符”，以管理员身份打开，执行以下命令
# 更新 winget 国内源
winget source remove winget
winget source add winget https://mirrors.ustc.edu.cn/winget-source
# 安装 7zip、chrome、firefox、微信、飞书、VScode、openVPN、ToDesk、Teams、Outlook
winget install --id=7zip.7zip -e --accept-package-agreements --accept-source-agreements && winget install --id=Google.Chrome -e --accept-package-agreements --accept-source-agreements && winget install --id=Mozilla.Firefox -e --accept-package-agreements --accept-source-agreements && winget install --id=Tencent.WeChat -e --accept-package-agreements --accept-source-agreements && winget install --id=ByteDance.Feishu -e --accept-package-agreements --accept-source-agreements && winget install --id=Microsoft.VisualStudioCode -e --accept-package-agreements --accept-source-agreements && winget install --id=OpenVPNTechnologies.OpenVPN -e --accept-package-agreements --accept-source-agreements && winget install --id=Youqu.ToDesk -e --accept-package-agreements --accept-source-agreements && winget install --id=Microsoft.Teams -e --accept-package-agreements --accept-source-agreements  && winget install --id=tomlm.electron-outlook-365 -e --accept-package-agreements --accept-source-agreements

安装 Ubuntu

参考：https://learn.microsoft.com/zh-cn/windows/wsl/setup/environment

# 安装最新 ubuntu
wsl --install
wsl --update
# 重启电脑后,启动并进入 ubuntu
wsl
# 第一次进入将指引设置 Linux 用户名和密码（很重要，务必记住）

更换清华镜像源

按 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 操作，之后执行：

sudo apt update && sudo apt upgrade

终端启用代理(按需)

原理是开启 镜像模式网络，具体配置步骤请按下方链接操作:

https://eastmonster.github.io/2022/10/05/clash-config-in-wsl/

大致步骤是在启动WSL后的默认路径(e.g.C:\Users\Administrator)下新建一个.wslconfig文件，在里面写入以下内容:

[experimental]
networkingMode=mirrored

然后重启WSL即可应用配置。

# 在 window 宿主机上执行
wsl --shutdown
wsl

这样一来就可以在WSL中直接使用Windows当前的系统代理。

安装 Git

# 请更换为自己的信息
sudo apt-get install git
git config --global user.name "QiuYeDx"
git config --global user.email "qiuyedx@foxmail.com"

安装 nvm、node.js 、nrm

注意：应在 ubuntu 环境下执行下方命令

# 安装 curl
sudo apt-get install curl
# 安装 nvm （如无梯子，请替换国内地址 https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
# 推出 ubuntu
exit
# 进入 ubuntu
wsl
# 检查 nvm, 此命令应返回“nvm”，如果你收到“找不到命令”或根本没有响应，请关闭当前终端，将其重新打开，然后重试
command -v nvm
# 列出网络可用 NodeJS 生产版本
nvm ls-remote --lts
# (版本号请按需替换)安装 NodeJS 生产版本
nvm install v16.20.2
# 检查安装
nvm ls
node --version
npm --version
# 安装 nrm (按需)
npm install -g nrm
nrm ls
# 添加公司私有仓库 并 应用
nrm add [自定义名称] [私有仓库URL] && nrm use [自定义名称]

安装 Yarn (按需)

方式1 - 独立安装

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install --no-install-recommends yarn
yarn --version

方式2 - npm 安装

npm install -g yarn

安装 Pnpm (按需)

方式1 - 独立安装

curl -fsSL https://get.pnpm.io/install.sh | sh -

方式2 - npm 安装

npm install -g pnpm@8

SSH 密钥

生成密钥

# 安装剪切板工具
sudo apt install xclip
# 切换到.ssh目录
mkdir ~/.ssh
cd ~/.ssh
# 生成密钥, 一路回车
ssh-keygen -t rsa -b 2048 -C "window-ubuntu"
# 复制到剪切板
xclip -sel clip < ~/.ssh/id_rsa.pub

添加至 Github SSH Keys

按需添加至GitHub或公司所用的Gitlab

初始化工作区

# 创建工作目录
cd ~ && mkdir workspace && cd workspace
# clone git 仓库
git clone [仓库URL]
# 打开项目
code [项目文件夹名称]

VS Code 配置 (按需)

项目根目录新建 .vscode 文件夹，将下方文件放入该文件夹，并推送到 Git 仓库

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "editor.stickyScroll.enabled": true,
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "files.autoSaveDelay": 2000,
  "files.autoSave": "onFocusChange",
  "tslint.enable": false,
  "eslint.codeActionsOnSave.mode": "problems",
  "editor.inlineSuggest.enabled": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "gitlens.views.tags.branches.layout": "list"
}

extensions.json
{
  "recommendations": [
    "alibaba-cloud.tongyi-lingma",
    "amodio.tsl-problem-matcher",
    "chunsen.bracket-select",
    "codeium.codeium",
    "cweijan.vscode-office",
    "dbaeumer.vscode-eslint",
    "dsznajder.es7-react-js-snippets",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "formulahendry.auto-close-tag",
    "formulahendry.code-runner",
    "gruntfuggly.todo-tree",
    "ms-ceintl.vscode-language-pack-zh-hans",
    "ms-vscode-remote.remote-wsl",
    "naumovs.color-highlight",
    "oouo-diogo-perdigao.docthis",
    "sdras.vue-vscode-snippets",
    "streetsidesoftware.code-spell-checker",
    "tomoki1207.pdf",
    "visualstudioexptteam.intellicode-api-usage-examples",
    "visualstudioexptteam.vscodeintellicode",
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    "wix.vscode-import-cost",
    "xabikos.javascriptsnippets",
    "zhuangtongfa.material-theme",
    "alibaba-cloud.tongyi-lingma",
    "amodio.tsl-problem-matcher",
    "chunsen.bracket-select",
    "codeium.codeium",
    "cweijan.vscode-office",
    "dbaeumer.vscode-eslint",
    "dsznajder.es7-react-js-snippets",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "formulahendry.auto-close-tag",
    "formulahendry.code-runner",
    "gruntfuggly.todo-tree",
    "ms-ceintl.vscode-language-pack-zh-hans",
    "naumovs.color-highlight",
    "oouo-diogo-perdigao.docthis",
    "sdras.vue-vscode-snippets",
    "streetsidesoftware.code-spell-checker",
    "visualstudioexptteam.intellicode-api-usage-examples",
    "visualstudioexptteam.vscodeintellicode",
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    "wix.vscode-import-cost",
    "xabikos.javascriptsnippets",
    "zhuangtongfa.material-theme"
  ]
}