用于 Node.js 开发的 Visual Studio Code
介绍
node.js 成为最流行的应用程序开发平台之一的原因有很多。其中一个原因是它几乎可以在任何地方运行。它对特定操作系统没有很强的依赖性。您的工具难道不应该也遵循这个例子吗?
本指南将解释为什么 Visual Studio Code 是开发 node.js 应用程序的不错选择。它将介绍编辑器内置的功能以及可以安装的扩展,以使 node.js 开发更加熟练。请记住,本指南适用于 node.js。我之前关于 Visual Studio Code 的指南中讨论了跨语言使用的功能。
智能感知
使用 Visual Studio Code 与 node.js 的最大优势之一就是 Intellisense。
Visual Studio Code 不仅为 JavaScript 语言提供 Intellisense,还为 JavaScript 内置对象提供 Intellisense。例如,给定一个数组,输入一个点后将提供建议:
如果您想随时查看可用的建议,只需使用键盘快捷键Ctrl-Space。
在使用 node.js 中包含的类型时,您还可以利用 Intellisense。例如,如果您导入fs模块,则可以找到以re开头的所有方法。输入时,可用补全列表将缩小到您需要的范围。
Intellisense 还适用于通过npm安装的第三方软件包。例如,如果你安装lodash并将其保存到package.json文件中,则当你导入它时,Visual Studio Code 就会知道它在项目中。
当然,它会检测包的成员。
它甚至可以与用户定义的类型一起使用。
类型检查
上图中的Conference类有三个属性,每个属性都有隐含类型。但是,没有什么可以阻止某人做这样的事情:
let js_conf = new Conference(
'JavaScript Conference',
new Date(2021, 1, 1),
'$400.00'
)
这是完全合法的 JavaScript,但是如果Conference类有计算税收的方法怎么办?
compute_tax(tax_rate) {
return this.ticket_cost + (this.ticket_cost * tax_rate);
}
如果在js_conf实例上调用,compute_tax将返回字符串 '$400.00NaN'。更糟糕的是,这甚至不会引发警告。显然,ticket_cost属性旨在为Number。微软创建了 TypeScript 语言来解决这些问题。Visual Studio Code 对 TypeScript 也提供了出色的支持。但您也可以在 JavaScript 文件中利用 TypeScript 类型检查支持。
First, at the top of the JavaScript file, add the @ts-check directive. Visual Studio Code even has Intellisense for this.
Next, add JSDoc to the constructor that describes the types for the properties. Visual Studio Code also makes this easy. Simply type /**. Intellisense will offer to create a snippet for JSDoc. Press Return and the snippet will be expanded. Visual Studio Code will detect the parameters to the constructor and scaffold a @param directive for each one. All you have to do is fill in the types.
Now if you look at the Conference object again, notice two things. First, the red wavy line underneath '$400.00' indicates that this code is causing an error. Hovering over the offending code, you can see that it has detected the ticket_cost is supposed to be a Number and we are trying to pass it as a string.
However, this will not prevent the node interpreter from trying to run the application.
Extensions
There are over 200 extensions for Visual Studio Code in the Visual Studio Marketplace for node.js. This is in addition to the almost 2000 extensions for JavaScript, many of which are relevant to node.js development.
One of these extensions allows you to manage the execution of npm command from the Command Palette. You can always run these commands from the Terminal window, but the npm extension provides this from within Visual Studio Code.
Pressing Ctrl-Shift-P (Command-Shift-P on macOS) will bring up the Command Palette, where you can search for npm to see the available commands.
Many of these shadow commands run at the command line. For example, npm: Run Init will trigger the npm init command. And npm: Install Dependencies will run npm install. You can also execute scripts inside of the package.json file. The npm: Run Start command will run the start script inside of package.json while the npm: Run Test command will run the test script. To run any arbitrary script, execute the npm: Run Script command. It will bring up a list of the scripts defined in the package.json file.
Another extension is not specific to node.js but to JavaScript. ESLint is a popular static analyzer for node.js and JavaScript in general. The ESLint extension integrates ESLint into Visual Studio Code.
由于 ESLint 功能强大,因此本指南不对其做全面讨论。不过,这一切都始于一个.eslintrc文件,该文件可以使用命令面板中的Create ESLint 配置命令创建。
.eslintrc.js 文件中的rules键定义了要检测的不同错误的错误级别。例如:
"semi": ["error", "always"]
告诉 ESLint 当语句末尾省略分号时始终引发错误而不是警告。这将显示在“问题”窗格和状态栏中。
再次,在文档中可以找到更多有关 ESLint 的选项和规则。
基本调试
开箱即用,Visual Studio Code 支持对 node.js 应用程序进行基本调试。它需要在launch.json文件中进行配置。在侧栏的调试窗格中,单击创建 launch.json 文件链接以创建一个。
launch.json文件将在项目根目录中名为.vscode的新目录内创建。
如果您在某个 JavaScript 文件中设置断点,然后使用“调试”窗格中的绿色运行按钮开始调试应用程序,则应用程序将在断点处暂停。然后,您可以使用侧边栏检查应用程序的状态。您可以将鼠标悬停在上面并检查代码中变量的值。
最后,在调试控制台窗格中,您可以在暂停的应用程序的上下文中执行代码。
您可以访问编辑器顶部调试工具栏中的基本步骤功能。
结论
Visual Studio Code 是一款功能强大的 node.js 和 JavaScript 应用程序编辑器。事实上,Visual Studio Code 本身就是用 JavaScript 编写的!作为跨平台工具,它非常适合确保在多个操作系统(包括 Windows、macOS 和 Linux)上工作的团队获得一致的开发体验。Visual Studio Code 的功能可以通过针对 node.js 和其他开发任务的众多扩展来扩展。它可以免费下载,所以你有什么损失呢?感谢阅读!
免责声明:本内容来源于第三方作者授权、网友推荐或互联网整理,旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有,其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况,请与我们取得联系,我们将尽快进行相关处理与修改。感谢您的理解与支持!
请先 登录后发表评论 ~