# JavaScript Enhancements [![Share on Twitter](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Turn%20Sublime%20Text%203%20into%20a%20JavaScript%20IDE%20&url=https://github.com/pichillilorenzo/JavaScriptEnhancements&hashtags=javascript,ide,plugin,sublimetext3,editor) [![Share on Facebook](https://img.shields.io/badge/share-facebook-blue.svg?longCache=true&style=flat&colorB=%234267b2)](hhttp://www.facebook.com/sharer.php?u=https://github.com/pichillilorenzo/JavaScriptEnhancements)
[![Minimum Sublime Build Version](https://img.shields.io/badge/sublime%20build-%3E%3D%203124-brightgreen.svg?style=flat)](https://sublimetext.com)
[![GitHub stars](https://img.shields.io/github/stars/pichillilorenzo/JavaScriptEnhancements.svg?style=flat)](https://github.com/pichillilorenzo/JavaScriptEnhancements/stargazers)
[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/JavaScriptEnhancements/Lobby)
[![Build Status](https://travis-ci.org/pichillilorenzo/JavaScriptEnhancements.svg?branch=master)](https://travis-ci.org/pichillilorenzo/JavaScriptEnhancements)
[![codecov](https://codecov.io/gh/pichillilorenzo/JavaScriptEnhancements/branch/master/graph/badge.svg)](https://codecov.io/gh/pichillilorenzo/JavaScriptEnhancements)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](/LICENSE.txt)
[![Donate to this project using Paypal](https://img.shields.io/badge/paypal-donate-yellow.svg)](https://www.paypal.me/LorenzoPichilli)
[![Donate to this project using Patreon](https://img.shields.io/badge/patreon-donate-yellow.svg)](https://www.patreon.com/bePatron?u=9269604)
[![Donate to this project using Open Collective](https://img.shields.io/badge/open%20collective-donate-yellow.svg)](https://opencollective.com/javascriptenhancements/donate) [![Backers on Open Collective](https://opencollective.com/javascriptenhancements/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/javascriptenhancements/sponsors/badge.svg)](#sponsors)
**JavaScript Enhancements** is a plugin for **Sublime Text 3**.
> A little introduction to this plugin could be found in this css-tricks.com article: [**Turn Sublime Text 3 into a JavaScript IDE**](https://css-tricks.com/turn-sublime-text-3-into-a-javascript-ide/)
This plugin uses **[Flow](https://github.com/facebook/flow)** (javascript static type checker from Facebook) under the hood.
This is in **BETA** version for **testing**.
It offers better **JavaScript autocomplete** and also a lot of features about creating, developing and managing [**JavaScript projects**](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Creating-a-JavaScript-Project), such as:
- Cordova projects (run cordova emulate, build, compile, serve, etc. directly from Sublime Text!)
- Ionic v1 and v2 (it includes also v3) projects (same as Cordova projects!)
- Angular v1 and v2 (it includes also v4 and v5) projects
- Vue projects (only about the creation at this moment, see the [wiki](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Example-Vue.js-project))
- React projects (only about the creation at this moment)
- React Native projects (only about the creation at this moment. I will add also **NativeScript** support)
- Express projects (only about the creation at this moment)
- Yeoman generators
- [Local bookmarks project](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Features#bookmarks-project)
- [JavaScript real-time errors](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Errors-and-linting)
- [Code Refactoring](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Code-Refactoring)
- etc.
You could use it also in **existing projects** (see the [Wiki](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Using-it-with-an-existing-project))!
It turns Sublime Text into a **JavaScript IDE** like!
This project is based on my other Sublime Text plugin [JavaScript Completions](https://github.com/pichillilorenzo/JavaScript-Completions)
**Note**:
If you want use this plugin, you may want **uninstall/disable** the **JavaScript Completions** plugin, if installed.
## OS SUPPORTED
- Linux (64-bit)
- Mac OS X
- Windows (64-bit): released without the use of [TerminalView](https://github.com/Wramberg/TerminalView) plugin. For each feature (like also creating a project) will be used the `cmd.exe` shell (so during the creation of a project **don't close it** until it finishes!). Unfortunately the TerminalView plugin supports only **Linux-based OS** 😞 . See [this](https://github.com/Wramberg/TerminalView/issues/3#issuecomment-390434623) workaround using WSL (Windows Subsystem for Linux).
## Dependencies
In order to work properly, this plugin has some dependencies:
- **Sublime Text 3** (build **3124** or newer)
- **Node.js** (6 or newer) and **npm** ([nodejs.org](https://nodejs.org) or [nvm](https://github.com/creationix/nvm))
- **TerminalView** (only for _Linux_ and _Mac OS X_) sublime text plugin ([TerminalView](https://github.com/Wramberg/TerminalView))
**Not required**, but **useful** for typescript files (Flow wont work on this type of files):
- **TypeScript** sublime text plugin ([TypeScript](https://github.com/Microsoft/TypeScript-Sublime-Plugin))
### Flow Requirements
It will use [Flow](https://github.com/facebook/flow) for type checking and auto-completions.
- Mac OS X
- Linux (64-bit)
- Windows (64-bit)
You can find more information about Flow on [flow.org](https://flow.org)
## Installation
With [Package Control](https://packagecontrol.io/):
- Run “Package Control: Install Package” command or click to the `Preferences > Package Control` menu item, find and install `JavaScript Enhancements` plugin.
Manually:
1. Download [latest release](https://github.com/pichillilorenzo/JavaScriptEnhancements/releases) (**DON'T CLONE THE REPOSITORY!**) and unzip it into your **Packages folder** (go to `Preferences > Browse Packages...` menu item to open this folder)
2. Rename the folder with `JavaScript Enhancements` name (**THIS STEP IS IMPORTANT**).
If all is going in the right way, you will see `JavaScript Enhancements - installing npm dependencies...` and, after a while, `JavaScript Enhancements - npm dependencies installed correctly.` messages in the status bar of Sublime Text 3. Now the plugin is ready!
### Fixing node.js and npm custom path
If the plugin gives to you message errors like `Error during installation: "node.js" seems not installed on your system...` but instead you have installed node.js and npm (for example using [nvm](https://github.com/creationix/nvm)), then you could try to set your custom path in the [Global settings](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Global-settings) of the plugin and then restart Sublime Text.
If you don't know the path of them, use `which node`/`which npm` (for Linux-based OS) or `where node.exe`/`where npm` (for Windows OS) to get it.
If this doesn't work too, then you could try to add the custom path that contains binaries of node.js and npm in the **`PATH`** key-value on the same JavaScript Enhancements settings file. This variable will be **appended** to the **$PATH** environment variable, so you could use the same syntax in it. After this you need to restart Sublime Text. Example of a global setting for `Linux` that uses `nvm`:
```
{
// ...
"PATH": ":/home/lorenzo/.nvm/versions/node/v9.2.0/bin",
"node_js_custom_path": "node",
"npm_custom_path": "npm",
// ...
}
```
For _Linux-based OS_ **REMEMBER** to add `:` (for _Windows OS_ **REMEMBER** to add `;`) at the begin of the `PATH` value!! Like I already said, it uses the same syntax for the $PATH environment variable.
## Usage
[See the Wiki](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki).
## Quick Overview
### Auto-completions
![](https://drive.google.com/uc?authuser=0&id=1NZYWq4kOx9l93zxN7A9TEMUv0VcLfWrt&export=download)
### Errors
![](https://drive.google.com/uc?authuser=0&id=1r8IDItL03tPFwCCsTIdW54rRpascnHAF&export=download)
![](https://drive.google.com/uc?authuser=0&id=1hjtcvuMNZe7NP3_nE10X_6qEEbLvl-AA&export=download)
### Projects with terminal ([TerminalView](https://github.com/Wramberg/TerminalView))
![](https://drive.google.com/uc?authuser=0&id=1gmC6GROJXyhV8DZTHw8Zw_KGlB13g_bL&export=download)
![](https://drive.google.com/uc?authuser=0&id=1Y0NS1eb8aFoxhdn75JLoGgZMPPpqld3Z&export=download)
![](https://drive.google.com/uc?authuser=0&id=1lHXQGN3CoV5-IHAoesEmkiJBjnpU2Lxf&export=download)
See the [Wiki](https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki) for complete examples and the other **features**.
## Support
### Issues/Questions
If you have any problems, create an [issue](https://github.com/pichillilorenzo/JavaScriptEnhancements/issues) (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](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/JavaScriptEnhancements/Lobby).
Email me for any questions or doubts about this project on: [pichillilorenzo@gmail.com](mailto:pichillilorenzo@gmail.com)
### Feature request/enhancement
For feature requests/enhancement, create an issue or use [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/JavaScriptEnhancements/Features).
### Financial contributions
If this project helps you reduce time to develop and also you like it, please support it with a donation on [Patreon](https://www.patreon.com/bePatron?u=9269604), [Open Collective](https://opencollective.com/javascriptenhancements/donate) or using [PayPal](https://www.paypal.me/LorenzoPichilli) 😄👍. Thanks!
[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/LorenzoPichilli)
[![Become a Patron](https://img.shields.io/badge/-Become%20a%20Patron!-red.svg?style=for-the-badge)](https://www.patreon.com/bePatron?u=9269604)
## Credits
### Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/javascriptenhancements#sponsor)]
### Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/javascriptenhancements#backer)]
### Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
## License
_MIT License_