Sublime Text 2 Javascript

broken image


The world of IDE software is massive with programs for every operating system. My personal favorite is Sublime Text, and I use it for all my coding projects. Aside from Sublime's many optional themes, keyboard shortcuts and lightning-fast workflow, it also has a vast community of developers that create extensions that make the software even better and easier to use.

Package Control. Package control is one of the most important plugins for sublime text. Snippets for JavaScript / JS Programming in Sublime Text 2 & 3. Labels snippets. Version 2017.07.14.19.15.43; Homepage github. Com; Issues github. Com; Modified 3 years ago; Last Seen 1 hour ago; First Seen 8 years ago; Installs. Total 188K; Win 123K; Mac 38K; Linux 28K; Jan 4 Jan 3 Jan 2 Jan 1 Dec 31 Dec 30 Dec 29 Dec 28 Dec 27.

Blue steak for pc. I'm starting a new series of posts on Sublime Text, and how to get the most out of the editor.The series will be focused on Javascript development, as that is how I use Sublime Text, but it should be applicable to any developer who uses Sublime Text as part of their workflow.

Configuration

Text

Sublime Text allows for plenty of text editing power out of the box, but the real power comeswhen you begin configuring it to meet your own needs. This is by definition a topic that different people will approach in different ways, but in this post I will attempt to give an overview of what is configurable in Sublime Text (Spoiler: almost everything), and how to configure them.

Sublime Text Console

The Basics

Sublime Text settings are defined using json files. There are multiple levels of configurationto give you very fine grained control of how your editor will act for different files.From the Sublime Docs, settings are prioritized like this:

Settings files are consulted in this order:

Packages/Default/Preferences.sublime-settingsPackages/Default/Preferences (platform).sublime-settingsPackages/User/Preferences.sublime-settingsPackages/ / .sublime-settingsPackages/User/.sublime-settings

Settings can be set on a default, user, project, or syntax-type basis, and add specificsettings for distraction free mode.

Never set your options using the Default-Settings files!

Sublime Text 3 Javascript Coding Standard

The default settings files for Sublime text will be overwritten when you updateto a new version, and the plugin specific settings will be overwritten when thoseplugins are updated. Always use the 'User-Settings' files instead for 'global'settings. Its not a bad idea to immediately copy the default settings file tothe User-Settings file when you're initially setting up sublime so that you cansee all of the options that are set in that file and edit them accordingly.

Heres my User-Settings file for my Windows-based version of Sublime:

Visuals

One of the most configurable thing about Sublime Text is the GUI. If you don'tlike something about how the program looks, it is probably configurable. Some of themost important visual settings are below:

Color Scheme

The most obvious configurable visual setting is the color scheme. Sublime shipswith a solid selection of default color schemes, and its easy to find and downloadmore online with Package Control, which I'll cover more in theplugins article. I use Sublime's Monokai Bright theme for JS development, and acustom Solarized theme for writing in Markdown for this blog and mynotes. You can set color scheme with a command like this in one of your settings files

Sublime Text 3 Java Ide

or you can set it in the preferences menu on the top of the screen (this will set itin your User-Settings file)

Theme

You can also configure the overall look and feel of the application. While thedefault is by no means ugly, many people prefer the Soda theme that addssome prettier gradients and a choice of a light/dark theme. You can set thatlike this after downloading the theme:

Quickies

Here are a few more quick visual tweaks

  • 'rulers': set where to show vertical rulers. Takes an array of integers. I put one at 80 in order to limit my line lengths in javascript.
  • 'tab_size','translate_tabs_to_spaces', and 'use_tab_stops: Determine space and tabs behaviors.
  • 'highlight_line': If true will highlight every line with a cursor

Key Bindings

This is where all of the information from Monday's post starts to become a whole lot less useful. All of the keyboard shortcuts that were discussed in that post are completely configurable. Again you want to use the 'User' preferences file inPackages/User to set the keybindings. Keybindings are stored in json form like this:

You can override existing shortcuts to make common commands more convenient orcreate your own by combining sublime commands. One cool trick is the ability to define keyboard shortcuts to toggle settings.

The toggle_setting command can be used to toggle a setting. For example, to make a key binding that toggles the word_wrap setting on the current file, you can use (in Preferences/Key Bindings - User):

The set_setting command can be used to set a setting to a specific value. For example, this key binding makes the current file use the Cobalt color scheme:

The settings modified here are buffer specific settings: they override any settings placed in a settings file, but apply to the current file only.

Plugins

Sublime Javascript Editor

Plugins also sometimes have their own configuration files. These generally mimic the format of the editor, and its adviced as usual to use the User Settings for these so as to avoid having your settings blown away with updates

Build Systems

Sublime also lets you configure custom build systems to build your project. These can be defined at the same levels of everything else, though in this case it probably makes most sense at the syntax and project level.

Projects

Projects are a great way to organize your Sublime Text files. You can set up a projectat any time by creating a .sublime-project file (this will happen automatically if you choose save project or edit project in the Project toolbar menu). The project configuration menu takes a list of folders, a list of settings, and a list of build system settings as a JSON file. These settings will then override your user level settings for files in the folders that you specify. This lets you meet project specifications for things like tabs or line length without constantly fiddling with settings. You also can enable or disable different plugins based on project, and create visual distinction between projects with different color themes.

Macros

Macros let you save a series of common commands as a json file. You can then run themfrom the 'Tools/Macro' menu. There's more information in the unofficial docs

Snippets

One final thing that you can configure in Sublime Text is 'Snippets'. Sublime Snippets provide advanced templating ability thats configured with an XML template. A detailed description of what you can do with snippets is available in the unofficial docs. Suffice it to say that it allows everything from a simple text replacement to full templating based on a variety of environment variables.

Javascript

Sublime Text allows for plenty of text editing power out of the box, but the real power comeswhen you begin configuring it to meet your own needs. This is by definition a topic that different people will approach in different ways, but in this post I will attempt to give an overview of what is configurable in Sublime Text (Spoiler: almost everything), and how to configure them.

Sublime Text Console

The Basics

Sublime Text settings are defined using json files. There are multiple levels of configurationto give you very fine grained control of how your editor will act for different files.From the Sublime Docs, settings are prioritized like this:

Settings files are consulted in this order:

Packages/Default/Preferences.sublime-settingsPackages/Default/Preferences (platform).sublime-settingsPackages/User/Preferences.sublime-settingsPackages/ / .sublime-settingsPackages/User/.sublime-settings

Settings can be set on a default, user, project, or syntax-type basis, and add specificsettings for distraction free mode.

Never set your options using the Default-Settings files!

Sublime Text 3 Javascript Coding Standard

The default settings files for Sublime text will be overwritten when you updateto a new version, and the plugin specific settings will be overwritten when thoseplugins are updated. Always use the 'User-Settings' files instead for 'global'settings. Its not a bad idea to immediately copy the default settings file tothe User-Settings file when you're initially setting up sublime so that you cansee all of the options that are set in that file and edit them accordingly.

Heres my User-Settings file for my Windows-based version of Sublime:

Visuals

One of the most configurable thing about Sublime Text is the GUI. If you don'tlike something about how the program looks, it is probably configurable. Some of themost important visual settings are below:

Color Scheme

The most obvious configurable visual setting is the color scheme. Sublime shipswith a solid selection of default color schemes, and its easy to find and downloadmore online with Package Control, which I'll cover more in theplugins article. I use Sublime's Monokai Bright theme for JS development, and acustom Solarized theme for writing in Markdown for this blog and mynotes. You can set color scheme with a command like this in one of your settings files

Sublime Text 3 Java Ide

or you can set it in the preferences menu on the top of the screen (this will set itin your User-Settings file)

Theme

You can also configure the overall look and feel of the application. While thedefault is by no means ugly, many people prefer the Soda theme that addssome prettier gradients and a choice of a light/dark theme. You can set thatlike this after downloading the theme:

Quickies

Here are a few more quick visual tweaks

  • 'rulers': set where to show vertical rulers. Takes an array of integers. I put one at 80 in order to limit my line lengths in javascript.
  • 'tab_size','translate_tabs_to_spaces', and 'use_tab_stops: Determine space and tabs behaviors.
  • 'highlight_line': If true will highlight every line with a cursor

Key Bindings

This is where all of the information from Monday's post starts to become a whole lot less useful. All of the keyboard shortcuts that were discussed in that post are completely configurable. Again you want to use the 'User' preferences file inPackages/User to set the keybindings. Keybindings are stored in json form like this:

You can override existing shortcuts to make common commands more convenient orcreate your own by combining sublime commands. One cool trick is the ability to define keyboard shortcuts to toggle settings.

The toggle_setting command can be used to toggle a setting. For example, to make a key binding that toggles the word_wrap setting on the current file, you can use (in Preferences/Key Bindings - User):

The set_setting command can be used to set a setting to a specific value. For example, this key binding makes the current file use the Cobalt color scheme:

The settings modified here are buffer specific settings: they override any settings placed in a settings file, but apply to the current file only.

Plugins

Sublime Javascript Editor

Plugins also sometimes have their own configuration files. These generally mimic the format of the editor, and its adviced as usual to use the User Settings for these so as to avoid having your settings blown away with updates

Build Systems

Sublime also lets you configure custom build systems to build your project. These can be defined at the same levels of everything else, though in this case it probably makes most sense at the syntax and project level.

Projects

Projects are a great way to organize your Sublime Text files. You can set up a projectat any time by creating a .sublime-project file (this will happen automatically if you choose save project or edit project in the Project toolbar menu). The project configuration menu takes a list of folders, a list of settings, and a list of build system settings as a JSON file. These settings will then override your user level settings for files in the folders that you specify. This lets you meet project specifications for things like tabs or line length without constantly fiddling with settings. You also can enable or disable different plugins based on project, and create visual distinction between projects with different color themes.

Macros

Macros let you save a series of common commands as a json file. You can then run themfrom the 'Tools/Macro' menu. There's more information in the unofficial docs

Snippets

One final thing that you can configure in Sublime Text is 'Snippets'. Sublime Snippets provide advanced templating ability thats configured with an XML template. A detailed description of what you can do with snippets is available in the unofficial docs. Suffice it to say that it allows everything from a simple text replacement to full templating based on a variety of environment variables.

Sublime contains several Javascript related snippets by default for several basic tasks, and there are more that you can find in other places around the internet. Here's one example by Jonathan Creamer with a few snippets for plugin development, and a nice little console.log snippet for quick development.

Summary

  1. Pretty much everything in Sublime can be customized using JSON files
  2. Use User files or project/syntax specific files, not the Default files
  3. Learn your options and you can get a lot more out of Sublime Text

I hope this is helpful. I'll be following up with one final post later this week on helpful Sublime plugins for javascript development.

Article Info

Author Ben McCormick Publish Date January 1st 2013 Category




broken image