boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网!

文章导读

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


avatar
站长 2025年8月8日 10

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)。

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

  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来说,就像是文件的身份证,决定了VSCode会用哪种方式来“理解”和“对待”你的代码。说白了,你写的是JavaScript还是Python,VSCode全靠它来判断。

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

.js

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

.txt

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

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

.

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

更深层次一点,许多语言特有的工具链集成,比如代码格式化(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还内置了强大的调试功能。你可以通过

运行 (Run)

菜单或者左侧的“运行和调试”图标(一个虫子形状的图标)来配置和启动调试会话。这通常需要一些初始配置,但一旦设置好,你就可以设置断点、单步执行代码、检查变量值,这对于找出代码中的问题(bug)来说非常有用。虽然对于新手来说可能有点超纲,但了解它的存在,对你未来的学习很有帮助。



评论(已关闭)

评论已关闭