Web前端工程的装机必备软件

前言

最近作者的电脑 C 盘变红了,这让我很难受(有点小强迫症),所以准备重新安装下系统,顺便把 C 盘扩大点。

注意:

操作系统是 windows 11 23H2。

所有的命令行都是使用 Windows Terminal 中进行的。

安装 Windows Terminal

由于我们所有的命令行操作都是在 Windows Terminal 中进行的, 所以第一步先按章配置 Windows Terminal(win11 是自带的,其他系统可以在系统商店搜索 terminal 进行安装);

Windows Terminal 默认支持多种 shell 环境(cmdpowershellAzure Cloud Shell),

另外还支持自定义添加其他的 shell 环境(如:git 自带的 git-bash;wsl 等等)

关于 Windows Terminal 美化可以参考这个

如果执行脚本提示此系统禁止运行脚本可以执行 set-ExecutionPolicy RemoteSigned 解除禁制

安装 nvm - node 版本管理工具

作为 web 前端开发工程师,nodejs 肯定是必不可少的, nvm(Node Version Manager)是一个用于管理 Node.js 版本的工具,它提供了一些常用的命令来操作 Node.js 版本。

所以我们先来安装 nvm, 由于 win11 自带了 winget 包管理工具,所有下面我们使用 winget 来安装 nvm

bash 复制代码
winget install CoreyButler.NVMforWindows
# 安装前需要先使用 winget search 进行搜索,找到对应的 id(如上面的 CoreyButler.NVMforWindows)

具体的安装步骤可以参考作者的这篇博文

以下是一些常用的 nvm 命令:

bash 复制代码
nvm install [version] # 安装指定版本的Node.js。如果未指定版本,则默认安装最新版本。
nvm use [version] # 切换到指定版本的Node.js。如果未指定版本,则默认切换到最新版本。
nvm uninstall [version] # 卸载指定版本的Node.js。
nvm list # 列出已安装的所有 Node.js版本。
nvm current # 显示当前正在使用的Node.js版本。
nvm alias [from] [to] # 创建或修改别名,以方便切换不同版本的Node.js。
nvm default [version] # 设置默认的Node.js版本。
nvm node_mirror [url] # 设置Node.js的镜像源地址。
nvm npm_mirror [url] # 设置npm的镜像源地址。
nvm on # 开启Node.js版本管理。
nvm off # 关闭Node.js版本管理。
nvm proxy [url] # 设置下载代理。

安装 NodeJS

bash 复制代码
nvm install lts # 安装nodeJs 最新的 lts 版本

安装完成后就可以执行 node -v 查看当前的 node 版本了。

node 安装完成后,也可以安装一些常用的工具:

  • nrm / yrm 用来管理包管理器的源地址,nrm-npm;yrm-yarn
  • pnpm / yarn / cnpm 包管理器-喜欢哪个装哪个,也可以全部安装。
  • @vue/cli vue cli 用来创建管理 vue 项目(老项目需要)

源码管理

这里我们使用的 git,git 的安装也是使用 winget, 和安装 nvm 的步骤一致。不习惯的可以去官网下载

bash 复制代码
winget install Git.Git

安装 vscode

vscode 的安装也是使用 winget, 和安装 nvm 的步骤一致。不习惯的可以去官网下载

bash 复制代码
winget install Microsoft.VisualStudioCode

vscode 插件:

  • Better Comments
  • Can I Use
  • Vite
  • JavaScript standardjs styled snippets
  • Path Intellisense
  • markdownlint
  • ESLint
  • Git History
  • EditorConfig for VS Code
  • Prettier - Code formatter
  • Auto Close Tag
  • Auto Rename Tag
  • Code Runner
  • GitHub Codespaces
  • GitHub Copilot
  • GitHub Copilot Chat
  • GitHub Copilot Labs
  • Draw.io Integration
  • SVG
  • CodeMetrics
  • Image preview
  • Noctis
  • DotENV
  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • Dev Containers
  • Remote - SSH
  • Remote - SSH: Editing Configuration Files
  • WSL
  • Remote Development
  • Live Preview
  • Remote Explorer
  • Remote Repositories
  • Remote - Tunnels
  • Nx Console
  • indent-rainbow
  • CSS Peek
  • git-commit-plugin
  • JavaScript Booster
  • Auto Import
  • Code Spell Checker
  • Formatting Toggle
  • IntelliCode
  • vscode-icons
  • Vue Language Features (Volar)
  • TypeScript Vue Plugin (Volar)
  • Quokka.js
  • Import Cost
  • IntelliSense for CSS class names in HTML

内网穿透

免费的, cpolarnetapp 一共两个

Github 加速

Watt Toolkit-瓦特工具箱 (原 Steam++)现可在 windows store 中下载。

当然也可以使用使用 v2rayN (可在 just my sockets 购买)。

浏览器

win11 自带的 Edge 浏览器很不错,支持账号同步,功能非常全面(喜欢 Chrome、Firefox 可以自行安装),不管使用哪种浏览器一些必要的插件还是需要安装的。

下面是我常用的一些插件:

  • FeHelper 前端助手:提供一些常用的工具
  • Wappalyzer:查看当前访问网站使用的框架/库
  • AdBlock: 拦截广告
  • vue.js devtools:vue 开发者工具
  • Window Resizer:调整浏览器的大小
  • 移动模拟器:模拟移动端,方便调试移动端网页
  • 沉浸式翻译:一款翻译插件,可以提供双语对照,可以设置翻译源,功能挺不错

其他

除了开发之外还有其他的一些软件:

  • Github Desktop
  • Foxmail:邮箱
  • snipaste:截图
  • 网易云音乐:听歌
  • 有道翻译:翻译软件,ctrl+shift+d 截图翻译非常方便
  • WPS:办公软件
  • nginx:反向代理工具
  • toDesk:远程访问工具
  • LICEcap:Gif 录制工具-简单好用
  • 阿里云:可以同步一些文件
  • powerToys:增强 windows,功能很全面,微软开发
  • 360 极速版:清理垃圾、下载软件的不二选择
  • Doctor Desktop:doctor 客户端
  • HBuilderX:跨端开发很方便,特别是有多个平台的小程序开发时,使用的是 vue 语法
  • Motrix: 下载功能
  • 微信/QQ:聊天工具
  • 企业微信/钉钉:办公软件
相关推荐
秋去冬10 天前
linux web终端wetty食用方法
linux·vim·terminal·wetty
izwmain22 天前
终端环境下关闭显示器
linux·debian·terminal·vbetool
XueminXu3 个月前
Win11禁止搜索栏查找互联网内容
win11·windows 11·搜索栏·搜索框·查找互联网内容·搜索互联网内容
DoubleCui3 个月前
记一次Mac 匪夷所思终端常用网络命令恢复记录
网络·macos·shell·terminal
stubborn vegeta4 个月前
一款人性化的终端用户界面工具
linux·ui·shell·terminal
KevinRay_4 个月前
【Linux入门】Linux常见指令
linux·运维·服务器·指令·命令行·terminal
DogDaoDao5 个月前
Windows 11 系统对磁盘进行分区保姆级教程
windows·windows 11·磁盘分区
__Witheart__5 个月前
【教程】在 VS Code 集成终端中解决 Node.js 环境变量识别问题
ide·vscode·node.js·powershell·terminal
思想在拧紧8 个月前
win11 Terminal 部分窗口美化
terminal·oh my posh·clink
程序设计实验室10 个月前
2024年,提升Windows开发和使用体验实践 - 终端&命令行篇
windows·terminal