Executing JavaScript in Sublime Text
Running a quick check on some JavaScript code can be a bit tedious — and in many cases, it really is not that productive to constantly flip back and forth to the browser. But, there is a simple way to run your JavaScript code inside Sublime.
Out of the box, Sublime can instantly execute code for a number of interpreted languages. Simply hitting Cmd-B (on the Mac) will allow you to see the output at the bottom of the Sublime screen.
This feature set is called the build system. It is also a partially functioning REPL (Read-Eval-Print-Loop) and has some of the same functionality you may be accustomed to on the command line. It really is nice — it facilitates quick debugging iterations during development.
How to Configure Sublime
In this post, I’ll walk you through the simple process of configuring Sublime to execute your JavaScript code.
Step 1: Confirm you have Node installed locally
A prerequisite for teaching Sublime these new tricks is that you must have Node installed on your computer. From the command line, type:
This is to confirm you have Node properly installed. Take note of the path and proceed to Step 2 unless it says “node not found”.
If you are new to front end programming and you don’t have Node installed, you really need to get it. Go to nodejs.org and hit the big green install button. Node and NPM (the Node Package Manager) have become core components to the web. It’s becoming increasingly difficult to get very far in this industry without taking this step. Once you have Node installed, confirm with “which node” and then proceed to Step 2.
Step 2: Add a New Build System to Sublime
Inside Sublime, in the Tools menu, you can create a new build system with Tools > Build System > New Build System.
A build system is just a fancy way of saying “Show me the output.”
This will open a new JSON configuration file for you to edit. Depending if you are running Sublime Text 2 or Sublime Text 3, it may look like this..
This is placeholder code. You should overwrite this file with the following…
The path inside the “cmd” property needs to match the path you see when you type “which node” in the command line.
Save this file and adjust the name to something like “Node.sublime-build”. the file extension must remain intact. In this example, the name that will appear on the Build System dropdown menu will be “Node”.
From the Build System menu, you can set this as your build system. It may also work when set to Automatic.
Give it a test by creating a one-line JavaScript file in Sublime.
Hit Cmd-B and you should see the results displayed at the bottom of your screen inside Sublime (similar to the image at the top of this post). You can close this console at anytime with the Esc key.
Keep in mind that while this is useful for testing certain blocks of code, don’t expect it to work when your JavaScript file is interacting with the DOM through script tags in your HTML file.
I find this build system to be most useful when I’m testing out a function or a block of standalone code.
How to use Node.js with Sublime Text IDE
Learning how to use Node.js with sublime text IDE version 3 enables you to enjoy the efficiency of the IDE. Apart from developing applications quickly, Sublime Text lets you run over 20+ programming languages on it.
First, you will learn how (Ubuntu) Linux installs packages. Next, you will install Node.js from the source. Then, install Sublime Text 3 and run Node.js on the IDE. What is more?
Getting started — Using Node.js with sublime text IDE
This section teaches how packages get installed on (Ubuntu) Linux to ease debugging Node.js or Sublime Text download-related issues.
Linux distributes installation files as packages. A package manager collects the package containing the target program and its dependencies (installed separately).
The most user-friendly package manager for Debian-based distributions like Ubuntu is the apt (Advanced Package Tool). Its alternatives are apt-get and dpkg.
apt traces the packages in the distribution’s list of repositories. Besides, you can gather the packages from their respective repositories and add them to the package manager’s list of repositories stored in /etc/apt/sources.list or /etc/apt/sources.list.d files.
Apart from apt, the application itself could have a package manager. For instance, Node.js has npm (Node package manager) for installing and uninstalling packages. Also, you can use nvm (Node Version Manager) to manage various Node.js versions on your system.
Here is how to use the package managers.
Step-1: Install Node.js
Does Node.js exist?
We can check the binaries.
or Node.js and npm versions.
If none of the above methods locates Node.js or npm, you have not installed Node.js on your machine.
Let’s install Node.js right away.
Install Node.js from the source
Here, we will install Node.js from the source because it allows us to choose a Node.js version to install.
Update and upgrade the system in readiness for a new installation.
Download Node.js v18 and above from the sources.
The system adds the sources to the repositories.
Then, it updates the repositories before telling us how to install Node.js on the system.
Let’s install Node.js using the specified command.
If your system lacks the curl tool, install it with this command.
Verify the installation by checking node and npm versions.
Now that we have installed Node.js, we can install Sublime Text before learning how to use Node.js with sublime text IDE.
Step-2: Install Sublime Text IDE
Import the GPG keys for Sublime Text 3.
Get the Sublime Text repository.
Now install Sublime text from the Ubuntu repositories.
We can find Sublime Text in the Applications or search it using the Activities menu.
Step-4: Develop a simple Node.js application using Sublime Text IDE
In this section, you will learn how to use Node.js with Sublime Text IDE by building a simple web server.
4.1 Create a project directory and open it with Sublime Text
Make the project directory and script file.
Now open the project in Sublime Text.
4.2 Run Node.js in Sublime Text
Access the Command Palette using the shortcut: ctrl+shift+p.
Search Package Control Install Package by typing: pkgctl.
We get a confirmation message.
Click OK, then reopen the Command Palette and search Install Package.
Search for Nodejs and click on it to install it on Sublime Text.
Lastly, modify the Node.js run command by visiting Preferences -> Package Settings -> Nodejs -> Settings — User
and changing the value of "node_command": false
Now we can build a Node.js program from Sublime Text using the shortcut: ctrl+b. First, let’s create the web server.
4.3 Create and run a web server on Sublime Text
Update the index.js file with the following content.
We import the http module’s createServer() function and use it to create the web server, which listens for requests on port 8000.
On running the script file (ctrl+b), the terminal interface echoes The server runs on http://localhost:8000.
We can visit the / URL and see whether the page reads Hello hello! Now you know how to use Node.js with sublime text IDE on Ubuntu 22.04, as we have specified in the code.
Copy and run the URL on any browser’s search bar.
And voila, we get the expected response!
Conclusion
This tutorial taught you how to use Node.js with sublime text IDE. You installed Node.js and Sublime Text 3 on Ubuntu 22.04. Then configured Sublime Text to run Node.js without leaving the IDE. Lastly, you built a web server on the IDE.
It is your turn to practice the Sublime shortcuts and enjoy building Node.js applications on the IDE.
Didn’t find what you were looking for? Perform a quick search across GoLinuxCloud
If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.
For any other feedbacks or questions you can either use the comments section or contact me form.
How to run node app with sublime text
Cmd+Shift+P , search for «Nodejs::Default File Settings» ,it will open file «Node.js.sublime-settings». you’ll see:
«node_command»: false,
«node_command»: «/usr/local/bin/node»,
if the node path is not the same with above, find it and change to yours.
If you want to fix the plugin’s path yourself. One option is changing Nodejs.sublime-build. It’s located in the packages directory of sublime:
Note: On latest OS X versions the Library folder is hidden. If that’s the case, from the menu select Go > Go to Folder. and type
Lastly, open your *.js file and press command + b. Everything should just work fine now.
Linux Users: This file is identical across all operating systems. Finding the path to Nodejs.sublime-build may require running a search. In most cases it’s located in
To run nodejs on sublime text, install node package «node dev» then create a sublime text build, the code should look like this
Now to run a nodejs app, go to menu->tools->build.
What is going on is that you don’t have the right PATH setup for your terminal.
try this command in a regular terminal:
I peronaly get this:
As you can see this path is not in you environement path to add it in a regular terminal you would edit .bashrc or .bash_profile and add this line
Here well you just have to look at the doc and find out that you need to modify the configuration file.
If you have a JavaScript file open, by selecting selecting Tools -> Build Systems -> Nodejs and then hitting Ctrl + B, you will activate the node build system on your file and node will try to run it. You may need to add a path variable to the settings object for this if your node executable is not found
Setting Up Sublime Text for Javascript Development
Sublime Text is one of the best light-weight text editors in existence right now. It is a favourite of many developers, b/c of its beautiful UI, speed and a diverse ecosystem of extensions. This article explains how to use Sublime Text to create a powerful, yet light-weight Javascript development environment.
At the end of these instructions, you’ll be able to do the following in Sublime:
- Choose from many beautiful syntax highlight themes for your code, be it Javascript, JSON, HTML, S(CSS), Vue, etc.
- Automatically lint and format your code as you type, or on every save.
- Work with version control using Git from Sublime.
- Execute Javascript code in current file and get immediate results
- Transpile Javascript code in current file into ES5
These instructions show the paths and versions as they were on my Linux machine. Please use your common sense to change these appropriately for your environment.
Installing Prerequisite Tools
Install NVM
Follow the instructions here: https://github.com/creationix/nvm#installation-and-update, but it will be something like the following:
Install ESLint
Install Babel
Install Prettier
Install VueJS
Sublime Setup
- Go to Tools -> Command Palette (Learn to use “Ctrl-Shift-P” – you will use it very frequently, b/c it’s awesome!), Type: ‘Install’, select ‘Install Package Control‘
- Repeat this step for all the packages listed below. Press Ctrl-Shift-P, and Type: ‘Install Package‘, and then install the following packages:
-
- SublimeLinter
- Babel
- Pretty JSON
- JsPrettier
- SublimeLinter-eslint
- ESLint-Formatter
- Autocomplete Javascript with Method Signature
- HTML-CSS-JS Prettify
- Vue Syntax Highlight
- SideBar Enhancements
- GitGutter
- BracketHighlighter
- Markdown Preview
- MarkdownLivePreview
- SublimeLinter-java
Package Configuration
Global ESLint Settings
/.eslintrc.js file. ESLint will look there for settings when it cannot find a local project-specific config file.
Configure Babel
Go to Preferences -> Package Settings -> Babel -> Settings - Default. Update the path:
Configure ESLint Formatter
Go to Preferences -> Package Settings -> ESLint Formatter -> Settings. Update the paths:
Configure JsPrettier
Go to Preferences -> Package Settings -> JsPrettier -> Settings - Default. Update the path:
Configure GLobal Theme
Go to Preferences -> Theme -> select 'Adaptive.sublime-theme'
Configure JS Prettify
Go to Preferences -> Package Settings -> HTML / CSS / JS Prettify -> Plugin Options - Default. Update the path:
Configure Global Settings
Go to Preferences -> Settings. Add:
You should now have everything you need for Javascript development. Note that we have installed multiple formatters that do the same thing. This is b/c they are good at different things, and this gives you options. You’ll need to explore the capabilities by opening a source file, selecting some text (or not), and using the Command Palette (Ctrl-Shift-P) to type things like “Format” or “lint” or “Pretty” or “JSON” or “Syntax“, to see what capabilities you have, and which packages you like best for which tasks.
Setting up in-place REPL and Transpile
The following steps will allow you to run any javascript code in the currently open file immediately. You will also be able to transpile the code into ES5 javascript instead of running it.
First, create a Babel config file:
Go to Tools -> Build System -> New Build System. Paste this into the file and save with a name like "JavaScript Builder.sublime-build":
Whenever you are in a JavaScript file, you can now press Ctrl-Shift-B, and select one of your build variants. Ctrl-B will run the last variant you selected.
-