在Win11系统上搭建基于VSCode的JavaScript开发环境

敲代码的史莱姆

于 2024-10-14 22:21:47 发布

阅读量1k

点赞数 26

分类专栏： 0基础学习JavaScript 文章标签： vscode javascript ide

本文链接：https://blog.csdn.net/2401_87242367/article/details/142927451

版权

0基础学习JavaScript 专栏收录该内容

9 篇文章

订阅专栏

说明：此文章用作个人学习记录，若有任何问题或建议欢迎大家在评论区讨论

前言：配置环境

系统：Windows11
平台：Node.js
代码编辑器：Visual Studio Code
版本管理：Git / GitHub

一、软件安装

1. 安装 Node.js 和 npm

Node.js 是一个可以在服务器端运行 JavaScript 的平台，
同时也包括了 npm（Node Package Manager），这是 JavaScript 项目的包管理工具。
安装 Node.js 后，我们就可以在命令行中运行 JavaScript。

官方下载地址：https://nodejs.org/
下载LTS长期稳定版本
下载完成后，双击安装包，按照提示进行安装。建议选择默认设置。
安装完成后，点击开始菜单，搜索并打开命令提示符（CMD）或者PowerShell
在PowerShell界面分别输入以下命令，并按回车确认：
node -v
npm -v
如果出现版本号，即为安装成功

常见问题：若出现 “node不是内部或外部命令，也不是可运行的程序或批处理文件” 报错字样时，
请重启电脑或者检查系统环境变量中的PATH值

2. 安装 Visual Studio Code (VS Code)

VS Code 是一个非常好用的代码编辑器，适合 JavaScript 和 Node.js 的开发。

官方下载地址：https://code.visualstudio.com/
下载安装程序，并按照默认设置进行安装
安装完成后，打开 VS Code

二、配置 VS Code 开发环境

为了使 VS Code 更适合 JavaScript 开发，可以安装一些有用的扩展。

如图所示，安装以下4个扩展插件

在这里插入图片描述

Chinese (Simplified) Language Pack —— 简体中文语言包
JavaScript (ES6) code snippets —— 提供很多有用的 JavaScript 代码片段
Prettier - Code formatter —— 代码格式化工具，能自动保持代码风格一致
ESLint —— 找到并修复语法错误和风格问题

三、在 VS Code 中运行 JavaScript

以上所有安装配置完成后，就可以编写并运行第一个JavaScript代码了

在 VS Code 中创建一个新文件，命名为 index.js。
在文件中写入以下代码：
```
console.log('Hello, World!');
```
在VS Code中使用快捷键ctrl + ~ 打开终端界面
在终端界面中使用cd命令将目录切换至index.js文件所在目录下
使用node index.js命令运行该代码
VS Code 的终端将执行此代码，你应该在终端中看到输出 Hello, World!
小技巧：更改终端启动位置

如果想在打开终端时自动切换到特定目录，可以在 VS Code 设置中进行更改：

点击 文件 > 首选项 > 设置（或使用快捷键 Ctrl + ,）
搜索终端设置：
在搜索框中输入 terminal.integrated.cwd
设置为希望终端打开时默认显示的路径（例如：D:\Code\src）
以后每次打开终端时，都会自动切换到该目录

四、（可选）使用 git 进行代码托管和版本控制

1. 安装Git

访问 Git 官方网站：https://git-scm.com/
下载 Windows 的安装程序，并按照默认设置进行安装。
安装完成后，打开命令提示符，输入以下命令来验证安装是否成功：
```
git --version
```

2. 配置Git

2.1 确定项目的文件夹结构

一个常见的 JavaScript 项目文件夹结构如下：

MyProjects
│
├── JavaScript
│   ├── Project1
│   │   ├── src          # 源代码文件
│   │   ├── tests        # 测试文件
│   │   ├── README.md     # 项目说明文件
│   │   ├── .gitignore    # Git 忽略文件
│   │   └── package.json  # npm 包配置文件
│   ├── Project2
│   │   ├── src
│   │   ├── tests
│   │   ├── README.md
│   │   ├── .gitignore
│   │   └── package.json
│   └── Common           # 存放公共库或工具
│       ├── utils.js
│       └── constants.js
│
└── Python                # 如果你有其他语言的项目，可以在这里建立文件夹

2.2 在 Windows 上创建文件夹结构

打开文件资源管理器。
创建主文件夹：
- 在适当的位置（如 D: ），创建一个名为 MyProjects 的文件夹。
创建 JavaScript 文件夹：
- 在 MyProjects 文件夹中创建一个名为 JavaScript 的文件夹。
创建项目文件夹：
- 在 JavaScript 文件夹中为每个项目创建一个单独的文件夹（如 Project1、Project2 等）。
在每个项目文件夹中创建子文件夹：
- 进入每个项目文件夹，创建 src、tests 和 Common 等子文件夹。

2.3 初始化 Git 仓库

对于每个项目文件夹，可以初始化一个 Git 仓库，以便管理代码版本和与 GitHub 同步

打开命令提示符或 PowerShell，并导航到项目文件夹：
```
cd "D:\MyProjects\JavaScript\Project1"
```
初始化 Git 仓库：
```
git init
```
创建 .gitignore 文件：
- 在项目根目录下创建一个 .gitignore.txt 文件，指定希望 Git 忽略的文件和文件夹
  例如：
```
node_modules/
.env
```
在项目中，通常会将 node_modules/ 和 .env 添加到 .gitignore 文件中，
以避免将这些文件和文件夹上传到 GitHub 或其他版本控制系统中
```
 	node_modules/：因为它是 npm 自动生成的，并且通常很大，上传到 GitHub 只会浪费空间
 	.env：因为它可能包含敏感信息（如密码、API 密钥等），上传到公共仓库会导致安全问题
```
- 编辑完成后删除.gitignore.txt 的txt后缀名，使之变成一个普通文件
创建 README.md 文件：
- 在项目根目录下创建一个 README.md 文件，记录项目的说明、安装步骤、使用方法等信息

2.4 使用 GitHub 功能

创建 GitHub 仓库（如前面所述）：
- 登录 GitHub，创建一个新仓库。
关联本地仓库和 GitHub 仓库：
- 在命令提示符中，将本地仓库关联到 GitHub：
```
git remote add origin https://github.com/yourusername/your-repo-name.git
```

提交代码并推送到 GitHub：

将更改添加到 Git：

git add .
git commit -m "Initial commit"
git push -u origin master  # 如果主分支是 main，请使用 master

2.5 管理和维护项目

定期更新：在每次代码更改后，重复使用 git add . 和 git commit -m "Your message" 的步骤，并推送到 GitHub。
保持文件夹结构清晰：根据项目进展，确保文件夹和文件命名一致，保持清晰的项目结构。
使用合适的分支：在 GitHub 上使用分支（branches）来管理不同版本的开发工作。

使用 Visual Studio Code (VS Code) 来管理 Git 和上传代码到 GitHub 是非常方便的。VS Code 内置了 Git 支持，能够让你轻松完成代码的版本控制。下面是详细步骤，指导你如何在 VS Code 中完成 Git 操作并将代码上传到 GitHub。

五、（可选）在 VSCode 上使用 Git 托管代码

1. 确保项目已经初始化为 Git 仓库

在项目文件夹中，确保已经初始化了 Git 仓库。若还没有，打开 VS Code，使用集成的终端初始化：

打开 VS Code。
打开集成终端（可以使用 Ctrl + ~ 或者点击菜单 视图 > 终端）。
在终端中输入：
```
git init
```

2. 打开源代码控制面板

在 VS Code 左侧边栏，点击源代码管理图标（快捷键是 Ctrl + Shift + G）。

3. 添加文件到 Git 暂存区

在源代码控制面板中，会显示当前未跟踪的文件
点击 + 按钮将文件添加到暂存区

4. 提交更改

在源代码控制面板底部，输入你的提交信息（如“Initial commit”）
提交更改

5. 配置远程仓库

如果还没有配置远程仓库，在终端中执行以下命令：

获取 GitHub 仓库的 HTTPS 地址
例如：https://github.com/yourusername/your-repo-name.git

在终端中输入：

git remote add origin https://github.com/yourusername/your-repo-name.git

6. 推送代码到 GitHub

在源代码控制面板的顶部，点击 …（更多操作）按钮，

从下拉菜单中选择提交，或者直接在终端中输入：

git push -u origin master  # 如果你的默认分支是 main，请替换 master 为 main

如果提交界面显示 同步更改 ，点击并选择 “是”

7. 查看结果

打开 GitHub 仓库页面并刷新，检查代码是否已经上传成功