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

在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。你会看到一个简洁的界面，可能有一个欢迎页或者你上次打开的项目。

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

Ctrl + N

Cmd + N

文件 (File)

新建文件 (New File)

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

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

print("Hello, VSCode!")

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

• 快速保存（第一次保存会弹出“另存为”）： 使用快捷键

  Ctrl + S

  登录后复制
  (Windows/Linux) 或

  Cmd + S

  登录后复制
  (macOS)。
• 另存为： 通过菜单栏点击

  文件 (File)

  登录后复制
  ，选择

  另存为 (Save As...)

  登录后复制
  。或者使用快捷键

  Ctrl + Shift + S

  登录后复制
  (Windows/Linux) 或

  Cmd + Shift + S

  登录后复制
  (macOS)。

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

1. 选择保存位置： 浏览到你希望存放这个文件的文件夹。建议为你的项目创建一个专门的文件夹，保持整洁。
2. 输入文件名： 比如

   my_first_script

   登录后复制
   。
3. 指定文件扩展名： 这是最重要的一步！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就不知道该给你的代码提供什么样的“服务”。最直观的体现就是语法高亮：一个

.js

.txt

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

.

爱派AiPy

融合LLM与Python生态的开源AI智能体

1

查看详情

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

.txt

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

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

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

文件 (File)

打开最近 (Open Recent)

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

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

文件 (File)

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

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

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

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

视图 (View)

终端 (Terminal)

Ctrl + ~

Cmd + ~

举个例子：

• 如果你保存了一个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还内置了强大的调试功能。你可以通过

运行 (Run)

以上就是VSCode怎样创建第一个代码文件并保存 VSCode新手创建与保存文件的基础操作技巧​的详细内容，更多请关注php中文网其它相关文章！