当然可以!为你说明在 VS Code 中进行 JavaScript 开发的环境配置,这是一个非常普遍且高效的组合。
别担心,配置过程非常直接。JS 开发环境的核心主要包括两大部分:
下面我为你分解成清晰的步骤,跟着做就行。
这是最重要的一步。 即使你只想写在浏览器里运行的前端代码,安装 Node.js 也是强烈推荐的。
它是什么?
怎么安装?
如何验证安装成功?
PowerShell
或 CMD
,macOS 可以用 终端
或 iTerm2
)。node -v
npm -v
ctrl + `
(反引号键,在 Esc
键下方) 或者菜单栏 查看(View)
-> 终端(Terminal)
来打开它。之后的所有命令行操作都可以在这里完成。VS Code 的强大之处在于其丰富的扩展生态。下面这些扩展能极大地提升你的 JS 开发体验。
打开 VS Code,点击侧边栏的 扩展(Extensions) 图标 (四个方块的图标),然后搜索并安装以下扩展:
Prettier - Code formatter
Ctrl + ,
),搜索 Format On Save
,并勾选它。这样每次保存时就会自动格式化。ESLint
.eslintrc.js
配置文件。但对于初学者,可以先安装扩展,它能提供基础的检查功能。Live Server
Open with Live Server
即可。Code Runner
Ctrl+Alt+N
就可以直接在终端输出结果。Path Intellisense
import
或 require
),它会自动提示路径,防止你写错。现在,环境和工具都准备好了。我们来看一个典型的工作流程。
my-first-web
。文件(File)
-> 打开文件夹(Open Folder)
打开这个文件夹。index.html
和 script.js
。index.html
中写入基本结构,并引入 JS 文件:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页title>
head>
<body>
<h1>你好,JavaScript!h1>
<script src="script.js">script>
body>
html>
script.js
中写入一些代码:console.log("Hello from script.js!");
// 你可以通过 Prettier 故意把格式弄乱,然后按保存,看看它是否自动变整洁
alert( "欢迎来到我的网站!" )
index.html
文件上右键,选择 Open with Live Server
。F12
打开) 的 Console
(控制台) 中,你会看到 “Hello from script.js!” 的输出。test.js
。const message = "Hello, Node.js!";
console.log(message);
function add(a, b) {
return a + b;
}
console.log(`2 + 3 = ${add(2, 3)}`);
ctrl + `
),然后输入命令:node test.js
Hello, Node.js!
2 + 3 = 5
你的 VS Code + JavaScript 开发环境已经完全准备好了!
npm
包管理器。Prettier
保证代码美观,ESLint
保证代码质量,Live Server
加速网页开发。Live Server
在浏览器中运行。node your_file_name.js
命令运行。从这里开始,你就可以愉快地进行各种 JavaScript 开发了。下一步可以学习使用 npm
来为你的项目安装第三方包,或者开始学习一个前端框架(如 Vue 或 React)。祝你编码愉快!