10 Essential Sublime Text plug-ins for JavaScript developers, including javascriptsublime

10 Essential Sublime Text plug-ins for JavaScript developers, including javascriptsublime

Sublime Text is almost an essential application for any developer in its toolbox. Sublime Text is a cross-platform, highly customizable, and advanced Text editor. It is suitable for full-featured IDE (with a lack of famous resources) and can match the command line editor, for example, Vim and Emacs (with steep learning curves ).

One of the reasons why Sublime Text is so popular is its scalable plug-in architecture. This allows developers to easily use new features, such as code completion or Remote API document embedding, to expand the core features of Sublime. The Sublime Text plug-in is not out-of-the-box-usually needs to be installed through a third-party software Package manager called Package Control. To install Package Control in Sublime Text, follow the installation guide on its website.

In this article, I will introduce the Sublime plug-ins essential for 10 JavaScript developers, each of which can help you improve your workflow and make it more efficient. Next, let's get started!

1. Babel

The first is the Babel plug-in. The plug-in adds appropriate syntax highlighting to ES6/2015 and React JSX code. After installing the plug-in, 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 do not want to use Babel to change your code, use the last one with caution.

If you haven't found Babel fun, I strongly 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 earlier browsers, if you need to support IE10 or earlier versions, you can follow the prompts on the warning page.

Unfortunately, the Babel plug-in does not allow quick compilation of ES6 code in Sublime. So if you have to do this, I suggest you try Compile Selected es6.

2. JSHint

Next is the JSHint plug-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 errors. Whether you are a beginner or a program that has been written for many years, JSHint is a must. View the JSHint page for more information.

To make the JSHint Sublime Text plug-in work, you need to install the global JSHint through npm:

npm install -g jshint

If you do not know how to do this, please refer to our tutorial on starting from Node Package Manager.

Once the JSHint npm module and JSHint Sublime Text plug-in are installed, you can open your JavaScript file and press Ctrl + J (or Alt + J on Linux/Windows ), to call JSHint. Alternatively, you can access JSHint through the context menu.

If you have installed this plug-in, but want to have a clearer warning in the case of an error, Use JSHint Gutter. Or, if you want to try JSHint before installing the NPM package or the plug-in, JSHint.com also has a great online interaction tool. You can use this tool to paste your code and view real-time feedback.

3. JsFormat

JsFormat is based on JS Beautifier and can automatically help you format JavaScript and JSON. If you only use its JSON format, it is also possible. But for me, its biggest advantage is when I work with code from other developers or 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. Although formatting may not be suitable for everyone, you can introduce a common structure to help developers understand the code. Linter pays attention to this point, but it is not necessarily comprehensive and will not fix the format automatically. Code formatting saves a lot of time and avoids a lot of headaches.

After the installation, you need to use JSFormat, first enter the JS file, then press Ctrl + Alt + f on Windows/Linux, or press Ctrl + Alt + f on Mac. You can also use context menus.

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

Don't worry! JsFormat is not only set based on JS Beautifier, but also highly configurable. To adjust the value suitable for Sublime Text 3, do this: Preferences-> Package Settings-> JsFormat-> Settings-Default

Edit the JSON settings according to your preferences.

4. DocBlockr

Adding comments to your code is sometimes very painful. Although many people do not like to do this, it is absolutely necessary. DocBlockr can alleviate some pain points by making simple annotations. After installing DocBlockr, all you need to do is start a line of code with/* Or/*, and then all the rest can be handed over to it. If you start with/** in the function, it will generate comments for you based on the JSDoc format. Although you have never used it before, once you have used it, you may wonder how you survived. DocBlockr is an 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 in the sidebar file tree that can be used to process files. In short, SideBar Enhancements can fix this problem. This plug-in provides a "move to trash" option, an "open with..." option, and a clipboard for files and folders. It also allows you to open a file in a web browser, copy the file content as data: uri base64 (this is especially convenient to embed images in CSS), and provide a large number of search operations. In addition, it can be well integrated with SideBarGit, providing Git commands directly from the sidebar.

As the JavaScript code base expands, it is imperative to find a reasonable method to browse a project and process project files. Therefore, this plug-in becomes a necessity.

6. AngularJS

Developed by the Angular-UI team and may be one of the larger (but more useful) software packages in these SublimeText plug-ins. Its main functions include:

• Complete the code of core AngularJS commands (ng-model, ng-repeat, etc.)
• Command completion for custom commands
• Quick panel search for commands, controllers, and filters
• Angular-related code snippets
• GoToDocs of core Angular JS commands
  

Angular is a large library and AngularJS is unexpectedly useful. You can read many settings on the project homepage.

To take advantage of this plug-in Syntax highlighting, you need to change the View type of your HTML file in View> Syntax> HTML (Angular. js.

7. TypeScript

TypeScript is a type superset compiled by JavaScript into common JavaScript. This may not matter to common developers, but Angular 2, a small announcement released in March this year, will be built on TypeScript, meaning that, if you are working on Angular and want to use Angular2 in the future, this plug-in is essential.

Based on Microsoft's support, this plug-in includes Code Completion, correct syntax highlighting, code formatting, and extended navigation functions to TypeScript projects. It also comes with a build system that allows you to compile TypeScript files as JavaScript.

To access the Build System, you can do this by using Tools> Build System and then selecting TypeScript. Open a file at the End of. ts, select Tools> Build, or simply press Ctrl + B. You will be asked to build parameters, and then the plug-in will output compiled JavaScript files in the same directory. Note that Node is required.

From the plug-in perspective, it provides "enhanced Sublime Text experience when working on TypeScript code ". Indeed, from the bloated IDE above, it has made a refreshing change.

8. Handlebars

If you are using Ember. js or just using Handlebars as a template language, you cannot leave it alone. Without it, you should simply turn off all syntax highlighting.

In addition to syntax highlighting (this feature is available in individual template files and inline templates of script labels), it also provides tabs for triggering various emoticon. For example, if you type x-temp and press the TAB key:

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

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

{{#if }}

{{else}}

{{/if}}>

Very convenient, right?

There are a series of complete code snippets on the home page of this project.

9. Better CoffeeScript

Better CoffeeScript is a branch of CoffeeScript-Sublime-Plugin. Unfortunately, CoffeeScript-Sublime-Plugin seems to have been abandoned by its creator and can only work on SublimeText 2.

This plug-in not only provides syntax highlighting for those who work on CoffeeScript, but also provides many other functions. It adds a bunch of commands to Sublime (which can be accessed through the Command Panel or various shortcut keys), such as running syntax checks, compiling files, and displaying compiled JavaScript. It is also equipped with fragments and build systems that work on cake (Make for a simplified version of CoffeeScript.

You can carefully read many plug-in settings and options on the home page of this project.

10. jQuery

I know that jQuery seems to be out of favor in many places, but it is still very useful. If you don't plan to build a completely interactive website, or you just want to add the feature to the 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 like this feature very much because it saves me a lot of time for memorizing method features and querying jQuery API documentation.

For example, if you type $. a, an option for me to select $. ajax () is displayed, and $. ajax () can be extended:

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

Great!

Conclusion

The 10 Sublime plug-ins that are essential for JavaScript development are over. I only used one or two of them, so you are welcome to talk about your experience after using them. Of course, if you miss your favorite plug-in, please let me know in the comments, and I will consider adding it to the list.

Last, remember that Sublime Text is not a free software. But it has an unlimited trial version (although there will be a variety of annoying images), and the license fee for a single user is $70. If you use a text editor most of the day, it will be a valuable investment!

Articles you may be interested in:

• Web Inspector: Introduction to debugging Js in Sublime Text
• Solution to SublimeText 2 compiling python errors (The system cannot find the file specified)
• SublimeText compilation C Development Environment Settings
• How to configure the python development environment for sublime under win7
• Nodejs sublime text 3 installation and configuration
• How to Make Sublime 3 a powerful tool for Python/Django IDE development
• Use Sublime in Windows to build the nodejs Environment