Текстовый редактор с панелью дерева кода

Мой файл JavaScript содержит от 10 до 20 функций. Я использую Notepad++, и я могу сложить код этих функций. Но мне нужна дополнительная вкладка (или поле, или окно) в том же окне, которое я редактирую, где я могу видеть список (или дерево) со всеми этими функциями. Таким образом, я могу нажать на любую функцию, а затем перейти с курсором на функцию, на которую я нажал.

Окно списка/дерева функций должно выглядеть примерно так же, как список файлов в редакторе Atom (эта вкладка расположена слева от области редактирования).

Я не знаю, есть ли в Notepad++ такая функция, но, может быть, есть какой-нибудь редактор, способный это сделать?

Позднее редактирование: я изменил название вопроса. Я не знал, что это называется "Панель дерева кода"

Некоторые люди, сталкиваясь с программированием, думают: «Я знаю, я буду использовать Notepadd++». Теперь у них две проблемы. ( Извините , я не мог устоять. Я люблю Notepad++ и использую его каждый день, но дома и на работе - для текста . Для кода используйте IDE. Вы получите рефакторинг, переход к объявлению/использованию функции/переменной, завершение кода , документация по системным функциям и, самое главное, отладчик. Если у вас его нет или вы не знаете, как его использовать, прекратите программировать сейчас и учитесь. Вы сэкономите много времени.
IDE еще более важна для интерпретируемого языка, такого как JS, поскольку в большинстве хороших IDE есть Linter . Notepad ++ превосходен, но он не сообщит вам, если вы неправильно написали имя переменной, или еще хуже.
С хорошей IDE, хотя вы можете сворачивать код, я никогда не заморачиваюсь. В чем смысл? Обычно он используется только для облегчения навигации по коду. С хорошей IDE я могу легко открыть список функций в заданном файле, щелкнуть и перейти к одной из них. Я вижу, что мой код обращается к переменной или функции и переходит к ее объявлению или ко всем ее применениям. Зачем мне сворачивать код?
@Mawg Любой текстовый редактор, поддерживающий подсветку синтаксиса для языка, должен иметь линтер для этого языка. Atom, VSCode и, вероятно, многие другие имеют js-линтеры.
Это IDE. Notepad++ не является IDE и, насколько я знаю, поддерживает линтер. Но главное — это отладчик. Нет функции более важной, чем наличие отладчика

Ответы (2)

Редактор CudaText (легкий и бесплатный) имеет панель Code Tree со списком функций. Переключается по F12. Поддерживается для многих синтаксисов, JavaScript тоже.

JS-дерево CudaText

Спасибо, это работает и намного легче, чем Visual Studio Code.

Более новые версии VS Code имеют «Просмотр структуры кода».

Имена функций на этой панели (см. левый нижний угол на снимке экрана) кликабельны и переместятся к определению функции в файле JS.

введите описание изображения здесь

Текстовый редактор с панелью дерева кода
СпросиСетьПолитика конфиденциальности1y, 0v