10 SublimeText plug-ins required by JavaScript developers _ javascript skills

SublimeText is almost an essential application for any developer in its toolbox. This article mainly introduces 10 SublimeText plug-ins required by JavaScript developers, if you are interested, refer to Sublime Text, which is a required application for almost 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: