JavaScript developers must have 10 sublime text plugins _javascript Tips

Sublime text is almost any developer's prerequisite application in its toolbox. Sublime text is a cross-platform, highly customizable, advanced text editor for a fully functional IDE (a scarce resource) and for matching command-line editors, such as Vim and Emacs (with a steep learning curve).

One of the reasons why Sublime text is so popular is its extensible plug-in architecture. This allows developers to extend the core functionality of sublime by easily using new features, such as code completion, or remote API document embedding. Sublime-Text plugins are not out-of-the-box-typically installed by a Third-party Package manager called Package control. To install package control in sublime text, follow the installation guide on its Web site.

In this article, I'll introduce 10 JavaScript developers ' sublime Plug-ins, each of which will help you improve your workflow and make you more efficient. Now, let's get started!

1.Babel

The first one is a Babel plugin. The plugin adds the appropriate syntax for highlighting to es6/2015 and react JSX code. After installing the plugin, the first thing you need to do is set the default syntax to. es6,.jsx, and even. js files. However, if you work on ES3/5 and don't want to use Babel to change your code, be careful with the last one.

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 the popular build tools and CLI. Although it does not support older browsers, you can follow the prompts on the warning page if you need to support IE10 and the following versions.

Unfortunately, the Babel plug-in does not allow the ES6 code to be compiled quickly in sublime. So if you have to do this, then I suggest you try compile Selected ES6.

2. Jshint

Next is the Jshint plug-in in sublime. Jshint is a JavaScript linter that can be used to view your code and verify that it has the correct style, correct syntax, and get rid of common mistakes. Whether you are a beginner or have been programmed for many years, Jshint is an essential product. Check out the Jshint related pages for more information.

To make the Jshint Sublime text plug-in work, you need to install a global jshint via NPM:

NPM install-g Jshint

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

Once you have installed the Jshint NPM module and the Jshint Sublime text plug-in, 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 of where the error occurred, 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 view immediate feedback.

3. Jsformat

Jsformat is based on the JS Beautifier, which automatically helps you format JavaScript and JSON. If you only use its JSON format alone, it's OK. But for me, it's the biggest advantage now when I'm working on other developers ' code, or the code I wrote a long time ago.

Such code is often difficult to read, but it is helpful to follow a common code format style. While formatting may not be appropriate for everyone, it's true that you can help developers read code by introducing a common structure. Linter, while paying attention to this, 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 the installation, to use Jsformat, first into the JS file, and then on the Windows/linux press CTRL + ALT + F, or on the Mac press CTRL +⌥+ F. Of course, you can also use context menus.

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

Then edit the JSON settings according to your preferences.

4. Docblockr

adding annotations to your code is sometimes a very, very painful thing to do. Although many people do not like it, it is absolutely necessary. Docblockr can alleviate some of the pain by making simple annotations. After you install DOCBLOCKR, all you need to do is start a line of code with/* or/**, and the rest will be available to it. If you start with/** on a function, it generates annotations for you based on the JSDoc format. There are some things that you have never used before, but once you have used them, you will doubt how you survived before, Docblockr is one example.

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, and a clipboard. It also allows you to open files in a Web browser, copy the contents of the file as Data:uri base64 (which is especially handy for embedding images in CSS), and provides a number of search operations. In addition, it can be well integrated with sidebargit, providing git commands directly from the sidebar.

As the size of the JavaScript code base continues to expand, it is imperative to find a reasonable way to browse the project and process the project files. As a result, the plugin became 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 plug-ins. Its main functions include:

• Code completion for Core ANGULARJS directives (ng-model,ng-repeat, etc.)
• Command completion for custom directives
• Quick Panel Search for directives, controllers, and filters
• Angular-related code snippets
• Gotodocs of 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 plug-in syntax highlighting, you need to change the view type of your HTML file into view-> Syntax-> html (angular.js).

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 small announcement--angular 2 will be built on typescript, meaning that if you work for angular and you intend 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 making the Tools-> builds system, and then selecting Typescript. Then use the. TS end to open a file, select the tools-> build, or simply press Ctrl + B. You will be asked to build the parameters, and then the plugin will output the compiled JavaScript file in the same directory. The only thing to be aware of is that it requires node.

From a plug-in perspective, it provides "enhanced version of the sublime text experience when working with typescript code." True, it makes a refreshing change from the bloated IDE.

8.Handlebars

If you're using ember.js, or just handlebars as a template language, then you can't do without it. Without it, you might as well just turn off all the syntax highlighting.

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

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

In addition, type Ifel and press the TAB key, and you will get:

{{#if}}}

{{Else}}}

{{/if}}>

It's convenient, isn't it?

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

9.Better Coffeescript

Better Coffeescript was a branch of the original Coffeescript-sublime-plugin-however, unfortunately, Coffeescript-sublime-plugin seems to have been abandoned by its founders, can only work in 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 the sublime (accessible via the Command panel or various shortcut keys), such as running a grammar check, compiling files, and displaying the compiled JavaScript. It also comes with snippets and a build system that works with cake (make for coffeescript).

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

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 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 selecting the appropriate match--that's easy! I particularly like this feature because it saves me a lot of time when I used to use memory method features and query jquery API documents.

For example, typing $.a will come out with an option for me to choose $.ajax (), and $.ajax () can be extended to:

$.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");
});

Oh, that's great!

Conclusion

These 10 sublime plug-ins that are required in JavaScript development are over here. I've only used one or two of them, so I'd like to welcome you to talk about the experience you've been using. Of course, if you miss your favorite plugin, please let me know in the comments, I will consider adding it to the list.

Last but not least, keep in mind that Sublime text is not freeware. However, it has an unlimited trial version (although there will be a variety of annoying images), while a single user's license fee is $70. If you spend most of your day using a text editor, this will be a worthwhile investment!