发布于 2026-01-06 0 阅读
0

设置 VS Code 进行 JavaScript 开发参考资料

设置 VS Code 以进行 JavaScript 开发

参考

你应该熟悉面向对象编程(OOP)中的模块化概念吧?所以,这篇文章里就不做介绍了。😆


介绍

在这篇文章中,我将告诉你如何设置或调整 VS Code 来提高生产力,并将你的开发速度提高四倍,特别是针对 JavaScript 开发。

Visual Studio Code

TL;DR:相当不错的文本编辑器。

安装(所有平台)

安装完成后,即可开始编写代码。就是这么简单!当然,这仅适用于 JavaScript。对于某些语言,您需要添加扩展才能获得支持并启用 IntelliSense。

要么你.js先打开一个文件,要么

  • 按下此键Ctrl + N打开一个新的空白文件
  • 点击Plain Text底部任务栏右下角的按钮。
  • 找到或输入JavaScript该选项,然后点击它!

准备就绪!

你的效率已经翻倍了。想了解更多,请继续阅读。😀

你一定会喜欢的功能

功能很多,但我只会分享那些真正帮助我提高工作效率的功能。

综合终端

按下此键Ctrl + `将打开工作区目录中的终端。然后,您可以直接在 VS Code 中运行 npm 安装程序或 Node 服务器。

Alt + Tab我知道为了保持终端运行并不断查看你辛勤劳动的成果,需要频繁切换窗口甚至桌面,这会造成多大的混乱。

详细使用方法

智能感知

我尽量用简单易懂的方式解释。IntelliSense 的主要功能是提供代码补全和函数参数列表的快速信息,这意味着它可以帮助您按照函数定义中参数的原始顺序排列调用函数时传递的参数。

智能感知在行动

Ctrl + Space您可以在任何编辑器窗口中通过键入或在 JavaScript 中键入点字符 (.)来触发 IntelliSense 。

VS Code 为 JavaScript 和其他一些语言提供了开箱即用的 IntelliSense 功能。不过,某些语言需要从 VS Code 应用商店下载扩展程序才能使用。

详细使用方法

代码导航

当你的项目规模扩大时,这会非常有用。忘记了如何将其他文件中导出的模块.js导入到当前打开的.js文件中吗?

跳转至定义

你可以使用快捷键跳转到定义,ctrl + click或者使用快捷键将定义打开到侧边栏ctrl + alt + click

您将被带到导入/所需模块的函数或对象,或被带到定义该函数或声明该对象的原始文件。

匹配括号

最棒的是,当光标靠近匹配的括号时,匹配的括号就会高亮显示。

按下此键Ctrl + Shift + \会将光标移动到当前代码段的右括号处。

详细使用方法

集成版本控制

记不住那些 Git 命令?别担心。VS Code 自带集成版本控制功能,开箱即用地支持 Git。这意味着你无需下载任何基于 Git 的版本控制系统扩展,即可在任何项目上进行协作。

按下此键Ctrl + Shift + G将打开源代码管理面板。

VS Code Marketplace 上还有许多其他源代码控制提供商可通过扩展程序获得。

Git 安装(所有平台)

详细使用方法

支持 Emmet 代码片段

Emmet 的灵感来源于 CSS 选择器,它允许你输入快捷方式,然后将其展开为完整的代码片段。Emmet 的缩写和代码片段展开功能默认在 `<script>` htmlcss`<script> ` jsx、`<script> xml` 等文件中启用。

艾米特行动中

当你开始输入 Emmet 的缩写时,你会在建议列表中看到该缩写。

艾米特行动中

详细使用方法

专门针对 .js 开发的扩展

除了内置功能外,您还可以通过 VS Code Marketplace 中提供的扩展来扩展 VS Code 的功能。

ESlint

简单来说,它能保持代码简洁。如果你不想花几个小时调试代码,那就用它吧。

除了检查代码风格之外,代码检查工具(lint)也是查找某些类型错误(例如与变量作用域相关的错误)的优秀工具。给未声明的变量赋值(这会泄漏到全局作用域,污染全局作用域,并可能导致难以发现的错误)以及使用未定义的变量都是代码检查工具可以检测到的错误示例。

本文作者是 IBM 加拿大公司的高级软件工程师 Sam Roberts。

使用代码检查工具可以告诉你很多信息:

  • 如果代码遵循一套特定的语法约定
  • 如果代码中包含可能的问题来源
  • 如果代码符合您或您的团队制定的一套标准。

它会发出警告,您可以或您的工具可以分析这些警告,并为您提供可操作的数据来改进您的代码。

试试看

更漂亮

有时候,我们开发人员会忘记缩进,使用错误的引号等等,然后不得不把代码给朋友们看,当他们不得不要求你使用正确的空格等等时,真是尴尬极了。

更漂亮的演示

只需按下按钮Alt + Shift + F,让Prettier来完成它出色的工作。

试试看

概括

如果你有这样的配置,很快就能写出简洁优美的 JavaScript 代码,而且调试起来也会轻松很多。😁

参考

文章来源:https://dev.to/dspsolves/setting-up-vs-code-for-javascript-development-4a8b