Sublime Text

How to Run Code in Sublime Text in Steps

November 11, 2024

Running code directly within Sublime Text is a straightforward process that can significantly streamline your development workflow.

Whether you’re writing in Python, JavaScript, HTML, or CSS, this powerful text editor offers various features and plugins that make executing and debugging your code efficient.

By setting up the right build systems and configuring essential plugins, you can transform Sublime Text into a versatile IDE (Integrated Development Environment).

This guide will teach you how to configure Sublime Text to run scripts, customize your editor settings, and utilize packages that enhance coding efficiency.

By the end of this article, you’ll be able to seamlessly execute your projects, manage syntax highlighting, and leverage advanced editor commands.

We’ll cover specifics like integrating the terminal, compiling languages like Java and C++, and diving into useful plugins such as Package Control and Anaconda. Let’s jump in and simplify your coding process in Sublime Text.

How to Run Code in Sublime Text in Steps: Quick Workflow

Step-by-Step Guide to Running Code in Sublime Text

1. Install Sublime Text

Ensure you have the latest version of Sublime Text installed on your computer. You can download it from the official Sublime Text website.

2. Create a New File

Open Sublime Text.
Use File > New File or press Ctrl + N (Windows) / Cmd + N (Mac) to create a new file.
Write your code in the new file. For example, for Python:
python
print("Hello, World!")

3. Save the File

Save your file with the appropriate extension for the language you are using. For Python, save it as example.py using File > Save As or Ctrl + S (Windows) / Cmd + S (Mac).

4. Select the Build System

Go to Tools > Build System and select the appropriate build system for your code. For Python, you can select Python or set it to Automatic if you want Sublime to detect it automatically.

5. Run the Code

Press Ctrl + B (Windows) or Cmd + B (Mac) to run your code. The output will be displayed in a panel at the bottom of the Sublime Text window.

6. Troubleshooting

If you encounter issues:

Ensure that Python is installed and added to your system’s PATH if you’re using Python.
If your code requires user input and does not work with the standard build system, consider using plugins like Terminus, which allows for interactive terminal sessions within Sublime Text.

7. Using Plugins for Enhanced Functionality

For more complex projects or languages:

Install plugins via Package Control to enhance functionality, such as running code in a new tab or managing environments more effectively. Using plugins like SublimeREPL or Terminus can allow for better interaction with your scripts.

Example Code Execution

Here’s how it looks when running a simple Python script:

Write:
python
print("Hello, World!")
Save as hello.py.
Select Python as the build system.
Press Ctrl + B to execute.

The output should appear in the build results panel below.By following these steps, you can efficiently run code in Sublime Text across various programming languages while leveraging its powerful features and community plugins for enhanced coding experiences.

Getting Started with Sublime Text

maxresdefault How to Run Code in Sublime Text in Steps

Installation Guide

Step-by-step installation on Windows

First, head over to the Sublime Text website.
Download the installer for Windows.
Open the installer file and follow the prompts. Just click “Next” until you reach “Finish”.
Locate Sublime Text in your Start Menu and launch it.

Step-by-step installation on Linux

Open the terminal.

Add the Sublime Text repository with:

sudo add-apt-repository ppa:webupd8team/sublime-text-3

Update your package list:
```
sudo apt-get update
```

Install the editor:

sudo apt-get install sublime-text-installer

Launch Sublime Text via terminal or app menu.

Step-by-step installation on macOS

Visit the Sublime Text website.
Download the macOS version.
Open the downloaded file and drag the Sublime Text app to the Applications folder.
Open Sublime Text from your Applications folder.

Overview of the Sublime Text Interface

Main components: editor window, sidebar, and status bar

Editor Window: This is your primary workspace. It’s where you’ll write, edit, and run your code. It supports multiple file types like HTML, CSS, JavaScript, Python, and more.

Sidebar: This is your project navigator. It helps you to manage and organize your project files efficiently. Quickly open, close, and switch between files and folders.

Status Bar: Located at the bottom, this bar provides quick insights about your current file, such as syntax type, encoding, line endings, and tab size.

File Menu: Open, close, save, and manage your documents.
Edit Menu: Common text editing functions like undo, redo, copy, and paste.
Selection Menu: Options for multi-line editing, column selection, and more.
View Menu: Toggle various interface components like the sidebar, mini-map, and console.
Goto Menu: Navigate between files, lines, and symbols swiftly.
Tools Menu: Build systems, command palette access, and package control.
Preferences Menu: Customize Sublime Text with settings, themes, and key bindings.

Basic Functionalities in Sublime Text

Creating and Editing Documents

Opening and creating files

Open Sublime Text. Click File in the top menu. Choose Open File... to browse and select an existing file. To create a new file, simply click New File or press Ctrl+N. Your workspace is ready. That’s your blank canvas.

Saving and organizing project files

Finished with your edits? Hit Ctrl+S to save your work, or navigate to File > Save. For project management, use the Projects option in the top menu. Quickly switch between projects without losing track. Drag and drop files into the sidebar to keep everything organized. Easy navigation, seamless workflow.

Tips for efficient file management

Keep related files in the same directory for easy access. Use meaningful file names. Sublime Text’s sidebar lets you collapse and expand folders. Use Ctrl + P for the Goto Anything feature to switch files in a snap. Utilize Cmd + Shift + T to reopen recently closed files.

Core Editing Techniques

Multi-line editing for simultaneous changes

Hold Ctrl (or Cmd on macOS) and click in multiple locations to add cursors. Edit several lines at once. Quick, powerful. Save time.

Shortcuts for basic text manipulation

Speed up editing:

Ctrl + C to copy.
Ctrl + V to paste.
Ctrl + X to cut.
Ctrl + F to find.
Ctrl + H to replace.

Master these shortcuts. Efficient coding or writing hinges on fluid text manipulation.

Snippets and macros for frequently used text blocks

Boost productivity with snippets. Predefined code or text blocks accessible with a few keystrokes. Go to Tools > Snippets to explore. Create your own. Save time.

For repetitive tasks, macros are your friend. Record a sequence of actions (e.g., repetitive formatting) by going to Tools > Record Macro. Save and bind them to a key for easy access.

Advanced Editing and Customization

Text and Code Snippets

How to create custom snippets for repetitive text/code

Custom snippets save time. Go to Tools > Developer > New Snippet.... A template opens in the editor. Replace the <![CDATA[]]> placeholders with your code or text block. Define the trigger inside <tabTrigger></tabTrigger>. Save the snippet with a .sublime-snippet extension in the Packages/User directory. Short and sweet.

Saving, editing, and using snippets for various file types

Saving is easy. Once you’ve created your snippet, hit Ctrl+S to save. To edit, just open the .sublime-snippet file and make changes directly. To use the snippet, type the trigger and press Tab. The snippet expands, filling your code with predefined text blocks. Works like magic for HTML, CSS, Python, JavaScript—name it.

Key Bindings and Shortcuts

Defining custom key bindings to streamline workflows

Key bindings are essential. Navigate to Preferences > Key Bindings. It opens up two files: the default and the user preferences. Add custom key bindings in the user preferences to avoid overwriting defaults. Example:

{ "keys": ["ctrl+alt+n"], "command": "new_file" }

Now, Ctrl+Alt+N creates a new file. Efficiency at its best.

Overview of essential keyboard shortcuts for speed

Shortcuts save precious seconds:

Ctrl + P for Goto Anything
Ctrl + D to select the next occurrence of the selected text
Ctrl + Shift + L for multiple line selection
Ctrl + K, Ctrl + B to toggle the sidebar

Mastering these shortcuts transforms the way you code, propelling you into a workflow that can rival the fastest developers.

Customizing Themes and Color Schemes

Installing new themes for UI personalization

Personalization matters. Open Package Control via Ctrl+Shift+P, type Package Control: Install Package, and then search for Theme - XYZ (e.g., Theme - Soda). Select it, and it’s installed. Apply it by adding the following line to your user preferences:

"theme": "Soda Light 3.sublime-theme"

Now, it feels like your own space.

Selecting and modifying color schemes for syntax highlighting

Syntax highlighting is key. To change color schemes, go to Preferences > Color Scheme. Choose from the list. For custom schemes, download via Package Control or create your own by editing .tmTheme files. Adjust colors as needed, especially for CSS, HTML, JavaScript, or any syntax. This enhances readability and reduces eye strain, vital for prolonged coding sessions.

Enhanced Functionality Through Plugins

Understanding Package Control

Setting up Package Control to access plugins

First thing’s first. To supercharge Sublime Text, you need Package Control.

Open the command palette with Ctrl+Shift+P. Type “Install Package Control” and hit Enter. Wait for the confirmation message. It’s done.

Now, you have the gateway to countless plugins.

How to search, install, and manage plugins effectively

Once Package Control is installed, open the command palette again. Type “Package Control: Install Package” and press Enter.

A list of available packages appears. Type in the name of the plugin you want, select it, and press Enter. It’s that simple.

To manage existing plugins, use “Package Control: List Packages,” “Remove Package,” and “Disable Package” commands. Efficient, right?

Essential Plugins for Developers

SublimeCodeIntel for code intelligence and autocompletion

Look no further for code intelligence. With SublimeCodeIntel, you get advanced autocompletion for languages like Python, JavaScript, and Ruby. Install it via Package Control.

Navigate to Preferences > Package Settings > SublimeCodeIntel to tweak settings. Boosts productivity.

JsFormat and JSHint for JavaScript formatting and linting

JavaScript developers, take note. JsFormat ensures your code is beautifully formatted. JSHint catches errors and enforces coding standards.

Both can be installed through Package Control. Access JsFormat from the command palette by typing “JsFormat: Format Document.” For JSHint, just open a JavaScript file and see it in action.

Additional recommended plugins: Emmet, SublimeLinter

Want more? Emmet speeds up HTML/CSS workflows with dynamic shortcuts. Type in abbreviations and expand them into full code blocks. Game-changer.

SublimeLinter supports linting for many programming languages. It highlights issues in your code in real-time. A must-have for error-free coding.

Essential Plugins for Writers

MarkdownEditing for Markdown syntax

MarkdownEditing is a writer’s dream. Install it using Package Control. Enjoy syntax highlighting, auto-completion, and better Markdown preview.

Edit your .md files with ease. Tailor configurations in Preferences > Package Settings > MarkdownEditing.

Spell check and dictionary plugins

Illegible text will be a thing of the past! Spell Check plugins ensure your writing remains pristine.

Check out Hunspell or native packages available via Package Control. They integrate seamlessly with your workflow, catching those pesky typos.

Distraction-Free mode for focused writing

Activate Distraction-Free Mode by pressing F11. Your workspace becomes minimalistic, hiding UI elements and centering your text. Perfect for zero distractions.

Combine this with spell check and Markdown plugins for the ultimate writing environment.

Running Code in Sublime Text

Overview of Build Systems

What build systems are and how they function in Sublime Text

Build systems are your gateway to executing code. They automate tasks like running scripts and compiling files. In Sublime Text, a build system is a set of instructions that tells the editor how to run your code.

Navigate to Tools > Build System. You see options tailored for various languages. Select one, hit Ctrl+B, and your code executes right there in the editor. No external terminal needed.

Configuring default build systems for common languages (e.g., Python, JavaScript)

Default build systems get you started fast. If you’re writing Python, create a .py file, ensure Python is selected under Tools > Build System, then press Ctrl+B. Easy.

For JavaScript with Node.js, it’s much the same. Just ensure your .js file is the active one, Node.js is installed, and the corresponding build system is selected. Press Ctrl+B to see your JavaScript come alive.

Custom Build System Configuration

Creating a custom build system for JavaScript with Node.js

Want more control? Custom build systems are your ally. Go to Tools > Build System > New Build System. A JSON file template appears. Here’s a quick setup for Node.js:

{
    "cmd": ["node", "$file"],
    "selector": "source.js"
}

Save this with a .sublime-build extension. Now, your JavaScript files use Node.js for building automatically.

Configuring build systems for C/C++ with file I/O setup

C/C++ involves compilation. Create another custom build system. Here’s an example for C++:

{
    "cmd": ["g++", "$file", "-o", "${file_path}/${file_base_name}"],
    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "selector": "source.c, source.c++",
    "variants":
    [
        {
            "name": "Run",
            "cmd": ["bash", "-c", "cd \"${file_path}\" && ./\"${file_base_name}\""]
        }
    ]
}

Save it, select it, and control your compilation and execution with Ctrl+B and Ctrl+Shift+B.

Running code directly within Sublime Text using shortcuts

Executing code is seamless. Open your file, press Ctrl+B, watch the magic happen. If you configured a custom system, Ctrl+Shift+B will show options like “Run”. Practical.

Specialized Features for Developers

Working with Version Control

Integrating Sublime Text with Git, Mercurial, and other version control systems

Version control is a developer’s lifeline. To integrate Git, Mercurial, or others, start with Package Control. Search for and install Git or Hg packages.

Once installed, you can use commands directly within Sublime Text. Navigate to Tools > Command Palette, then type Git: Init to initialize a repository. Seamlessly manage your source code without leaving the editor.

Basic Git commands and plugins for managing version control

Now, let’s simplify. Here are foundational Git commands to get you started:

Commit: Ctrl+Shift+P and type Git: Commit. Add a message and save.
Push: Same steps, Git: Push. Your changes are live.
Pull: Use Git: Pull for updates.

Plugins like GitGutter show real-time changes in the gutter. Sublime Merge offers a visual interface. These tools keep your workflow smooth, error-free, and efficient.

Syntax-Specific Settings

Customizing settings for different languages (syntax highlighting, tab size)

Different languages, different needs. Customize settings to suit each. Open Preferences > Settings - Syntax Specific.

Here, you can set syntax highlighting, adjust tab size, or enable auto-completion for your specific language. For instance, in a Python file:

{
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "auto_complete": true
}

Personalize your coding environment effortlessly.

Applying JSON configurations for personalized syntax environments

Need more customization? Use .sublime-settings files. These accept JSON configurations. Example for C++:

{
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "word_wrap": "false"
}

Save it in the Packages/User directory. Your workspace now matches your coding preferences. More productive, less hassle.

Using Linting Tools

Overview of linting in Sublime Text

Linting is essential. It flags syntax errors, styling issues, and bad practices in real-time. Sublime Text integrates smoothly with linters through SublimeLinter.

Setting up SublimeLinter for error detection and code quality checks

Install SublimeLinter via Package Control. Open Preferences > Package Settings > SublimeLinter > Settings. Configure your linter like this:

{
    "linters": {
        "eslint": {
            "selector": "source.js"
        }
    }
}

Now, coding issues for JavaScript, Python, Ruby are highlighted as you type.

Productivity and Workflow Optimization

Command Palette and Project Management

Using the Command Palette to access commands quickly

Speed is everything when you’re in the zone. The Command Palette is your best friend. Open it with Ctrl+Shift+P.

Need to install a package? Type “Package Control: Install Package”. Want to change syntax highlighting? Type “Set Syntax: Python”. It’s all right there, just a few keystrokes away. No menus. No fuss.

Managing multiple projects and organizing files in Sublime Text

Got several projects? Use the Project > Add Folder to Project... option. This lets you manage multiple project directories simultaneously. Everything you need, neatly organized in the sidebar.

Switching between projects? Easy. Project > Quick Switch Project... does the trick. Quickly jump between your work, stay efficient.

Automating Tasks with Macros

Recording and saving macros for repetitive tasks

Repetition can be a time-killer. Enter macros. Hit Ctrl+Q to start recording, perform your repetitive tasks, and hit Ctrl+Q again to stop. Save it via Tools > Save Macro....

Next time, just play the macro. Instant productivity boost. Markdown, CSS, or Python—doesn’t matter.

Assigning macros to custom key bindings for quick execution

Why not make it even faster? Assign your saved macros to custom key bindings. Open Preferences > Key Bindings, and add:

{ "keys": ["ctrl+shift+m"], "command": "run_macro_file", "args": {"file": "Packages/User/YourMacro.sublime-macro"} }

Now, Ctrl+Shift+M runs your macro. Effortless.

Column Selection and Multi-Cursor Editing

Techniques for selecting and editing in columns

Column selection is a lifesaver for data manipulation. Hold Ctrl (or Cmd on macOS) and drag with your mouse to select a block of text. Makes aligning variables, editing tables, or modifying lists a breeze.

For even more precision, use Ctrl+Shift+Arrow keys.

Practical applications of multi-cursor editing for data entry and alignment

Multi-cursor editing? Powerful. Use Ctrl and click at multiple points to place multiple cursors. Edit them all at once. Perfect for bulk data entry, or aligning code blocks.

Example: renaming multiple instances of a variable across different lines in your JavaScript file? Multi-cursor’s got your back. Text, code—doesn’t matter, versatility is key.

Debugging and Testing Code

Debugging JavaScript and PHP Applications

Setting up Web Inspector for JavaScript debugging

JavaScript can be a tangled mess without proper debugging. The Web Inspector is your go-to tool. Open your browser’s developer tools (F12). Go to the Console tab.

Make sure “Preserve Log” is checked. Then load your script with debug points using debugger; statements. Instant insight into your HTML, CSS, and JavaScript.

For Node.js, use this:

node --inspect-brk your_script.js

Navigate to chrome://inspect, click on Open dedicated DevTools for Node, and step through your JavaScript.

Using the Xdebug plugin for PHP debugging

PHP needs finesse. Install Xdebug. Modify php.ini:

zend_extension="xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host="localhost"
xdebug.remote_port=9000

Restart Apache or Nginx.

For Sublime Text, install Xdebug Client via Package Control. Set breakpoints by clicking the gutter. Start your browser with ?XDEBUG_SESSION_START=key.

Unit Testing with Python and JavaScript

Configuring Sublime Text for Python unit tests with unittest framework

Testing Python? Use unittest. Create a test file:

import unittest

class TestMath(unittest.TestCase):
    def test_addition(self):
        self.assertEqual(add(1, 1), 2)

if __name__ == '__main__':
    unittest.main()

In Sublime Text, open Tools > Build System > New Build System. Add:

{
    "cmd": ["python", "-m", "unittest", "discover"]
}

Save it as unittest.sublime-build. Select this build system, run Ctrl+B, and see your tests in the console.

JavaScript testing using JsFormat and JSHint plugins

JavaScript testing relies on clarity. Use JsFormat for code styling:

{
    "cmd": ["node", "${file}"],
    "selector": "source.js"
}

Tools > Build System > New Build System. Save it as nodejs.sublime-build.

For linting, install JSHint via Package Control:

{
    "cmd": ["jshint", "$file"],
    "selector": "source.js"
}

Save as jshint.sublime-build.

Distraction-Free and Focused Work Modes

Entering Distraction-Free Mode

How to enable and configure Distraction-Free Mode

Ever felt your screen cluttered? Enter Distraction-Free Mode.

Hit F11. Bam! Everything falls away. You’re left with a clean slate. No sidebars. No tabs. Just your code or text, floating in space.

Configure as needed. Go to View > Enter Distraction Free Mode. Your canvas, laser-focused.

Benefits for focused writing and coding

Silence the noise. Distraction-Free Mode lets you concentrate. No pop-ups. No menus fighting for your attention. Whether writing Markdown or editing CSS, it’s pure zen.

This mode is tailored for those deep work sessions. Your brain gets to use its full bandwidth.

Configuring Display Settings in Distraction-Free Mode

Customizing the appearance with line numbers, word wrap, and gutter

Need line numbers back? Sure thing. Open the Command Palette with Ctrl+Shift+P. Type “Toggle Line Numbers”.

For word wrap, same trick. Type “Toggle Word Wrap”. Gutter, check. Customize this sanctuary for your needs.

Adjusting screen centering and wrap width for clarity

Everything centered. Adjust the wrap width. Go to Preferences > Settings. Add:

{
    "word_wrap": "true",
    "wrap_width": 80
}

Perfect readability. No more scanning left to right endlessly.

Visual clarity is key. These settings help keep the eyes relaxed, focusing on what matters. Whether you’re debugging a JavaScript file or working out how to run code in Sublime Text, the environment adapts to your workflow.

FAQ on How To Run Code In Sublime Text

How do I set up a build system in Sublime Text?

To set up a build system in Sublime Text, go to Tools > Build System > New Build System. A new file will open where you can define your build commands. Save the file in the default directory. Now, you can run your code by using Ctrl+B.

Can I run Python code directly in Sublime Text?

Yes, you can run Python code directly in Sublime Text. Use the default build system for Python. Open a .py file and press Ctrl+B. For better experience, install plugins like Anaconda. Make sure Python is installed and available in your system’s PATH.

How do I execute JavaScript in Sublime Text?

To run JavaScript code, set up a build system for Node.js. Go to Tools > Build System > New Build System and add the command "cmd": ["node", "$file"]. Save it. Open your .js file, and press Ctrl+B to execute. Ensure Node.js is installed on your system.

Can I compile and run C++ code in Sublime Text?

Yes, you can compile and run C++ code. Create a new build system with g++ commands. Go to Tools > Build System > New Build System, add "cmd": ["g++", "$file", "-o", "$file_base_name"], and save it. Open your .cpp file, press Ctrl+B., and your code will compile.

How to run HTML and CSS code in Sublime Text?

Running HTML and CSS code involves previewing in a browser. Install the View in Browser plugin via Package Control. Right-click the .html file and select View in Browser. This will open your file in the default web browser. Make sure your file paths are correct.

What plugins should I use to enhance code execution?

Several plugins can enhance code execution in Sublime Text. Package Control is essential for managing other plugins. Try Terminus for terminal access and Anaconda for Python development. For JavaScript, use JSHint. Explore and find what best fits your coding stack.

How do I run code in Sublime Text with different environments?

Use virtual environments or specific build systems to run your code in different environments. For example, in Python, use Virtualenv. Set up the build system to point to the virtual environment’s Python executable. This helps manage dependencies and versions uniquely.

Can Sublime Text be used as an IDE?

Absolutely, Sublime Text can function like an IDE. Install relevant plugins like Anaconda for Python, Terminus for terminal, and LSP for Language Server Protocol support. Customize key bindings and settings. Sublime Text’s flexibility allows you to mold it as per your specific development needs.

How do I debug code in Sublime Text?

Debugging in Sublime Text requires plugins. For Python, Anaconda offers basic debugging features. Use GDB for C++. Integrate external debuggers by customizing build systems.

For JavaScript, Node.js debugging can be done via terminal access. Sublime Text doesn’t natively support in-depth debugging.

Is there a way to automate running scripts?

Yes, you can automate running scripts by using macros and build systems. Create a macro to perform repetitive tasks.

Go to Tools > Record Macro, perform the actions, and save it. For automation, integrate it into your build system commands. This streamlines and simplifies repetitive tasks.

Conclusion

Understanding how to run code in Sublime Text allows you to leverage its powerful capabilities to streamline your development process. With the right configurations, including setting up build systems, using useful plugins like Anaconda for Python, and Terminus for terminal access, you can execute and debug your code swiftly. Sublime Text offers a versatile environment for coding in various languages such as JavaScript, HTML, and C++.

By customizing the editor settings and integrating the Package Control plugin, you can personalize your workflow to suit any development needs. Automating tasks through macros and tailored build systems further enhances your efficiency. Utilize these techniques and tools to run and manage scripts directly within Sublime Text.

Maximizing Sublime Text’s full potential not only enhances productivity but also streamlines the development process, providing a seamless transition from code writing to execution. Implement these strategies and experience a significant boost in your coding efficiency and workflow management.

Author
Recent Posts

Bogdan Sandu

Bogdan is a seasoned web designer and tech strategist, with a keen eye on emerging industry trends.

With over a decade in the tech field, Bogdan blends technical expertise with insights on business innovation in technology.

A regular contributor to TMS Outsource's blog, where you'll find sharp analyses on software development, tech business strategies, and global tech dynamics.