2分钟环境搭建

2025年2月14日 · 阅读需 7 分钟

Fall Zhang

Coding For fun

环境配置

使用 Chocolatey 进行快速安装，以及一些 PowerShell、VS code 、npm 的配置

Chocolatey

快速安装软件，同类命令行应用有：Scoop 、winget

当然不是普通的环境搭建方式，而是敲（或者是复制粘贴）三五行代码就可以搞定的那种安装。

社区中有两种快速安装环境的工具 Scoop & Chocolatey，这节课，我们学习使用 Chocolatey。

WinGet 作为微软官方出品还需观望，也不知道微软这次靠不靠谱。

choco 安装

在 powershell（右键开始菜单，选中 Windows PowerShell 管理员）执行下面程序进行安装

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

注：必需要管理员权限才能进行安装。否则报一大堆错

软件使用

例如，安装 node.js、nvm

choco install nodejs 
choco install nvm

一行代码搞定前端全家桶！

# windows 系统
# 不建议直接安装 node，而是通过 nvm 安装 node
choco install -y googlechrome firefox git vscode nvm.portable sourcetree

注：安装的 firefox 是国际版的，不是国内版，两个版本之间无法共享账户数据

不仅仅是前端全家桶

安装 python 全家桶！

choco install -y git tortoisegit vscode python
refreshenv
python -m pip install --upgrade pip
# 中国教育网用户切换镜像
# pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip install pipenv

安装 docker

choco install docker-desktop

搜索软件

choco search nodejs

VS code

快捷键

ctrl + D：阔选光标所在位置的内容，再次按下阔选相同内容
Alt + Shift + F：格式化代码
alt + ↑/↓：移动选中的整行内容
shift + alt +↑/↓：复制当前选中的行
ctrl + enter：创建新的行，并且跳转到下一行
ctrl + ~：呼出 vs code 命令行
ctrl + /：为所选区域添加注释
alt + shift +a：为所选区域添加注释，注意，这个快捷可能微信的截图 alt + a 冲突
选中变量，然后点击 f2，可以重命名所有名称相同的变量，该操作跨文件

插件

Chinese（simplified）功能和名字一样，提供中文的操作界面
Git Graph，提供图表方式来查看 git 版本历史
volar 为 vue 提供代码高亮，代码格式化
Material Icon Theme 提供各式各样的图标，用来美化和区分不同类型的文件
node-snippets 快速生成 node 代码块
ESlint 控制代码规范，对代码进行格式化处理，在配置中可以开启格式化功能

慎用插件

应用名称	插件功能
小霸王	小霸王游戏机
超级鼓励师	加油，你是最棒的，年薪百万就在前方。
韭菜盒子/vscode-stocks	看股票走势
电影集	看电影，刷剧
daily-anime	喜欢二次元，喜欢动漫，番剧的更新。
read-vscode-e/Thief-Book/	网易云阅读，可以一边敲代码一边看小说。
vsc-netease-music	可以听音乐，好像音乐本身感知不强，意义也不大。
vscode-maxPlus	浏览游戏资讯。
vscode-leetcode	刷算法。
Zhihu On VScode	刷知乎。
fakeupdate	模仿各种电脑系统的系统更新。
LeetCode	刷算法
NBA real-time score	看NBA数据。

默认配置

可以同步到 github 上面

// 注意要在设置中开启保存时格式化代码
{
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "editor.linkedEditing":true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  // 滚轮缩放编辑器大小
  "editor.mouseWheelZoom": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.unicodeHighlight.nonBasicASCII": false,
  "diffEditor.renderSideBySide": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  // 可以生成预览窗口，而不是打开一个文件就是一个独立的窗口
  "workbench.editor.enablePreview": true, 
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "search.followSymlinks": false,
  "search.maxResults": 200,
  "files.autoSave": "onFocusChange",
  "emmet.includeLanguages": {
    "editor.formatOnType": "true",
    "editor.formatOnSave": "true"
  },
  "git.confirmSync": false,
  "editor.fontLigatures": false,
  "editor.autoClosingOvertype": "always",
  "editor.stickyScroll.enabled": true,
  "editor.stickyScroll.maxLineCount": 3,
  "css.lint.float": "warning",
  "css.lint.duplicateProperties": "error",
  "css.lint.important": "warning",
  "css.lint.universalSelector": "warning",
  "less.lint.universalSelector": "warning",
  "scss.lint.duplicateProperties": "warning",
  "scss.lint.float": "warning",
  "eslint.format.enable": true,
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "window.commandCenter": false,
  "extensions.autoUpdate": "onlyEnabledExtensions",
  "explorer.compactFolders": false,
}

其它配置

windows 系统

可以在 设置：系统 -> 存储 -> 保存新内容的地方 进行配置

全部切换到需要的磁盘

PowerShell

如果 powershell 不能执行一些命令，需要进行修改执行策略：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

wsl

windows subsystem for linux

linux 的子系统

# 安装 wsl
wsl --install
# 安装 ubuntu
wsl --install -d Ubuntu-22.04
# 安装后，可以通过下面命令查看当前电脑上的 wsl 子系统
wsl -l -v
# 以下命令查看线上拥有的 linux 版本
wsl -l -o

npm

npm -v 用于检测 npm 是否安装成功（安装 node 时会同时安装 npm）

注：因为某些大家知道的原因，可能需要更换为国内的镜像，或者安装 yarn、pnpm，代替 npm。

通过该命令 npm get registry 查看当前使用的镜像。

通过 npm set registry [target-webset] 设置镜像

一些镜像网址

https://registry.npmjs.org/（默认镜像网址）
https://registry.npmmirror.com/（阿里镜像，原地址为 https://registry.npm.taobao.org）

项目创建

初始项目搭建

pnpm create vite my-app-name --template <template-name>

支持的模板：

原生：vanilla、vanilla-ts
Vue：vue、vue-ts
React：react、react-ts、react-swc、react-swc-ts、preact、preact-ts
Lit：lit、lit-ts
Svelte：svelte、svelte-ts

环境配置​

Chocolatey​

choco 安装​

软件使用​

搜索软件​

VS code​

快捷键​

插件​

默认配置​

其它配置​

windows 系统​

PowerShell​

wsl​

npm​

项目创建​