Sublime Plug-in (JavaScript-focused)

Sublime text is almost an essential application for any developer in its toolbox. Sublime text is a cross-platform, highly customizable, high-level text editor that works well for full-featured Ides (lack of resources) and matches command-line editors such as Vim and Emacs (with steep learning curves).

One of the reasons Sublime text is so popular is its extensible plug-in architecture. This allows developers to easily use new features, such as code completion, or Remote API documentation embedding, to extend the core functionality of sublime. Sublime text plug-ins are not out-of-the-box-they usually need to be installed through a third-party package manager called the Pack control. To install the package Control in sublime text, follow the installation guide on its website.

In this article, I'll cover 10 JavaScript developer Essentials Sublime plugins, each of which can help you improve your workflow and make you more productive. Below, let's start!

1.Babel

The first is a Babel plugin. The plugin adds the appropriate syntax highlighting to the es6/2015 and react JSX codes. After installing the plugin, the first thing you need to do is set the default syntax for. ES6,.JSX, and even the. js file. However, if you are working in ES3/5 and don't want to use Babel to change your code, use the last one with caution.

If you haven't found the fun of Babel, then I highly recommend it. It allows you to compile es6/2015 and JSX code to ES5. It can be well integrated into all popular build tools and CLI. Although it does not support legacy browsers, you can follow the prompts on the warning page if you need to support IE10 and the following versions.

Unfortunately, the Babel plugin does not allow quick compilation of ES6 code in sublime. So if you have to do this, then I suggest you try compile Selected ES6.

2. Jshint

Next is the Jshint plugin in sublime. Jshint is a JavaScript linter that can be used to view your code and confirm that it has the correct style, correct syntax, and get rid of common mistakes. Whether you are a beginner or a program that has been written for many years, Jshint is a must-have item. Check out the Jshint page for more information.

To make Jshint Sublime text plugin work, you need to install the global Jshint via NPM:

?

1	npm install -g jshint

If you don't know how to do this, then check out our tutorial on starting with the node Package Manager.

Once the Jshint NPM module and the Jshint Sublime text plugin are installed, you can invoke Jshint by opening your JavaScript file and pressing Ctrl + j (or Alt + J on Linux/windows). Alternatively, you can access Jshint through the context menu.

If you have installed this plugin, but want to have a clearer warning where the error occurred, then use Jshint gutter. Or, if you want to try Jshint before installing the NPM package or the plugin, jshint.com also has a great online interactive tool that you can use to paste your code to see instant feedback.

3. Jsformat

Jsformat based on JS Beautifier, you can automatically help you format JavaScript and JSON. If you only use its JSON format alone, it is also possible. But for me, its biggest advantage now is when I work with other developers ' code, or my own code that I wrote a long time ago.

Such code is often difficult to read, but it can be helpful to follow a common code formatting style. Although formatting may not be suitable for everyone, it is true that you can help developers read code by introducing a common structure. Linter Although this is a concern, it is not necessarily comprehensive and does not automatically fix the format. Code formatting saves a lot of time and avoids a lot of headaches.

After installation, to use Jsformat, first enter the JS file, and then press CTRL + ALT + F on the Windows/linux, or press CTRL + on your Mac? + F. Of course, you can also use the context menu.

You might think, "What if I don't like the way they design JavaScript?" ”

Don't worry! Jsformat is not only based on JS Beautifier settings, but also highly configurable. To adjust for sublime Text 3, do this: Preferences, Package Settings, Jsformat, Settings–default

Then edit the JSON settings to your liking.

4. Docblockr

Adding comments to your code can sometimes be a very, very painful thing. Although many people do not like to do this thing, but it is absolutely necessary. Docblockr can alleviate some of the pain by making simple annotations. After installing Docblockr, all you need to do is start a line of code with/* or/**, and the rest will be handed to it. If you start with/** on the function, it will generate comments for you based on the JSDoc format. There are things that you have never used before, but once you've used them, you'll wonder how you've survived, and Docblockr is one of those examples.

Docblockr supports many other languages, including: Coffeescript,typescript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C, C + +, and rust.

5.SideBar Enhancements

Sublime text has very few options available for working with files in the sidebar file tree. Simply put, SideBar enhancements can fix this problem. This plugin specifically provides a "move to trash" option for files and folders, an "open with." option, as well as a clipboard. It also allows you to open files in a Web browser, copy the file contents as Data:uri base64 (which is especially handy for embedding images in CSS), and provide a large number of search operations. In addition, it can be well integrated with sidebargit and provides GIT commands directly from the sidebar.

As the size of the JavaScript codebase continues to grow, it is imperative to find a reasonable way to navigate through the project and process the project files. As a result, this plugin becomes a necessity.

6. AngularJS

Developed by the Angular-ui team and may be one of the larger (but also more useful) packages in these Sublimetext plugins. Its main features include:

• Code completion for Core ANGULARJS directives (ng-model,ng-repeat, etc.)
• Command completion for custom directives
• Quick Panel Search For instructions, controllers, and filters
• Angular related Code Snippets
• The gotodocs of the core angular JS instruction

Angular is a large library, Angularjs surprisingly useful. You can read many of its settings on the project's home page.

To take advantage of this plugin syntax highlighting, you need to change the view type of your HTML file to the HTML (angular.js) in view, Syntax.

7.TypeScript

Typescript is a type superset of JavaScript compiled into normal JavaScript. This may not be a big deal for the average developer, but this year's announcement--angular 2 will be built on typescript, meaning that if you work at Angular and you plan to use ANGULAR2 later, Then this plugin is a must.

Based on Microsoft's support, this plugin adds code completion, correct syntax highlighting, code formatting and extended navigation to the Typescript project. It also comes with a build system that allows you to compile typescript files for JavaScript.

To access the build system, you can do this by Tools-Build systems, and then select Typescript. Then open a file with a. TS end, select Tools-Build, or simply press Ctrl + B. You will be asked to build the parameters, and then the plugin will output the compiled JavaScript files in the same directory. The only thing to note is that it needs node.

From a plug-in perspective, it provides a "sublime text experience" that works with typescript code. It's true, from the bloated IDE above, it makes a refreshing change.

8.Handlebars

If you are using ember.js, or just use handlebars as a template language for a choice, then you cannot do without it. Without it, you might as well turn off all the syntax highlighting.

In addition to syntax highlighting (this feature is available in an inline template for individual template files and script tags), it also provides tabs for triggering various emoticons. For example, typing x-temp and pressing the TAB key produces:

?

1	<script type="text/x-handlebars"data-template-name=""></script>

Also, type Ifel and press the TAB key, and you get:

?

12345

{{#if }}{{else}}{{/if}}>

It's convenient, isn't it?

There is also a complete set of code snippets on this project's home page.

9.Better Coffeescript

Better Coffeescript is a branch of the original Coffeescript-sublime-plugin--unfortunately, Coffeescript-sublime-plugin seems to have been abandoned by its creators, only works on Sublimetext 2.

This plugin not only provides the most needed syntax highlighting for those who work in Coffeescript, but also has many other features. It adds a bunch of commands to sublime (accessed via the command panel or various shortcut keys), such as running grammar checks, compiling files, and displaying compiled JavaScript. It is also equipped with fragments and a build system that works with cake (make for a simplified version of Coffeescript).

You can read many of the plugin's settings and options carefully on this project's home page.

Ten. JQuery

I know that jquery now seems to fall out of favor in many places, but it's still very useful if you're not going to build a fully interactive site, or if you just want to add functionality to an existing application.

This plugin provides additional syntax highlighting and fragments of almost all jquery methods. You can access these fragments by entering the method name and choosing the appropriate match--it's that simple! I particularly like this feature because it saves me a lot of time that I would have used to memorize the method features and query the jquery API documentation.

For example, typing $.a will come up with an option that lets me choose $.ajax (), and $.ajax () can extend to:

?

123456789101112131415

$.ajax({ url: ‘/path/to/file‘, type: ‘default GET (Other values: POST)‘, dataType: ‘default: Intelligent Guess (Other values: xml, json, script, or html)‘, data: {param1: ‘value1‘},}).done(function() { console.log("success");}).fail(function() { console.log("error");}).always(function() { console.log("complete");});

Transferred from: http://www.jb51.net/article/80120.htm

Sublime Plug-in (JavaScript-focused)