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

news2024/11/26 17:37:54

前言

最近作者的电脑 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 等等)

window-terminal.png

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

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

安装 nvm - node 版本管理工具

作为 web 前端开发工程师,nodejs 肯定是必不可少的, nvm(Node Version Manager)是一个用于管理 Node.js 版本的工具,它提供了一些常用的命令来操作 Node.js 版本。
所以我们先来安装 nvm, 由于 win11 自带了 winget 包管理工具,所有下面我们使用 winget 来安装 nvm

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

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

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

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

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 的步骤一致。不习惯的可以去官网下载

winget install Git.Git

安装 vscode

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

winget install Microsoft.VisualStudioCode

image.png

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

内网穿透

免费的, cpolar 和 netapp 一共两个

Github 加速

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

watt-toolkit.png

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

浏览器

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

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

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

browser.png

其他

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

  • Github Desktop
  • Foxmail:邮箱
  • snipaste:截图
  • 网易云音乐:听歌
  • 有道翻译:翻译软件,ctrl+shift+d 截图翻译非常方便
  • WPS:办公软件
  • nginx:反向代理工具
  • toDesk:远程访问工具
  • LICEcap:Gif 录制工具-简单好用
  • 阿里云:可以同步一些文件
  • powerToys:增强 windows,功能很全面,微软开发
  • 360 极速版:清理垃圾、下载软件的不二选择
  • Doctor Desktop:doctor 客户端
  • HBuilderX:跨端开发很方便,特别是有多个平台的小程序开发时,使用的是 vue 语法
  • Motrix: 下载功能
  • 微信/QQ:聊天工具
  • 企业微信/钉钉:办公软件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1291922.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

L1-026:I Love GPLT

题目描述 这道超级简单的题目没有任何输入。 你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了。 所谓“竖着输出”,是指每个字符占一行(包括空格),即每行只能有1个字符和回车。 输入样例: 无输出样…

arm 交叉编译器版本下载

网址:https://releases.linaro.org/components/toolchain/binaries/ 根据板子架构选择正确的编译器 根据你主机架构选择对应的版本(就是你的开发电脑架构)

ROS小练习——服务调用

目录 一、服务名称与消息的获取 二、代码案例 1、C 2、python 三、编译运行 1、配置cmakelist 2、运行 一、服务名称与消息的获取 rosservice list rosservice type /spawn rossrv info turtlesim/Spawn 二、代码案例 1、C //包含头文件 #include "ros/ros.h&qu…

Linux AMH服务器管理面板本地安装与远程访问

最近,我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念,而且内容风趣幽默。我觉得它对大家可能会有所帮助,所以我在此分享。点击这里跳转到网站。 文章目录 1. Linux 安装AMH 面板2. 本地访问AMH 面板3. Linux安装…

MySQL和MongoDB简介以及它们之间的区别

本文主要介绍MySQL和MongoDB的简介以及它们之间的区别。 目录 MySQL简介MySQL的优缺点MySQL的应用场景MongoDB简介MongoDB的优缺点MongoDB的应用场景MySQL和MongoDB的区别 MySQL简介 MySQL是一种开源的关系型数据库管理系统,是世界上最流行的数据库之一。它支持多用…

UVM:UVM的树形结构

UVM采用树形的组织结构来管理验证平台的各个部分。sequencer、driver、monitor、agent、model、 scoreboard、env等都是树的一个结点。为什么要用树的形式来组织呢?因为作为一个验证平台,它必须能够掌握自己治下的所 有“人口”,只有这样做了…

温度而知新,一文读懂Java知识文集精华版。

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

SL1581降压恒压 耐压4V-30V降压5V 2A电流 外围简单,四个元器件

SL1581是一款专为降压恒压应用而设计的芯片,具有耐压4V-30V、降压5V、2A电流输出等特点,外围电路简单,仅需四个元器件。 一、芯片介绍 SL1581是一款专为降压恒压应用而设计的芯片,它采用先进的PWM控制技术,具有高效率、…

Google 发布最强大模型Gemini,能力与GPT-4相当

一、Gemini 介绍 Gemini 是一个多模式模型系列,在图像、音频、视频和文本领域展示了真正强大的功能。其中功能最强大的模型 Gemini Ultra 在 32 个基准测试中的 30 个中提升了最先进水平,其中包括 12 个流行文本和推理基准测试中的 10 个、9 个图像理解…

情感分析简化:使用python中的TextBlob库轻松分析文本情感

导语:在当今社交媒体和大数据时代,了解人们对于产品、服务或事件的情感倾向变得至关重要。TextBlob库作为一个简单易用的自然语言处理工具,提供了强大的情感分析功能,帮助我们更深入地理解文本背后的情感。本文将介绍TextBlob库的…

Python3+RIDE+RobotFramework自动化测试框架搭建过程详解

一、Python安装 最新版Python下载地址:https://www.python.org/ 根据操作系统选择对应版本制品下载安装即可,本机用的是Windows x86-64 executable installer。 注意事项: 安装完成后检查下环境变量,默认会配置好,可…

HarmonyOS开发(十):通知和提醒

1、通知概述 1.1、简介 应用可以通过通知接口发送通知消息,终端用户可以通过通知栏查看通知内容,也可以点击通知来打开应用。 通知使用的的常见场景: 显示接收到的短消息、即使消息...显示应用推送消息显示当前正在进行的事件&#xff0c…

2024黑龙江省职业院校技能大赛信息安全管理与评估赛项规程

2024黑龙江省职业院校技能大赛暨国赛选拔赛 “GZ032信息安全管理与评估”赛项规程 极安云科专注技能竞赛,包含网络建设与运维和信息安全管理与评估两大赛项,及各大CTF,基于两大赛项提供全面的系统性培训,拥有完整的培训体系。团队…

Python实现广义线性回归模型(statsmodels GLM算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 广义线性模型(Generalized Linear Model,简称GLM)是一种广泛应用于回归分析和分类问题的统…

中通快递查询,中通快递单号查询,筛选出指定派件员的单号

批量查询中通快递单号的物流信息,将指定派件员的单号筛选出来。 所需工具: 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤: 步骤1:运行【快递批量查询高手】软件,并登录 步骤2:点击主界面左上…

工业交换机的内部结构和工作原理,你了解多少?

工业交换机由许多小组件构造而成,因此,为了更全面地了解和认识工业交换机,我们需要了解其内部结构和工作原理。 工业交换机的内部结构: 1、主板,也被称为背板,是计算机的核心部件之一。 为各业务接口和数…

【PyTorch】模型选择、欠拟合和过拟合

文章目录 1. 理论介绍2. 实例解析2.1. 实例描述2.2. 代码实现2.2.1. 完整代码2.2.2. 输出结果 1. 理论介绍 将模型在训练数据上拟合的比在潜在分布中更接近的现象称为过拟合, 用于对抗过拟合的技术称为正则化。训练误差和验证误差都很严重, 但它们之间差…

DELL EMC unity 存储系统日志收集方法

对于一些非简单的硬件故障,解决故障最有效、最快速的方法就是收集日志,而不是瞎搞。常见的乱搞方法就是 1. reimage系统‘ 2. 更换控制器;3, 重启。 本文详细介绍了图形界面GUI和命令行CLI下如何收集DELL EMC Unity日志的方法和常…

0007Java程序设计-ssm基于微信小程序的在线考试系统

文章目录 **摘要**目 录系统实现开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅🐧裙:776871563 摘要 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,基于微信小程序的在线考试…

功能测试,接口测试,自动化测试,压力测试,性能测试,渗透测试,安全测试,具体是干嘛的?

软件测试是一个广义的概念,他包括了多领域的测试内容,比如,很多新手可能都听说:功能测试,接口测试,自动化测试,压力测试,性能测试,渗透测试,安全测试等&#…