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://www.mzph.cn/news/674328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】-11 MySQL 架构及优化原理

MySQL 架构及优化原理 1 MySQL逻辑架构2 MySQL逻辑架构整体分为三层 :3 MySQL查询过程MySQL 整个查询执行过程,总的来说分为 5 个步骤 :3.1 客户端/服务端通信协议3.2 查询缓存3.3 查询优化3.4 查询执行引擎3.5 返回结果给客户端 4 查询系统性能1 分析查询语句2 索…

Kubernetes实战(二十七)-pod内多容器运行

1 在一个pod中创建多个容器 1.1 YAML文件示例 # cat multi-pods.yaml --- apiVersion: v1 kind: Pod metadata:name: multi-pods spec:containers:- name: blue-pod-containerimage: busybox:1.31.1command: ["sleep"]args: ["1000"]- name: green-p…

05 06 Verilog基础语法与应用讲解

05. 1. 位操作 计数器实验升级&#xff0c;设计8个LED灯以每个0.5s的速率循环闪烁&#xff08;跑马灯&#xff09; 1.1 方法1&#xff1a;使用移位操作符<<来控制led灯的循环亮灭 设计代码 Verilog中&#xff0c;判断操作的时候不加位宽限定是可以的&#xff0c;比如i…

学习Android的第七天

目录 Android EditText 输入框 设置默认提示文本 范例 获得焦点后全选组件内所有文本内容 范例 限制EditText输入类型 android:inputType 值列表 范例 设置最小行&#xff0c;最多行&#xff0c;单行&#xff0c;多行&#xff0c;自动换行 范例 设置文字间隔 范例 …

React环境配置

1.安装Node.js Node.js官网&#xff1a;https://nodejs.org/en/ 下载之后按默认选项安装好 重启电脑即可自动完成配置 2.安装React 国内使用 npm 速度很慢&#xff0c;可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。 ①使用 winR 输入 cmd 打开终端 ②依…

npm后Truffle找不到命令(ubantu20系统)

Truffle找不到命令 方法1方法2 方法1 # 编辑.profile vim ~/.profile # 在.profile末尾把nodejs的解压路径添加到$PATH环境变量中 PATH"$HOME/bin:$HOME/.local/bin:路径:$PATH" source 文件方法2 #ls -l 在nodejs的bin目录下查看truffle链接的脚本文件 truffle -&…

WordPress如何自建txt文本经典语录并随机显示一句话经典语录?

前面跟大家分享的『WordPress集成一言&#xff08;Hitokoto&#xff09;API经典语句功能』一文中就提供有自创API&#xff0c;其中懿古今顶部左上角显示的经典语录用的就是自建一个txt文本文件&#xff0c;然后再在前端网页指定位置随机显示语录。具体操作方法如下&#xff1a;…

突破编程_C++_面试(基础知识(6))

面试题14&#xff1a;什么是 RAII 编程方法 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;是C的发明者 Bjarne Stroustrup 提出的概念,也称为资源获取就是初始化&#xff0c;是一种管理资源、避免泄漏的编程方法。 它的基本思想是在对象的构造函数中获…

Hadoop-生产调优

第1章 HDFS-核心参数 1.1 NameNode内存生产配置 1&#xff09;NameNode 内存计算 每个文件块大概占用 150 byte&#xff0c;一台服务器 128G 内存为例&#xff0c;能存储多少文件块呢&#xff1f; 128 * 1024 * 1024 * 1024 / 150byte ≈ 9.1 亿G MB KB Byte 2&#xff09…

Leetcode 279 完全平方数

题意理解&#xff1a; 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c…

FPGA_工程_按键控制的基于Rom数码管显示

一 信号 框图&#xff1a; 其中 key_filter seg_595_dynamic均为已有模块&#xff0c;直接例化即可使用&#xff0c;rom_8*256模块&#xff0c;调用rom ip实现。Rom_ctrl模块需要重新编写。 波形图&#xff1a; 二 代码 module key_fliter #(parameter CNT_MAX 24d9_999_99…

AT_abl_d 题解

线段树优化 DP 的板子。 题意 给定一个数列&#xff0c;求出它最长的子序列&#xff0c;满足相邻元素之差不大于 k k k。 分析 对于这类最长子序列的题目&#xff0c;有一个 DP 套路&#xff0c;设 d p i dp_i dpi​ 表示以 a i a_i ai​ 结尾的最长合法子序列长度&…

Filter 实现过滤符合条件的请求并落库

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、配置过滤器类 二、定义数据表、实体类、Mapper 2.1 DDL 2.2 实体类 2.3 Mapper 三、创建一个过滤器 四、实现 Nacos 配置…

通用的网站炫酷底部美化代码分享

网站炫酷底部美化代码介绍 这段代码采用了最新的前端技术&#xff0c;确保在各种浏览器和设备上都能完美展现。它包含响应式设计元素&#xff0c;这意味着无论用户是通过电脑、平板还是手机访问您的网站&#xff0c;底部都能呈现出最佳的效果。 此外&#xff0c;我们还特别注…

怎么做?这么做。

一、每天输入 每天读2——3篇文章&#xff0c;可以是行业趋势、技术推文(与自己的工作有关的方向)&#xff0c; 每天坚持一年就会是 1000 篇。 推荐&#xff1a; 大厂的技术博客&#xff1a;纯技术类&#xff0c;美团技术团队、阿里技术团队&#xff1b; 科技资讯类&#xff1…

电子电器架构 —— 网关测试脚本分析

电子电器架构 —— 网关测试 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何 消耗你的人和事,多看一眼都是你的不对。非…

海外云手机的核心优势

随着5G时代的到来&#xff0c;云计算产业正处于高速发展的时期&#xff0c;为海外云手机的问世创造了一个可信任的背景。在资源有限且需求不断增加的时代&#xff0c;将硬件设备集中在云端&#xff0c;降低个人用户的硬件消耗&#xff0c;同时提升性能&#xff0c;这一点单单就…

微软.NET6开发的C#特性——类、结构体和联合体

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;下面我就重点讲讲微软.NET6开发人员需要知道的C#特性。 C#经历了多年发展&#xff0c; 进行了多次重大创新&#xf…

[嵌入式系统-8]:软件(Software)、代码(Code)、程序(Program)三者的区别

概述 在工作中&#xff0c;软件、代码、程序这三个词经常被换用&#xff0c;大部分情况下&#xff0c;这种混用都不会出问题&#xff0c;实际上&#xff0c;它们是不同的概念&#xff0c;有相交的部分&#xff0c;也有不同的地方。本文就简单阐述一下他们的区别。 在计算机领…

c++基本介绍

C是一种高级的编程语言&#xff0c;广泛应用于软件开发和系统编程。它是C语言的扩展&#xff0c;提供了更多的特性和功能。 以下是一个简单的C教程&#xff0c;可以帮助你入门&#xff1a; 安装C编译器&#xff1a; 首先&#xff0c;你需要安装一个C编译器&#xff0c;例如GCC…