Sublime Forum

JavaScript Enhancements - Sublime Text 3 into a JavaScript IDE like

#1

Hello to all,

I’m the author of the JavaScript Completions plugin, but now I’m working mainly on the JavaScript Enhancements plugin. It is in Beta for testing! Is there someone interested to this project??

Like I said in the github repo, it use Flow (a static typechecker for JavaScript from Facebook) under the hood and it will offer not only a better JavaScript autocomplete but a lot of features about creating, developing and managing JavaScript projects, 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
  • 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
  • JavaScript real-time errors
  • Code Refactoring
  • etc.

It will turn Sublime Text into a JavaScript IDE like!

OS supported now

  • Linux (64-bit)
  • Mac OS X
  • Windows (64-bit): released without the use of 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 :disappointed: . Has someone any advice or idea about that? Is there something similar to the TerminalView plugin for Windows?? Thanks!

You can install it using Package Control or Manually. More info in the link provided.

Thanks to all for your time in advance! :slight_smile:

5 Likes

#2

I released the first version of it!

0 Likes

#3

For Windows support I will create these days a degraded mode of it BUT without the use of TerminalView plugin, so WATCH the repository :smiley: . Like I said in the README.md file, TerminalView plugin is not available for Windows unfortunately!

0 Likes

#4

Finally I released the new version with support for Windows without TermivalView plugin but using the cmd.exe shell!

1 Like

#5

Great work man! :ok_hand:

0 Likes

#6

Thanks! :smile:

0 Likes

#7

This plugin has been finally published on Package Control! :grinning:

1 Like

#8

Hey @pichillilorenzo, this looks great (from the screenshots though). Could you please add an option to disable the default keymaps? Nearly all of the default mapping is conflicting with other stuff I have :slight_smile:

Thanks!

0 Likes

#9

@iamntz Yeah, I will add something for that :thumbsup:

1 Like

#10

@iamntz Done! Now, using version 0.13.15, you can turn off the default plugin keymaps. Just go to the plugin settings and set to false the "enable_keymap" option. :smile:

1 Like

#11

Released 0.15.0 version with other fixes and features such as Code Refactoring!

1 Like

#12

great work @pichillilorenzo. You are thinks implemente Vue in plugin?

0 Likes

#13

I was thinking about that in the next release! also for Nativescript. :thumbsup:

1 Like

#14

When I install from package control it keeps giving me an error that says ‘node js not installed’ while node is indeed installed in sublime. Anyone has an idea how to resolve? Thanks!

0 Likes

#15

@chevaldetroi You need to give me more information about that! please create an issue on the github repo with the info that you can find on the ISSUE_TEMPLATE when you create it, such as Sublime Text console logs etc. thanks

0 Likes

#16

@pichillilorenzo i finally tried the plugin and it works awesome. I found some issues with an extract to a global function, but that’s just a nitty gritty and i’m sure you already know about it:

Anyhow, the bigger issue i have is that it overides (some) of the snippets i use. Is this really required? There is an arcane reason why this is happening? Thanks!

0 Likes

#17

Yeah I have already fixed that! It is taking time to release the new version because I was trying to get it work with Vue.js projects but I discovered that Flow can’t recognize the syntax of .vue files and there aren’t definitions available for this framework. This is because of some features that Flow doesn’t have yet! An initial work was done by a Member of Vue.js (kazupon) with this pull request:
Support flowtype definition for flow-typed (WIP) #5027, but they can’t go on these definitions because:

Until this-type: facebook/flow#452 and library augmentation: facebook/flow#396 are supported in Flow hardly can we take any further action.
HerringtonDarkholme [Vue.js Contributor]

I’m really sorry about that @mauroreisvieira. I will add Vue.js projects but they will have less support unfortunately because of nature of Flow at this moment! :disappointed_relieved:

But now I finally understood how the flow ide command works in order to have better performance when showing completions! I hope to release the new version as soon as possible!

1 Like

#18

I’m working on something you may be interested in: https://www.dropbox.com/s/2ov6prv7cfn7sca/Screenshots.zip?dl=0

Basically Acecool Code Mapping System is similar to CodeMap except it comes with a lot of languages mapped, uses Sublime Text Symbols for quick / universal language mapping, has category and nested category support so there is no wasted space, allows many different methods of outputting the data ( ie Path.To.Class.FuncName( args ) as an entry in a category or having Path.To.Class as a category with FuncName( args ) as an entry underneath to save space, or shorten so Class.FuncName( args ) as the entry…

I’ve just started added similar features to JavaScript… I’m still working on making this addon standalone because there is a huge problem with the previous partnership…

For example - .php file extension supports 6 or so languages… PHP, HTML, JavaScript, CSS, RegEx ( PHP and JavaScript implementations ), SQL… With CodeMap ( which is currently needed until I finish up a few things ) you would have to have the map for .php with everything in it… that it also means languages which use multiple extensions such as cpp, .h, etc… can’t use the same class easily either…

So my method is to map file extensions and define which languages they use… You then create language maps and classes to add extra mappings for your projects… in a settings file for the extension you define the languages the file uses, and ( eventually) you define when the mapper is active… For php would be inside of <? ?> tags, html outside… for CSS - html must be active and Style tag found… for JavaScript, html must be active and then inside of script tag… for RegEx JavaScript or php must be active and their function call, or some other method will be used to detect them… sql would be detected in function calls, etc…

Rules based - but also very easy to set up…

Then, You can decide which class to use ( for each language ) so if you have a project in PHP where you want to expand accessor funcs into their various functions as entries you can create a class extending PHP and then in your mapping config for the language itself ( not the extension ) you would define that PHP.User class is active if the file is ( and a set of rules - so it can be active in a folder, all the time, etc… )…

This addon is a vital part of any idea - being able to quickly and easily identify code, errors, tasks, notes, etc… from a file potentially thousands of lines long and be able to jump to that block of code with a single double-click or other action ( and I plan on adding multiple panel support so one can be mapping, the other for notes / tasks / errors / and one more for snippets with the user deciding as much or as little as they want to see )… makes a world of difference and improves coding efficiency many times over…

I’m currently working on making it stand-alone and I am almost to the point where I can start removing all of the configuration from the class files ( and split them up ) and into sublime-settings files, along with displaying the data in the panel I create and control… Right now to use it, it is still displayed through CodeMap but hopefully the next few days I’ll have my panel working as desired ( right now it opens and closes without any issues, properly detects when open after closing st and reopening st - but if the user closes it with middle-mouse or X instead of the context menu [ and this bug exists in CodeMap with the additional bug being that it also exists with context menu and key-binds ] then not only does the group close, it closes the next file which takes focus - so it’s either a sublime text issue or something I need to figure out… At the moment, I’m a few steps ahead of CodeMap because the bug only exists in one place instead of 4 but I can’t seem to figure out why - and it happens with the user closing the tab instead of through my code which is why I think it is from sublime text… )…

Sorry for the wall - but once it is stand alone if you want to link the IDE project through my system ( ie group of addons to build this system ) then feel free to message me :slight_smile:

I’m all about efficiency, backwards / future compatibility, effective and bug-free coding, and human readable so I use my own coding standards while coding.

Oh, I’m also simplifying the callback system - right now there are a lot of arguments for each callback and this is annoying to update, especially as my database of language mappers grows so I’ll be using an object as the argument so that can be altered without having to go through all of the mappers and alter them ( which would then require the users to too )…

And, finally, since advanced panels aren’t possible in Sublime Text, but we are given access to Python and Python has a lot of cross-platform gui modules - and some addons create panels this way - I may create a more advanced panel ( the user can then choose to use the advanced external or the more basic internal panel( s ) ) with many more output options such as more advanced trees ( I will offer folding support with my categories too soon ) dropdowns to select other aspects quickly, and to filter what they want along with a quick-search field… but this is down the road a little…

Anyways, let me know if you’re interested…

0 Likes

#19

Cool!! Last year I have tried to do something like that for JavaScript! I used the flow ast command to get the AST tree of the code and then, traversing it, I was getting all the information about classes, methods, properties, functions, etc. like your plugin with also folding support.

First, I have tried to work with the Tkinter Python GUI module, but Sublime Text 3 doesn’t include it :disappointed:… So, my attempt was to call the UI executing the code with python3 my_ui.py user side (in this case the user needed python 3 installed on the machine) and then exchange data using tcp sockets. It was working but I didn’t like so much Tkinter and I did not want to force the user install python 3 to work with my plugin so I gave up using it.

Then, I tried to use Electron… Yeah, it was working but the problem was that the code was a mess. Too much complicated to do a “relatively” simple thing: exchange data between sublime text and the electron server and then exchange data to update the view between electron server and electron client. So I gave up also here.

Do you have an idea on how to create more advanced output using cross-platform gui modules without the user having python 3 already installed on the machine? Because I’m really interested in it too! Thanks :slight_smile:

For now I just implemented something very simple (that however need an update) to create fake buttons, inputs, select, etc.: WindowView

However yeah, let me know when it will be stand alone! :smile:

1 Like

#20

No problem @pichillilorenzo. Great work is very good plugin, to be continued to work on it, and again, very good!

1 Like