初识Node.js之IDE的选择

article/2025/11/8 5:06:45

其实就如同Java一样,Node可以选择的IDE不止一种,常见的比如webstormVisual Studio Code,其实都可以应付日常的工作需求,今天我要介绍的IDE,其实就是Visual Studio Code(接下来简称vs code)。怎么评价vs code呢?其实vs code优点很多,它的文件目录管理非常强大,还可以之定义配置,我们更改代码后可以自动保存,不用担心代码丢失,而且vs code集成Git,这对于我们版本控制可以说省了很多功夫,这也是我很喜欢这个编译器的原因。而且,vs code智能提示功能很强大,还自带强大的调试功能,这解决了Node缺少调试工具的不足。像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件,我会针对性的讲述一些实用、有趣的插件与大家分享。我们在IDE中集成插件,大幅度的提升了我们的开发速度。接下来,我们慢慢来说下这个编译器如何去使用。

Visual Studio Code安装

    首先进入vs code的官方网站:https://code.visualstudio.com

在这里插入图片描述
其实默认就是windows系统 x64版本的,直接进行下载,然后一直next安装直到finish结束就可以,因为vs code默认会自己将bin路径加到path环境变量中,所以所以省去了配置环境变量的步骤。
在这里插入图片描述
安装成功后进入vs code主界面,vs code 默认语言是英文,如果想将IDE汉化成中文需要安装插件,接下来我们就来说说在vs code中如何进行插件的安装。

必备插件安装
在这里插入图片描述
在这里插入图片描述
在编译器的右侧侧边栏最下方的按钮其实就是进行插件安装,点击这个按钮,可以进入图二的界面,将插件名称输入到搜索框,然后点击安装,安装成功后重启IDE我们的插件就可以成功生效了。那我们进行Node开发需要用到什么必备插件呢?

1.Chinese Language Pack for Visual Stidio Code

第一个必备插件自然是vs code的中文简体包,新手一开始不适应vs code这个IDE,建议可以先行使用中文版。

2.open-in-browser

由于 VS Code 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firefox,Chrome,IE)中打开命令面板选项。

3.vscode-icons

好的代码始于颜值,vscode-icons是能够让右侧文件夹与不同文件都显示图标。

4.Auto Rename Tag

HTML标签被修改其中之一时,另一半标签会跟着被修改。

5.beautify

良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS代码,比内置格式化好用

6.Quokka

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。

7.CSS Peek

使用此插件,你可以追踪至样式表中 CSS 类和 id定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to DefinitionPeek definition ”选项,它便会跳转到你样式定义的地方。

8.HTML BoilerPlate

通过使用 HTML 模版插件,你只需在空文件中输入 html,并按 Tab 键,即可自动生成干净的HTML文档结构。

9.Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JSCSS 文档快速格式化为统一的代码样式。

10.Themes

在众多的实用插件中,岂能少了漂亮的主题呢?你每天都会与你的 VS Code 编辑器进行“亲密的接触”,为何不把它打扮得更漂亮些呢?这个插件可以更改页面主题。

11.Auto Close Tag

匹配标签,关闭对应的标签。很实用【适用于HTML/XML】。

12.Path AutoComplete

路径自动补全,这个是必须插件之一。

13.HTML CSS Support

html 标签上写class 智能提示当前项目所支持的样式。新版已经支持scss文件检索。

我们工作必须的插件基本都包括在上面了,当然如果你要使用vuereact之类的js框架,vs code当然也有类似的插件支持,比如vue-cli脚手架,在这里我就不详细述说了。

常用快捷键

打开一个新窗口 Ctrl+Shift+N

关闭窗口 Ctrl+Shift+W

新建文件 Ctrl+N

文件之间切换 Ctrl+Tab

复制或剪切当前行/当前选中内容 Ctrl+C 、 Ctrl+V

代码格式化: Shift+Alt+F

上下移动一行 Alt+Up 或 Alt+Down

向上向下复制一行 Shift+Alt+Up 或 Shift+Alt+Down

在当前行下方插入一行 Ctrl+Enter

在当前行上方插入一行 Ctrl+Shift+Enter

移动到行首 Home

移动到行尾 End

移动到文件结尾 Ctrl+End

移动到文件开头 Ctrl+Home

移动到定义处 F12

定义处缩略图 只看一眼而不跳转过去 Alt+F12

找到所有的引用 Shift+F12

同时修改本文件中所有匹配的 Ctrl+F12

重命名 比如要修改一个方法名,可以选中后按 F2,输入新名字,回车,则所有该方法的引用也都同步更新了

跳转到下一个 Error 或 Warning 当有多个错误时可以按 F8 逐个跳转

查找 Ctrl+F

查找替换 Ctrl+H

整个文件夹中查找 Ctrl+Shift+F

快捷键我这里只介绍一些我们经常被使用的,vs code快捷键功能非常齐全,如果想了解可以访问https://blog.csdn.net/p358278505/article/details/74221214,这里面介绍了目前vs code包含的大部分快捷键。

到这里我们对于vs code的 配置就差不多告一段落了,就可以真正开始vs code的学习之旅了。下一篇再见!

欢迎关注我的个人公众号,持续更新Node.js系列文章,每周更新1—2篇。
在这里插入图片描述


http://chatgpt.dhexx.cn/article/DMDQwMlL.shtml

相关文章

【编辑器】VSCode的Web前端(html,css,JavaScript)开发环境打造

1、安装VScode和浏览器 VScode安装:https://code.visualstudio.com/ Chrome安装:https://www.google.com/intl/zh-CN/chrome/ node.js 安装:https://nodejs.org/zh-cn/download/ Web前端开发主要包括html,css,JavaScr…

IDE集成开发工具-IDEA(一)之IDE的概念

IDE的概念 集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开…

11个裸VSCode必备插件,助你打造一个前端开发IDE

VSCode 轻量、开源,新鲜下载的 VSCode 可谓是身无长物、一穷二白,连个项目管理的功能都没有。 身轻如燕的 VSCode 对于后端开发说可能有点幼稚,但对于前端来说刚刚好,毕竟不需要搞什么 Docker、数据库等等,装俩 VSCod…

「干货」前端开发者最常用的六款IDE

微信公众号:javafirst 一、Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的…

IDEA使用前端基础

常用快捷键和快捷语句 CtrlShiftEnter:将输入的if、for、函数等等补上{}或者;使代码语句完整 CtrlAltT:将选中的代码使用if、while、try/catch等包装 Alt/:自动完成 AltEnter:自动提示完成 Ctrl/:使用//进行注释 Ctrl…

IDE的详细介绍

IDE(集成开发环境) 就是电脑上编程时用的应用,比如:visual studio(如图), eclipse等。IDE一般包括:代码编辑器、编译器、调试器和图形用户界面等工具。IDE是集成了代码编写功能、分…

IDE等开发工具的使用(VSCODE + IDEA)

Mac下各按键对应含义 ⌥ ⌃⇧⌘→ / ← ↑ / ↓ 各种快捷键的组合场景 左ctrl 待定 左alt cmd 待定 左ctrl shift 待定 左ctrl cmd 待定 左shift cmd 待定 1.熟悉的Mac下的快捷键(持续补充) 附:Vscode KeyShortCut 功能 快捷键 功能…

【HBuilder】前端IDE神器

Hbulider目录 一、Hbulider简介1.1 Hbulider出身1.2 Hbulider特点 二、Hbulider安装2.1 Hbulider官网下载2.2 解压,发送快捷方式到桌面 三、Hbulider启动3.1 选择主题和快捷键方案 四、Hbulider使用4.1 失去焦点自动保存 一、Hbulider简介 1.1 Hbulider出身 HBuild…

前端vscode必备插件(强烈推荐)

目录 一、前言 二、工具推荐 1.《Chinese (Simplified) (简体中文) Language》 2.《ESLint》 3.《Git History》 4.vscode-icons 5.Path Intellisense 6.《Vetur》 7.《GitLens — Git supercharged》 8.《Image preview》 9.Debugger for Chrome 10.Prettier 11…

前端开发IDE---VSCode前端开发环境配置

所安装的插件如下: 1、open in browser(2.0.0版本)详细内容见VSCode插件搜索。 修改默认浏览器的步骤: File>preferences>settings>点击那三个点>选择open settings.json>找到plugin open-in-browser按照提示在右边的json文…

前端开发IDE WebStorm使用

一、安装WebStorm 前往官网下载WebStorm: The Smartest JavaScript IDE, by JetBrains 二、无限试用期工具 链接:百度网盘 请输入提取码 提取码:ide0 直接将压缩包拖入IDE窗口,将会自动刷新一次试用期时间。 也可以手动刷新&#xf…

Web前端:面向Web开发人员的顶级JavaScript开发工具和IDE

​  JavaScript是最流行的编程语言并且受到所有浏览器的支持,增强了用户与网页的交互。也就是说,许多JavaScript IDEs现在提供智能课程完成和实时消除错误。 这些有效的工具带有精确的语法检查器和显式调试器,用于快速创建各种JavaScript应…

前端开发者最常用的六款IDE

一、Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和…

5款超好用的在线IDE,媲美vscode,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习、demo、原型开发

以下5款在线IDE,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习,写demo: 1、https://codesandbox.io/ 【推荐】 个人免费,支持公开项目个性化的设置,跨平台使用,…

工欲善其事,必先利其器——Web开发的10大IDE

工欲善其事,必先利其器——Web开发的10大IDE 一、Visual Studio Code二、PhpStorm三、Atom四、Pycharm五、NetBeans六、WebStorm七、Sublime Text八、Brackets九、IntelliJ IDEA十、HBuilderX 集成开发环境 (IDE) 是编码时极其重要的工具。在当今的市场上&#xff0…

Web前端:一些用于Web开发的最佳精选IDE和代码编辑器

​  IDE,或集成开发环境,是一种特殊的软件解决方案,能够为软件开发人员和计算机程序员提供全面的设施。它们通常包含多种工具,可帮助程序员更轻松地完成工作,从而提高生产力。 IDE可以为软件开发完全定制一个平台&am…

【干货】前端开发者最常用的六款IDE

一、Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和…

2.Latex安装和TeXworks Editor基础

二.Latex安装和TeXworks Editor使用教程 上一章我们讲解了什么是Latex和为什么我们要学习Latex,从这一章开始我们就要正式开始学习Latex 就像前面所讲的,Latex包含编译器和编辑器,我们需要在编辑器中编写夹杂代码的文本,然后通过编译器编译来查看效果, 本章作为后面学习的基…

latex安装血泪史及错误解决

我的电脑安装出现很多问题,基本上是卸载重新安装解决。 一:学校电脑,用户名是英文,下载texlive和texstudio都是清华大学镜像网站,分别是 https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/ ​​​…

Latex安装问题

Latex安装报错解决 Latex安装Latex报错 Latex安装 参考博文:https://blog.csdn.net/Mikowoo007/article/details/87378235?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.control&spm1001.2101.3001.4242 La…