Turn Sublime Text 3 into a JavaScript IDE

  • 时间: 2018-05-12 12:37:42

Sublime Textis one of the most popular editorsfor web development and software development in general. It’s very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through Package Control.

But it’s only a text editor and not an IDE . An IDEis a software application that provides comprehensive facilities to computer programmers for software development. In fact, Sublime doesn’t offer features like debugging tools, built-in tools for compiling and running applications, intelligent code suggestions, or code refactoring. Instead it offers a set of APIs you can use to extend it. Here’s an introduction to the JavaScript Enhancementplugin (my own creation) that makes Sublime a bit more IDE-like for JavaScript development.

What is the JavaScript Enhancement Plugin?

It is a plugin for Sublime Text 3 that offers a lot of features useful for creating, developing, and managing JavaScript projects. The most important ones are:

  1. Smart autocomplete
  2. Error detection and linting
  3. Code refactoring

Several other features can be found on the Wiki page.

Most of the features are implemented using Flowunder the hood, which is a static typecheckerfor JavaScript created by Facebook (if you know TypeScript, it is quite similar). The main objective of this plugin is to turn Sublime Text 3 into a JavaScript IDE . It is in active development and it will include other features over time.

Installation

There are two ways to install it. The simplest one is through Package Control, the other one is to install it manually following these simple steps.

Requirements

  • Sublime Text 3build 3124or newer
  • Node.js(6 or newer) and npm
  • TerminalView Sublime Text plugin (Linux and Mac OS X only)

Supported Systems

Because Flow only works on 64-bit systems, this plugin supports:

  • Mac OS X
  • Linux (64-bit)
  • Windows (64-bit)

Smart Autocomplete

Sublime Text has its own autocomplete feature, but it lacks power, making it not nearly as useful as it could be. With this plugin, you will get autocompletion based on the current context, like any other IDE. For example, you will get completions from your imported classes defined in other files, such as properties and methods.

Furthermore, the completions list will also contain info about variables typeand functions signaturein order to get a quick overview of them.

Here’s how that works with the plugin:

...and without the plugin:

Error Detection and Linting

Sublime Text doesn’t have an error detection and/or linting system natively. Thanks to Flow, this can be done using its own CLI commands. In order to let the Flow server check your files in a JavaScript project, you need to add a special comment in them: // @flow.

You can set also more options in the .flowconfigfile (see the official websiteto customize your Flow configuration. For example, if you want to let the Flow server check all files and not just those with @flow, you need to set the alloption to true:

[options]# all=off by defaultall=true

Instead, like is says on the official website, lint settings can be specified in the .flowconfig[lints] section as a list of rule=severitypairs. These settings apply globally to the entire project. An example is:

[lints]# all=off by defaultall=warnuntyped-type-import=errorsketchy-null-bool=off

Lint settings can be specified also directly in a file using flowlintcomments . For example:

/* flowlint*   sketchy-null:error,*   untyped-type-import:error*/

Code Refactoring

Sublime Text doesn’t offer a code refactoring system natively. This is realized with the help of Flow CLI commands in order to get the necessary information. At the moment, this plugin offers various code refactoring features, including:

Some of them can also have an available preview.

Support

Issues/Questions

If you have any problems, create an issue. Protip: do a quick search first to see if someone else didn't ask the same question before! For small questions, you can use Gitter.

Feature Requests and Enhancements

For feature requests, create an issue or use Gitter.

Financial Contributions

If this project helps you reduce time to develop and also you like it, please consider supporting it with a donation on Patreon, Open Collectiveor using PayPal. Thanks!