What editor can display function and class structure view of Javascript?

Question

You know there are many functions in Javascript file, it's too complex to when a js file grow up.

Just like Android Studio IDE which can display function and class of a java file.

Js File

function ClassURLPar() {
    this.filename;
    this.diskindex=0;
    this.diskcount=1;
    this.imagefilter = 0;
    this.sortby = 0;
    this.path = "/";
    this.view = 0;
    this.searchtext;
    this.sizemore = 0;
}

var mURL = new ClassURLPar();


function SetMainUIByURLPar() {    
    InimURL();
    SetTabs();
    SetFixedNav();    
    SetControlUI();
    SetControlJump();
    SetModalForm();   
}



function InimURL() { 
    mURL.filename = window.location.pathname.substring(1);
    mURL.diskindex = GetUrlParam('diskindex');  
}

you can check it in webstorm by clicking on `Structure` ub project explorer — brk, Mar 20 '17 at 10:07

score 1 · Answer 1 · edited May 23 '17 at 12:17

1

I believe almost every modern IDE has such feature as source structure view.

Here is a list of popular JavaScript IDE with that feature:

WebStorm (built-in feature)
Notepad++ (built-in feature)
Atom (use plugin or navigate by shortcut)
Sublime Text (use plugin or navigate by shortcut)
Visual Studio Code (navigate by shortcut)

edited May 23 '17 at 12:17

Community

1
1

answered Mar 22 '17 at 16:01

Anton Temchenko

1,440
1
13
28

Thanks! does it mean that Visual Studio Code only support? can I download a plugin which support source structure view ? – HelloCW Mar 23 '17 at 04:04
And more, the shortcut in Visual Studio Code can't keep display, so I think that **source structure view** is the better solution – HelloCW Mar 23 '17 at 04:07
1

@HelloCW, I use WebStorm and I like it. I don't really like Microsoft products, especially different Visual Studio's. If you don't want to pay I advise you to use Atom with plugin or Sublime Text. Also some people are happy using Notepad++ – Anton Temchenko Mar 23 '17 at 08:14
Thanks! I test WebStorm, it's OK, the only bad thing is money. Notepad++ is hard to config for displaying function list for javascript ! – HelloCW Mar 23 '17 at 08:35

score 0 · Answer 2 · answered Mar 20 '17 at 10:09

0

This may be personal opinion but for me it is :

On free IDE

visual studio code

is best . and if you are ready to pay for it then

webstorm

is the winner .

answered Mar 20 '17 at 10:09

Ashutosh Jha

15,451
11
52
85

Thanks! I have installed visual studio code, but it seems that it can't display function and class structure view of Javascript – HelloCW Mar 20 '17 at 14:54
You can see https://www.dropbox.com/s/swtpo3jpjd5ya9h/vs.PNG?dl=0 – HelloCW Mar 20 '17 at 15:08

score 0 · Answer 3 · answered Mar 23 '17 at 06:56

0

The best one would be as I use it is developer tools in chrome(you can edit and see the changes in runtime).

If you want to edit at source you can also use Netbeans editor

answered Mar 23 '17 at 06:56

Mukesh Kulal

20
5

score 0 · Answer 4 · answered Mar 24 '17 at 13:04

I think currently best free editors to code with javascript are

Visual Studio Code

Atom

SubLime

All of them are very easy to use and full filling your requirements. Try Visual Studio Code first. You can also use chrome developer tools as it shows object structure while debugging and you can test your code with live changes.

What editor can display function and class structure view of Javascript?

4 Answers4