Sublime Text 3 is a powerful code editor that has become a popular choice for developers worldwide due to its intuitive interface, extensive community support, and broad range of features. In this article, we will explore the features that make Sublime Text 3 an ideal tool for full stack development.
We will also offer an overview of full stack development, which involves combining HTML5, mobile development, JavaScript, Django, and Flask to create responsive and dynamic web applications.
Features
Split Layouts
Split Layouts are a feature of Sublime Text 3 that enables the simultaneous editing of multiple files and the use of multiple panes. With Split Layouts, developers can create a testing environment for Test Driven Development (TDD) and manipulate front-end code while referring to the back-end code.
It is also helpful for reviewing code changes and allows code editors to keep the current project open and still access multiple coding environments.
Vintage Mode
Sublime Text 3’s
Vintage Mode provides support for vi commands, which are essential for experienced Unix command-line interface users. Vi, developed by Bill Joy, combines the text editor ability with programmatic mode to provide an Agile way to navigate large code files efficiently.
Vintage Mode provides experienced coders with the same shortcuts in Sublime Text 3.
Chrome-like Tabs
Chrome-like Tabs, a feature available in the newer versions of Sublime Text, provide developers with a faster way to navigate between different files. These tabs function like Chrome’s tabs and make file navigation more efficient and streamlined.
This feature is particularly useful for projects that have multiple modules or extensive documentation.
Automatic Loading of the Last Session
Sublime Text 3’s Automatic Loading feature ensures that developers get back to work as soon as possible. Whenever developers open Sublime Text 3, it will automatically load up the files that were open during the previous session, allowing them to get back to work without having to navigate back to the required files.
This feature is particularly useful when working on long-term projects.
Code Snippets
Sublime Text 3’s
Code Snippets feature is helpful for increasing productivity and saving time when coding. The code snippets are small pieces of reusable code that can be inserted using a simple command.
It allows developers to create a library of commonly used code snippets, which can be easily accessed and inserted into programs.
Full Stack Development
Full stack development involves creating a complete web application from scratch. It combines the front-end (client-side) development, back-end (server-side) development, and database management processes.
Full stack developers use a mix of HTML5 and CSS to design the user interface, JavaScript to enable dynamic and real-time page updates, and mobile development frameworks like React Native and Swift, to reach out to users on mobile devices. They also use back-end frameworks like Django and Flask to build server applications that will execute commands and communicate with external APIs (Application Programming Interfaces) to handle external data.
Conclusion
The Sublime Text 3 code editor is a popular choice for web developers worldwide, and it is well-positioned to handle full stack development. The features listed above, such as Split Layouts,
Vintage Mode,
Chrome-like Tabs, Automatic Loading, and
Code Snippets, make Sublime Text 3 an efficient and productive development environment.
Combining Sublime Text 3 with full stack development tools like HTML5, mobile development, JavaScript, Django, and Flask can produce high-quality web applications that cater to their users’ needs.
Customizing Sublime Text 3
Sublime Text 3 is a versatile code editor with many built-in features. However, it is also highly customizable, and developers can add more features and functionality by installing various packages and customizing Sublime Text’s settings.
In this article, we will explore how to install Package Control, create a Custom Settings File, and install useful packages for Sublime Text 3.
Install Package Control
Package Control is a package manager for Sublime Text 3 that allows users to easily install, update, and remove packages. To install Package Control, you first need to open the Sublime Text 3 console by pressing CTRL + ` on Windows or CMD + ` on macOS.
Once the console is open, paste the following code:
“`
import urllib.request,os;pf = ‘Package Control.sublime-package’; urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler( {‘http’: ‘http://user:[email protected]:port’, ‘https’: ‘https://user:[email protected]:port’} ) ) ); open(os.path.join(sublime.installed_packages_path(),pf), ‘wb’).write(urllib.request.urlopen(‘http://packagecontrol.io/’+pf.replace(‘ ‘,’%20’)).read())
“`
This code will install Package Control by downloading and installing the Package Control.sublime-package file. After the installation process is complete, you can access Package Control by pressing CTRL + SHIFT + P on Windows or CMD + SHIFT + P on macOS and typing “Package Control.”
Create a Custom Settings File
Sublime Text 3 comes with many built-in settings, but sometimes you may want to customize some of these settings or add new ones. You can create a custom settings file to do this.
To create a custom settings file, go to Preferences > Settings in the menu bar. This will open two files: Preferences.sublime-settings – Default and Preferences.sublime-settings – User.
The first file is read-only, so you should not modify it. Instead, you should copy any settings you want to modify to the second file.
The Preferences.sublime-settings – User file is a JSON-based settings file, so you should follow the rules of JSON when adding or changing settings. For example, you can change the font size by adding the following line to the file:
“`
“font_size”: 14,
“`
You can also synchronize your Sublime Text settings across multiple computers by storing your Preferences.sublime-settings file in a Dropbox folder.
Themes
Sublime Text 3 comes with many built-in themes, but you can also install custom themes to change the appearance of the editor. One popular theme is ColorSublime, which provides a library of over 500 custom themes that you can install directly from Package Control.
Packages
Sublime Text 3’s customizability also comes from its plugin ecosystem, and developers can choose from a wide range of packages to add functionality to the editor. Here are some useful packages for Sublime Text 3.
SideBarEnhancements
SideBarEnhancements is a package that adds many useful menu options to the sidebar. These options include the ability to create new files and folders, duplicate files, open files in a new window, and more.
This package can help streamline your workflow.
Anaconda
Anaconda is a plugin for Python development that provides many IDE features, including autocompletion, linting, code complexity, Goto Definitions, Find Usage, and Show Documentation. This package can help you write Python code more efficiently and with fewer errors.
Djaneiro
Djaneiro is a package for Django development that provides many useful tools, including Django templating with keyword highlighting and code snippets. This package helps Django developers write code faster and more accurately.
requirementstxt
requirementstxt is a package that helps you manage Python package versions by autocompleting package names. All you need to do is type the name of the package, and the package version will be suggested automatically.
This package can help you ensure that your Python environments have the correct package versions.
SublimeLinter
SublimeLinter is a package that provides syntax highlighting and linting for many programming languages, including Python, JavaScript, and PHP. It can help you follow best practices and style guides, such as PEP 8 for Python.
You can also use third-party linters and plugins with
SublimeLinter.
GitGutter
GitGutter is a package that provides version control system integration with Sublime Text 3. It shows line-by-line differences of your code file compared to the version on Git, which saves a lot of time when reviewing and checking file changes.
FTPSync
FTPSync is a package that provides syncing between your local file system and remote FTP servers. You can also configure it to upload or download changed files automatically.
AdvancedNewFile
AdvancedNewFile is a package that allows you to create files and folders through key bindings. You can also create new files and folders inside Sublime Text 3 without using the browser.
Emmet
Emmet is a package that provides Zen Coding, which is a way to write HTML and CSS code snippets. You can write HTML tags and CSS properties with just a few keystrokes.
Markdown Preview
Markdown Preview is a package that allows you to preview Markdown files in your web browser, similar to GitHub’s
Markdown Preview. It also provides a command to build HTML files from Markdown sources, which is a helpful feature when writing technical documentation or creating web pages.
In conclusion, Sublime Text 3 is a highly customizable code editor that can be tailored to your specific coding needs. By installing Package Control, creating a Custom Settings File, and using various plugins, packages, and themes, you can make Sublime Text 3 more productive, streamlined, and efficient.
With a little effort, you can turn Sublime Text 3 into your dream code editor.
Keyboard Shortcuts
Sublime Text 3 has a wide range of keyboard shortcuts that can help developers save time and increase productivity. In this article, we will explore some of the most useful keyboard shortcuts for navigating, editing, and selecting text in Sublime Text 3.
Goto Anything
Sublime Text 3’s
Goto Anything feature is one of its most useful keyboard shortcuts. It allows developers to quickly open any file in their project or jump to a specific line number in a file.
To use this feature, press CTRL + P on Windows or CMD + P on macOS, and then type the name of the file you want to open or the line number you want to jump to. This feature is particularly helpful for large projects that contain multiple files.
Goto Line Number
Sometimes you need to jump to a specific line number in a file. To do this in Sublime Text 3, press CTRL + G on Windows or CMD + G on macOS, and then type the line number.
This will take you to the specified line number in the editor.
Goto Symbol
Sublime Text 3’s
Goto Symbol feature allows you to quickly jump to a function or class declaration within a file. To use this feature, press CTRL + R on Windows or CMD + R on macOS, and then type the name of the function or class you want to jump to.
This feature is particularly helpful for large files with multiple functions and classes. Go to Beginning/End of Line
Navigating to the beginning or end of a line is a common task in Sublime Text 3.
To jump to the beginning of a line, press HOME. To jump to the end of a line, press END.
Holding down the SHIFT key while pressing these keys will select the text between the cursor and the beginning or end of the line.
Delete Current Line
To delete the current line, press CTRL + SHIFT + K on Windows or CMD + SHIFT + K on macOS. This is a quick and easy way to remove lines of code that are no longer needed.
Multi-Edit
Sublime Text 3’s
Multi-Edit feature allows you to select and edit multiple lines of text simultaneously. To use this feature, select the text you want to edit, and then press CTRL + D on Windows or CMD + D on macOS.
This will create multiple cursors, allowing you to edit the selected lines of text at the same time. This feature can save a lot of time when making the same edits to multiple lines of code.
Block Select
Sublime Text 3’s
Block Select feature allows you to select text in a column. To use this feature, hold down the ALT key on Windows or the OPTION key on macOS and drag the cursor over the text you want to select.
This is a useful feature when you need to select multiple lines of code that are not contiguous.
Custom Commands
Sublime Text 3 also allows developers to create custom commands, which can be assigned to keyboard shortcuts. Here are two examples of useful custom commands.
Copy Path of Current File to Clipboard
To create a custom command that copies the path of the current file to the clipboard, go to Tools > Developer > New Plugin in the menu bar. This will open a new file in Sublime Text 3, where you can add the following code:
import sublime, sublime_plugin, os
class CopyPathToClipboardCommand(sublime_plugin.TextCommand):
def run(self, edit):
file_path = self.view.file_name()
if file_path:
sublime.set_clipboard(file_path)
sublime.status_message(‘File path copied to clipboard: ‘ + file_path)
else:
sublime.error_message(‘File must be saved first’)
Save this file as “CopyPathToClipboard.py” in the
Packages/User folder.
Then, go to Preferences > Key Bindings in the menu bar and add the following code to the “User” settings file:
{ “keys”: [“ctrl+alt+c”], “command”: “copy_path_to_clipboard” }
This assigns the custom command to the “CTRL + ALT + C” keyboard shortcut.
Close All Tabs Except Active One
To create a custom command that closes all tabs except the active one, go to Tools > Developer > New Plugin in the menu bar. This will open a new file in Sublime Text 3, where you can add the following code:
import sublime, sublime_plugin
class CloseOthersCommand(sublime_plugin.WindowCommand):
def run(self):
active_view = self.window.active_view()
for view in self.window.views():
if view != active_view:
self.window.focus_view(view)
self.window.run_command(“close_file”)
self.window.focus_view(active_view)
Save this file as “CloseOthers.py” in the
Packages/User folder.
Then, go to Preferences > Key Bindings in the menu bar and add the following code to the “User” settings file:
{ “keys”: [“ctrl+alt+w”], “command”: “close_others” }
This assigns the custom command to the “CTRL + ALT + W” keyboard shortcut. In conclusion, keyboard shortcuts are a powerful tool for Sublime Text 3 users to increase productivity and save time.
The built-in shortcuts, such as
Goto Anything,
Goto Line Number, and
Goto Symbol, make it easy to navigate and search for files, lines, and functions. Customizing keyboard shortcuts with custom commands can further enhance your Sublime Text 3 experience.
By taking advantage of these features, developers can work more efficiently and effectively.
Conclusion
In this article, we have explored the many features and customizations available in Sublime Text 3 to optimize your workflow and increase productivity. We have discussed the importance of Sublime Text 3 for full stack development, outlined its features, and delved into customization options that help personalize your environment.