2

My JavaScript file contains some 10 to 20 functions. I am using Notepad++ and I can fold the code in those functions. But I need an extra tab (or box or window) in the same window I am editing where I can see a list (or tree) with all those functions. So I can click on any function and then to jump with the cursor at the function that I clicked on.

The functions list/tree window should look something similar with the file list in the Atom editor (that tab placed to the left of the editing area)

I don't know if Notepad++ has such a feature but maybe there is some editor capable to do that?

Later edit: I changed the title of the question. I didn't know it's called "Code tree panel"

|improve this question
  • Some people, when confronted with coding, think "I know, I'll use Notepadd++." Now they have two problems. (Sorry - I couldn't resist it. I love Notepad++ and use it daily, but at home and work - for text. For code, use an IDE. You will get refactoring, jump to function/variable declaration/usage, code completion, documentation of system functions, and, most importantly a debugger. If you don't have one or don't know how to use one, stop coding now and learn. You will save a lot of time. – Mawg Aug 22 '18 at 14:36
  • An IDE is even more important for an interpreted language like JS, as most good IDEs have a Linter. Notepad++ is excellent, but it won't tell you when you mis-spell a variable name, or worse. – Mawg Aug 22 '18 at 14:38
  • With a good IDE, although you can fold code, I never bother to. What’s the point? It is generally only used to make it easier to navigate through your code. With a good IDE I can easily pull up a list of functions in a given file, click and jump to one. I can see that my code accesses a variable or function and jump to its declaration, or all uses of it. Why would I want to fold code? – Mawg Aug 22 '18 at 14:41
  • @Mawg Any text editor supporting syntax coloring for a language should be able to have a linter for that language. Atom and VSCode and probably many others have js linters. – Joan Charmant Aug 23 '18 at 13:48
  • Those are IDEs. Notepad++ is not an IDE and does note, AFAIK, support a linter. The main pint though is the debugger. No feature is more important than having a debugger – Mawg Aug 29 '18 at 8:29
2

CudaText editor (light and free) has Code Tree panel with function list. Toggled by F12. Supported for many syntaxes, JavaScript too.

CudaText JS tree

|improve this answer
  • Thanks, it works, and it is much litghter than Visual Studio Code. – DreamCode Aug 29 '18 at 7:47
3

Newer versions of VS Code have a "Code Outline View".

The function names in that panel (see lower left in screenshot) are clickable and will move to the function definition in the JS file.

enter image description here

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.