VSCode怎么新建运行JS_VSCode创建和执行JavaScript文件教程-VSCode-PHP中文网

VSCode怎么新建运行JS_VSCode创建和执行JavaScript文件教程

絕刀狂花

发布： 2025-08-30 10:43:01

原创

792人浏览过

答案：在VSCode中新建并运行JS文件需创建.js文件并配置运行环境。1. 新建hello.js并编写代码；2. 通过Node.js在终端运行node hello.js；3. 使用Code Runner插件点击运行按钮执行；4. 或在HTML中引入JS并通过Live Server运行；5. 调试时配置launch.json并设置断点进行单步调试；6. 常见报错包括Node.js未安装、代码错误、路径或权限问题、插件冲突及配置错误；7. 格式化代码可使用内置工具或Prettier插件，支持保存时自动格式化；8. 配置ESLint需安装插件和工具，创建.eslintrc文件定义规则，提升代码质量。

vscode怎么新建运行js_vscode创建和执行javascript文件教程

在VSCode中新建并运行JS文件，其实挺简单的，关键是理解配置和一些小技巧。简单来说，就是新建个.js文件，然后配置好运行环境，就能跑起来了。

新建并运行JavaScript文件：

新建文件: 在VSCode中，点击“文件” -> “新建文件”，然后保存为
```
.js
```
登录后复制
格式，比如
```
hello.js
```
登录后复制
。
编写代码: 在
```
hello.js
```
登录后复制
中输入你的JavaScript代码，例如
```
console.log("Hello, VSCode!");
```
登录后复制
。

立即学习“Java免费学习笔记（深入）”；
运行方式一：Node.js环境
- 确保你已经安装了Node.js。
- 打开VSCode的终端（“视图” -> “终端”）。
- 在终端中输入
```
node hello.js
```
  登录后复制
  并回车，你将在终端看到输出 "Hello, VSCode!"。
运行方式二：使用Code Runner插件
- 在VSCode扩展商店搜索并安装 "Code Runner"。
- 安装完成后，打开
```
hello.js
```
  登录后复制
  文件，点击右上角的运行按钮（三角形图标），或者右键选择 "Run Code"。
- Code Runner 会自动运行你的代码，并在输出窗口显示结果。
运行方式三：在HTML中引入JS
- 创建一个HTML文件，例如
```
index.html
```
  登录后复制
  。
- 在
```
index.html
```
  登录后复制
  中引入你的
```
hello.js
```
  登录后复制
  文件：
```
<!DOCTYPE html>
<html>
<head>
    <title>VSCode JS Test</title>
</head>
<body>
    <script src="hello.js"></script>
</body>
</html>
```
登录后复制
- 使用Live Server或者其他方式打开
```
index.html
```
  登录后复制
  ，你可以在浏览器的开发者工具的控制台中看到输出。

如何调试VSCode中的JavaScript代码？

调试JS代码，这才是重点。光能跑起来还不够，得能debug才行。

配置launch.json: 在VSCode中，打开“运行和调试”视图（左侧的调试图标）。
点击 "创建 launch.json 文件"，选择 "Node.js" 环境（如果你用Node.js运行）。
VSCode会自动生成一个
```
launch.json
```
登录后复制
文件，你可以根据需要修改它。
设置断点: 在你的JavaScript代码中，点击行号的左侧，设置断点。
开始调试: 点击“运行和调试”视图中的绿色箭头，开始调试。
VSCode会在断点处暂停执行，你可以查看变量的值、单步执行代码等。

如果是在浏览器里调试，

launch.json

登录后复制

的配置会稍微复杂一点，需要配置 Chrome 或者 Edge 的调试器。不过，现在VSCode的自动配置已经很方便了，跟着提示走就行。

VSCode运行JS报错，常见原因有哪些？

报错这事儿，谁也躲不过。

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

2114

查看详情

Node.js未安装或未配置: 如果你使用
```
node
```
登录后复制
命令运行JS文件，确保Node.js已经正确安装，并且添加到环境变量中。
代码错误: 检查你的JavaScript代码是否存在语法错误或逻辑错误。VSCode通常会提示语法错误，但逻辑错误需要你自己调试。
文件路径错误: 确保你在终端中输入的JS文件路径是正确的。
权限问题: 有时候，VSCode可能没有足够的权限访问你的JS文件。尝试以管理员身份运行VSCode。
插件冲突: 某些VSCode插件可能会导致JS代码运行出错。尝试禁用一些插件，看看是否能够解决问题。
launch.json配置错误: 如果你使用调试器，检查
```
launch.json
```
登录后复制
文件中的配置是否正确。特别是
```
program
```
登录后复制
字段，确保它指向你的JS文件。

我之前就遇到过一个很奇怪的问题，明明代码没问题，但就是跑不起来。后来发现是VSCode的缓存问题，重启一下就好了。

如何在VSCode中格式化JS代码？

代码格式化，强迫症必备。

使用VSCode自带的格式化工具: VSCode自带了代码格式化功能。你可以右键点击JS文件，选择 "格式化文档"。
配置格式化工具: 你可以在VSCode的设置中配置默认的格式化工具。例如，你可以选择使用 Prettier。
安装Prettier插件: 在VSCode扩展商店搜索并安装 "Prettier - Code formatter"。
配置Prettier: 在VSCode的设置中，搜索 "editor.defaultFormatter"，将其设置为 "esbenp.prettier-vscode"。
自动格式化: 你还可以设置VSCode在保存文件时自动格式化代码。在设置中搜索 "editor.formatOnSave"，勾选它。

Prettier 真的很好用，可以统一团队的代码风格。我之前在一个项目里，大家的代码风格都不一样，看起来很难受。后来统一用了 Prettier，世界都清净了。

VSCode怎么配置ESLint？

ESLint，代码质量的守护神。

安装ESLint插件: 在VSCode扩展商店搜索并安装 "ESLint"。
安装ESLint: 在你的项目目录下，使用 npm 或者 yarn 安装 ESLint：
```
npm install eslint --save-dev
# 或者
yarn add eslint --dev
```
登录后复制

配置ESLint: 在项目目录下创建一个

.eslintrc.js

登录后复制

或者

.eslintrc.json

登录后复制

文件，配置你的 ESLint 规则。

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

登录后复制