Sublime Text 3配置 Node.js 开发环境

《开发工具系列》

请添加图片描述

Sublime Text 3配置 Node.js 开发环境

  • 一、引言
  • 二、主要内容
    • 2.1 初识 Sublime Text 3
    • 2.2 初识 Node.js
    • 2.3 接入 Node.js
      • 2.3.1 下载并安装 Node.js
      • 2.3.2 环境变量配置
    • 2.4 配置 Node.js 开发环境
    • 2.5 编写 Node.js 代码
    • 2.6 运行 Node.js 代码
  • 三、总结

一、引言

Node.js 是基于 Chrome JavaScript 运行时建立的一个平台,它简单理解就是运行在服务端的 JavaScript。它的开发环境有很多,比如 VS CodeAtom 等等,相信大家多多少少都有接触过;而本篇 Huazie 将要介绍一个比较轻量级的开发工具 Sublime Text 3,并用它来配置 Node.js 的开发环境。

二、主要内容

2.1 初识 Sublime Text 3

Sublime Text 3 是一款流行的文本编辑器,它的特点是体积小巧、启动速度快、界面简洁美观。它具有强大的代码编辑功能,支持多种编程语言。此外,Sublime Text 3 还具有丰富的插件生态系统,用户可以根据自己的需求安装各种插件来扩展其功能。

Sublime Text 3 的一些主要特点,如下所示:

  • 强大的代码编辑功能Sublime Text 3 提供了许多实用的代码编辑功能,如自动完成、代码高亮、代码片段等,大大提高了编程效率。

  • 支持多种编程语言Sublime Text 3 支持多种编程语言,包括 HTML、CSS、JavaScript、Python、Ruby、PHP 等,用户可以根据需要选择不同的语言模式。

  • 插件生态系统Sublime Text 3 拥有丰富的插件生态系统,用户可以通过安装插件来扩展其功能,如 Emmet(用于编写 HTMLCSS)、Package Control(用于安装和管理插件)等。

  • 自定义快捷键Sublime Text 3 允许用户自定义快捷键,以便更快速地执行常用操作。

  • 多窗口编辑Sublime Text 3 支持多窗口编辑,用户可以同时打开多个文件进行编辑,方便进行代码对比和复制粘贴操作。

  • 跨平台支持Sublime Text 3 支持 WindowsMacLinux 操作系统,用户可以在不同的平台上使用相同的设置和插件。

  • 版本控制集成Sublime Text 3 可以与版本控制系统(如 Git)集成,方便用户进行代码版本管理。

2.2 初识 Node.js

Node.js 是一个开源的、跨平台的 JavaScript 运行环境,它使得开发者可以使用 JavaScript 来编写服务器端的应用程序。

它的主要特点如下:

  • 单线程Node.js 是单线程的,这意味着它一次只能做一件事。但是,由于 JavaScript 是事件驱动的,Node.js 可以处理大量并发请求,而不会因为某个请求耗时过长而阻塞其他请求。
  • 非阻塞 I/ONode.js 使用事件驱动和非阻塞 I/O 模型,使得它能够处理大量并发请求。这使得 Node.js 在处理大量并发请求时比传统的多线程服务器更加高效。
  • 跨平台Node.js 可以运行在 WindowsMac OS XLinux 等操作系统上。
  • 强大的社区支持Node.js 拥有庞大的社区和丰富的第三方库,使得开发者可以快速地构建各种应用程序。
  • 与浏览器无缝集成:由于 Node.js 是基于 ChromeV8 JavaScript 引擎构建的,因此它与浏览器中的 JavaScript 有着相同的 API 和语法。这意味着 Node.js 可以直接使用许多浏览器中的 JavaScript 库和框架,如 ExpressMongooseSocket.IO 等。

2.3 接入 Node.js

2.3.1 下载并安装 Node.js

Node.js 官方下载地址

笔者本地下载的是 20.11.0 LTS,这对大多数用户来说已经足够了

在这里插入图片描述

笔者的 Windows 系统,下载完了是如下的 msi 安装包【其他系统自行去官网下载即可】:
在这里插入图片描述
这里直接双击安装即可,安装完了就可以去配置相关的环境变量了。

当然其他平台,如 Linux,MacOS 可以自行参考《Node.js 安装配置》

2.3.2 环境变量配置

现在,Huaziewindows 11 系统为例,介绍下配置环境变量,如下:

右击 Window 图标,打开下图并选择 系统

在这里插入图片描述

点击 高级系统设置,打开系统属性页面,点击 环境变量

在这里插入图片描述

找到 Path 系统环境变量,配置上面你的 Node.js 的安装目录进去:

在这里插入图片描述

环境变量配置好之后,我们就可以通过 CMD 命令行,检查:

  • npm -v :查看当前安装的 npm 的版本号
    在这里插入图片描述
  • node -v : 查看当前安装的 Node.js 的版本号
    在这里插入图片描述

2.4 配置 Node.js 开发环境

初次打开 Sublime Text 3,我们可以看到如下的界面:

在这里插入图片描述

在菜单栏选择 Tools => Build System => New Build System,打开如下页面

在这里插入图片描述

{"cmd": ["node",  "$file_name"], "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$", "working_dir": "${file_path}","selector": "source.js","variants": [{"name": "Run","shell": true,"windows": {"shell_cmd" : "start cmd /c \"node $file_name & echo. & pause\""}}]
}

将上述内容保存在,前面打开的 New Build System 中,并命名为 Node.sublime-build

2.5 编写 Node.js 代码

现在让我们开始编写第一个 Node.js 代码吧!

var author = "huazie";
console.log("Hello, World!");
console.log("Author: " + author);

针对上述 Node.js 代码,我们会新建一个 helloworld.js 文件进行保存。

注意: Node.js 源码文件也就是 JavaScript 源码文件,它的后缀为 js

2.6 运行 Node.js 代码

菜单栏 Tools => Build System ,然后 选择 Node,就是前面的 Node.sublime-build

然后按住 Ctrl + Shift + B,选择 Node,直接运行当前的代码,并在下面输出结果,如下所示:

在这里插入图片描述

如果按住 Ctrl + Shift + B,选择 Node Run,则运行当前代码,并弹出命令窗口输出结果,如下所示:

在这里插入图片描述

通过上面操作之后,我们也可以直接使用 Ctrl + B【这里复用上一次 Ctrl + Shift + B 选择的 Build System】,来直接运行我们的 JS 源代码并输出结果。

三、总结

本篇 Huazie 介绍了 Sublime Text 3 配置 Node.js 开发环境的相关内容,感兴趣的朋友赶紧配置起来,有任何问题可以随时评论区沟通。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2773960.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot3整合Redis

⛰️个人主页: 蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途。 目录 前置条件 1.导依赖 2.配置连接信息以及连接池参数 3.配置序列化方式 4.编写测试 前置条件 已经初始化好一个spr…

C++,stl,deque容器详解

目录 1.deque容器的构造函数 代码示例&#xff1a; 2.deque的赋值操作 3.deque的大小操作 4.deque的插入和删除 5.deque的数据存取 6.deque的排序操作 1.deque容器的构造函数 代码示例&#xff1a; #include<bits/stdc.h> using namespace std;void print(deque…

Spring Cloud使用ZooKeeper作为注册中心的示例

简单的Spring Cloud应用程序使用ZooKeeper作为注册中心的示例&#xff1a; 1.新建模块&#xff1a; 2.勾选依赖&#xff1a; 3.在pom.xml文件中做出部分修改及添加Spring Cloud Zookeeper 依赖版本&#xff1a; 完整pom文件 <?xml version"1.0" encoding&q…

单片机学习笔记---LED点阵屏的工作原理

目录 LED点阵屏分类 LED点阵屏显示原理 74HC595的介绍 一片74HC595的工作原理 多片级联工作原理 总结 LED点阵屏由若干个独立的LED组成&#xff0c;LED以矩阵的形式排列&#xff0c;以灯珠亮灭来显示文字、图片、视频等。LED点阵屏广泛应用于各种公共场合&#xff0c;如汽…

微信小程序(三十八)滚动容器

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.滚动触底事件 2.下拉刷新事件 源码&#xff1a; index.wxml <view class"Area"> <!-- scroll-y 垂直滚动refresher-enabled 允许刷新bindrefresherrefresh 绑定刷新作用函数bindscrollto…

Netty中使用编解码器框架

目录 什么是编解码器&#xff1f; 解码器 将字节解码为消息 将一种消息类型解码为另一种 TooLongFrameException 编码器 将消息编码为字节 将消息编码为消息 编解码器类 通过http协议实现SSL/TLS和Web服务 什么是编解码器&#xff1f; 每个网络应用程序都必须定义如何…

imgaug数据增强神器:增强器一览

官网&#xff1a;imgaug — imgaug 0.4.0 documentationhttps://imgaug.readthedocs.io/en/latest/ github:GitHub - aleju/imgaug: Image augmentation for machine learning experiments. imgaug数据增强神器&#xff1a;增强器一览_iaa 图像增强改变颜色-CSDN博客文章浏览阅…

C++新版本特性

目录: 前言 C11的常用新特性 auto类型推导&#xff1a; auto的限制&#xff1a; auto的应用&#xff1a; decltype类型推导&#xff1a; decltype的实际应用&#xff1a; 使用using 定义别名&#xff1a; 支持函数模板的默认模板参数 : tuple元组&#xff1a; 列表初…

泛型相关内容

1. 什么是泛型 泛型就是定义一种模板&#xff0c;既实现了编写一次&#xff0c;万能匹配&#xff0c;又通过编译器保证了类型安全。 2. 使用泛型 1&#xff09;使用泛型时&#xff0c;把泛型参数<T>替换为需要的class类型&#xff0c;不指定时默认为Obje…

uniapp中配置开发环境和生产环境

uniapp在开发的时候&#xff0c;可以配置多种环境&#xff0c;用于自动切换IP地址&#xff0c;用HBuilder X直接运行的就是开发环境&#xff0c;用HBuilder X发布出来的&#xff0c;就是生产环境。 1.使用HBuilder X创建原生的uniapp程序 选择vue3 2.什么都不改&#xff0c;就…

可达鸭二月月赛——入门赛第四场(周三)题解

可达鸭二月月赛——入门赛第四场&#xff08;周三&#xff09;题解 博文作者&#xff1a;王胤皓 题目&#xff08;可达鸭学员应该能打开&#xff0c;打不开的题解里有题目简述&#xff09;题解(点击即可跳转&#xff0c;里面有我的名字)T1 小可喝水linkT2 \texttt{ }\texttt{ …

06-OpenFeign-使用HtppClient连接池

默认下OpenFeign使用URLConnection 请求连接&#xff0c;每次都需要创建、销毁连接 1、添加ApacheHttpClient依赖 <!-- 使用Apache HttpClient替换Feign原生httpclient--><dependency><groupId>org.apache.httpcomponents</groupId><artifact…

音视频色彩:RGB/YUV

目录 1.RGB 1.1介绍 1.2分类 1.2.1RGB16 1)RGB565 2)RGB555 1.2.2RGB24 1.2.3RGB222 2.YUV 2.1介绍 2.2分类 2.2.1 YUV444 2.2.2 YUV 422 2.2.3 YUV 420 2.3存储格式 2.3.1 YUYV 2.3.2 UYVY 2.3.3 YUV 422P 2.3.4 YUV420P/YUV420SP 2.3.5 YU12 和…

百卓Smart管理平台 uploadfile.php 文件上传漏洞【CVE-2024-0939】

百卓Smart管理平台 uploadfile.php 文件上传漏洞【CVE-2024-0939】 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现手动复现小龙验证Goby验证 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工…

【Linux】vim的基本操作与配置(上)

Hello everybody!今天我们要进入vim的讲解了。学会了vim,咱们就可以在Linux系统上做一些简单的编程啦&#xff01; 那么废话不多说&#xff0c;咱们直接进入正题&#xff01; 1.初识vim vim是一款多模式的文本编辑器&#xff0c;可以对一个文件进行编辑操作。 它一共有三个模…

Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案

目录 发现问题 解决办法 第一步 第二步 第三步 第四步 最后一步 问题解决 发现问题 如果大家也遇到下面这种问题&#xff0c;可能是没有include文件夹中没有bits/stdc.h 解决办法 第一步 打开一个C项目&#xff0c;鼠标移动至头文件上右击&#xff0c;选择转到文档或…

Docker Compose 构建 LNMP 环境:一站式 PHP 网站部署指南

Docker Compose 构建 LNMP 环境&#xff1a;一站式 PHP 网站部署指南 简介环境准备和安装安装 Docker安装 Docker Compose准备项目目录结构 编写 Docker Compose 文件基础结构配置 Nginx 服务配置 PHP 服务配置 MySQL 服务完整的 docker-compose.yml 示例 Nginx 容器配置创建 N…

微信自动预约小程序开发指南:从小白到专家

随着互联网的发展&#xff0c;小程序已经成为了一个备受欢迎的在线预约平台。本文将详细介绍如何使用第三方制作平台&#xff0c;如乔拓云网&#xff0c;来搭建一个从入门到精通的预约小程序。 首先&#xff0c;我们需要登录乔拓云网&#xff0c;并选择一个适合自己的小程序模板…

PdfFactory Pro软件下载以及序列号注册码生成器

PdfFactory Pro注册机是一款针对同名虚拟打印机软件所推出的用户名和序列号生成器。PdfFactory Pro是一款非常专业的PDF虚拟打印软件&#xff0c;通过使用这款注册机&#xff0c;就能帮助用户免费获取注册码&#xff0c;一键激活&#xff0c;永久免费使用。 pdffactory7注册码如…

Node.js之npm单独与批量升级依赖包的方式

Node.js之npm单独与批量升级依赖包的方式 文章目录 Node.js之npm单独与批量升级依赖包的方式npm查看与升级依赖包1. 单独安装或升级最新版本2. 查看依赖但不升级1. npm outdated2. npm update 3. 批量升级新版本4. npm-check-updates1. 全局安装2. ncu查看可升级的版本3. 升级依…