VSCode怎样创建第一个代码文件并保存 VSCode新手创建与保存文件的基础操作技巧

看不見的法師

发布时间：2025-08-08 16:43:01

380人浏览过

来源于php中文网

原创

在vscode中创建并保存代码文件需先新建文件（ctrl+n或cmd+n），输入代码后通过ctrl+s或cmd+s保存，并在另存为时输入正确扩展名（如.js、.py）以识别语言类型；2. 文件扩展名决定vscode的语法高亮、智能感知和工具集成，是编辑器正确解析代码的基础；3. 可通过“文件”→“打开最近”或欢迎页的“最近”列表快速访问近期编辑的文件或文件夹，推荐使用“打开文件夹”功能管理项目；4. 保存后的代码可通过集成终端（ctrl+~或cmd+~）运行，如输入python或node命令执行脚本，前端文件可安装live server扩展实现浏览器实时预览。

VSCode怎样创建第一个代码文件并保存 VSCode新手创建与保存文件的基础操作技巧

在VSCode里创建并保存你的第一份代码文件，其实并没有想象中那么复杂。你只需要打开软件，新建一个空白文件，然后把你想写的代码敲进去，最后选择一个合适的位置和文件名保存下来就可以了。关键在于保存时要给文件一个正确的扩展名，这样VSCode才能知道你写的是哪种编程语言，并提供相应的帮助。

解决方案

开始在VSCode里写代码，我们通常从创建一个新文件开始。这个过程比你想象的要直观得多。

首先，启动你的VSCode。你会看到一个简洁的界面，可能有一个欢迎页或者你上次打开的项目。

接着，我们要创建一个全新的文件。最快捷的方式是使用快捷键：在Windows或Linux上是

Ctrl + N

，在macOS上是

Cmd + N

。你也可以通过菜单栏操作：点击

文件 (File)

，然后选择

新建文件 (New File)

。这时，你会看到一个名为“无标题-1”或者类似名称的空白标签页出现在编辑区。这就是你的新文件了，它现在还只是内存中的一个临时文件。

现在，你可以在这个空白文件里自由地输入你的代码了。比如，如果你想写JavaScript，可以敲一行

console.log("Hello, VSCode!");

。如果你是Python爱好者，那大概会是

print("Hello, VSCode!")

。你会发现，当你开始输入时，VSCode会尝试根据你输入的内容，或者当你保存时给出的扩展名，来猜测你正在使用的语言，并提供基本的语法高亮。

代码写好后，就是保存了。保存操作同样有两种常见方式：

快速保存（第一次保存会弹出“另存为”）： 使用快捷键
```
Ctrl + S
```
(Windows/Linux) 或
```
Cmd + S
```
(macOS)。
另存为： 通过菜单栏点击
```
文件 (File)
```
，选择
```
另存为 (Save As...)
```
。或者使用快捷键
```
Ctrl + Shift + S
```
(Windows/Linux) 或
```
Cmd + Shift + S
```
(macOS)。

当你执行保存操作时，会弹出一个文件保存对话框。在这里，你需要做几件事：

选择保存位置： 浏览到你希望存放这个文件的文件夹。建议为你的项目创建一个专门的文件夹，保持整洁。
输入文件名： 比如
```
my_first_script
```
。
指定文件扩展名： 这是最重要的一步！VSCode需要这个扩展名来识别文件的类型。比如，JavaScript文件通常以
```
.js
```
结尾，Python文件是
```
.py
```
，HTML文件是
```
.html
```
，CSS文件是
```
.css
```
。所以，如果你的文件名是
```
my_first_script
```
，而你写的是JavaScript，那么完整的文件名应该是
```
my_first_script.js
```
。

点击“保存”后，你会发现编辑器标签页的名称从“无标题”变成了你刚刚设定的文件名，比如

my_first_script.js

。这表明你的文件已经成功地保存到了硬盘上。

为什么VSCode保存文件时需要指定文件类型？

保存文件时，那个小小的文件扩展名（比如

.js

，

.py

，

.html

）可不是随便写的。它对VSCode来说，就像是文件的身份证，决定了VSCode会用哪种方式来“理解”和“对待”你的代码。说白了，你写的是JavaScript还是Python，VSCode全靠它来判断。

没有正确的扩展名，VSCode就不知道该给你的代码提供什么样的“服务”。最直观的体现就是语法高亮：一个

.js

文件会有各种颜色来区分关键字、字符串、变量，而一个没有扩展名或者扩展名是

.txt

的文件，可能就只是一片单调的白色文本。这不仅仅是美观问题，更是阅读和理解代码效率的关键。

除了高亮，扩展名还影响着VSCode的智能感知（IntelliSense）功能。比如，当你输入一个对象名后敲下

，VSCode会根据语言特性为你列出可能的方法和属性。如果它不知道你写的是什么语言，这些强大的代码补全和错误检查功能就无法正常工作。

Sora

Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。

下载

更深层次一点，许多语言特有的工具链集成，比如代码格式化（Prettier）、静态代码分析（ESLint）、调试器配置等，都依赖于正确的文件类型识别。如果你写了一个Python文件却保存成

.txt

，那么当你尝试运行或调试它时，VSCode可能无法正确地调用Python解释器。所以，别小看这个后缀名，它是VSCode智能工作的基础。

VSCode中如何快速打开最近编辑的文件或文件夹？

写代码不可能只写一个文件，项目会越来越大，文件也会越来越多。VSCode在这方面做得挺好，让你能轻松管理这些零散的文件，甚至整个项目。当你关闭VSCode又想回来接着上次的工作时，或者想快速切换到最近处理过的另一个项目，有几种非常方便的方法：

一个是我个人非常常用的，就是通过

文件 (File)

菜单里的

打开最近 (Open Recent)

。点开它，你会看到一个列表，里面包含了你最近打开过的文件和文件夹。直接点击你想打开的那一个，VSCode就会帮你快速定位并加载。这个列表非常有帮助，尤其是当你同时在处理好几个不相关的项目时。

另一个方法是利用VSCode的欢迎界面。当你没有打开任何文件或文件夹时，VSCode通常会显示一个欢迎页面。在这个页面上，你会看到一个“最近”区域，里面也列出了你最近操作过的文件和文件夹。点击它们也能达到同样的效果。

对于管理整个项目，我更推荐使用VSCode的“工作区”概念。你可以通过

文件 (File)

打开文件夹 (Open Folder...)

来打开一个包含你所有代码文件的根目录。一旦一个文件夹被打开，VSCode的侧边栏就会显示这个文件夹里的所有文件和子文件夹，形成一个树状结构。这样，你就可以在左侧的“资源管理器”视图中轻松地浏览、创建、删除和重命名文件了。当你在一个项目里工作时，这种方式比单独打开文件要高效得多，因为它让你能一览无余地看到整个项目的结构，快速在不同文件间跳转。

VSCode保存文件后，如何运行或预览我的代码？

文件保存好了，那下一步呢？当然是让它动起来，或者看看效果。VSCode本身是一个强大的代码编辑器，但它不是一个运行环境，不过它提供了一些非常直接的方式来帮你实现这一点，不用你跳出编辑器。

对于大多数编程语言，比如Python或Node.js（JavaScript），最直接的方式是使用VSCode的集成终端。你可以通过

视图 (View)

终端 (Terminal)

，或者更快捷地使用

Ctrl + ~

(Windows/Linux) 或

Cmd + ~

(macOS) 来打开它。这个终端就像你电脑上的命令行工具一样，可以直接运行你保存的代码文件。

举个例子：

如果你保存了一个Python文件叫
```
my_script.py
```
，你可以在终端里输入
```
python my_script.py
```
然后按回车。
如果你保存了一个Node.js文件叫
```
app.js
```
，你可以输入
```
node app.js
```
。

这样，你的代码就会在VSCode内部的终端里运行起来，并且输出结果也会直接显示在这里。

如果你正在开发Web页面（HTML、CSS、JavaScript），你可能更想在浏览器中看到效果。虽然你可以手动去文件管理器里找到你的HTML文件，然后双击用浏览器打开，但VSCode有更酷的方式。我个人非常喜欢一个叫做“Live Server”的VSCode扩展。安装它之后，你只需要在HTML文件上右键，选择“Open with Live Server”，它就会自动在浏览器中打开你的页面，并且当你修改代码并保存时，浏览器会自动刷新，这对于前端开发来说简直是神器。

对于更复杂的项目，VSCode还内置了强大的调试功能。你可以通过