Editor de texto con un panel de árbol de código

Mi archivo JavaScript contiene entre 10 y 20 funciones. Estoy usando Notepad ++ y puedo doblar el código en esas funciones. Pero necesito una pestaña adicional (o cuadro o ventana) en la misma ventana que estoy editando donde puedo ver una lista (o árbol) con todas esas funciones. Entonces puedo hacer clic en cualquier función y luego saltar con el cursor a la función en la que hice clic.

La lista de funciones/ventana de árbol debería verse similar a la lista de archivos en el editor Atom (esa pestaña ubicada a la izquierda del área de edición)

No sé si Notepad ++ tiene esa función, pero tal vez haya algún editor capaz de hacer eso.

Edición posterior: cambié el título de la pregunta. No sabía que se llama "panel de árbol de código"

Algunas personas, cuando se enfrentan a la codificación, piensan "Lo sé, usaré Notepadd ++". Ahora ellos tienen dos problemas. ( Lo siento , no pude resistirme. Me encanta Notepad++ y lo uso a diario, pero en casa y en el trabajo, para texto . Para código, use un IDE. Obtendrá refactorización, saltará a función/declaración/uso de variable, finalización de código , documentación de las funciones del sistema y, lo más importante, un depurador. Si no tiene uno o no sabe cómo usarlo, deje de codificar ahora y aprenda. Ahorrará mucho tiempo.
Un IDE es aún más importante para un lenguaje interpretado como JS, ya que la mayoría de los buenos IDE tienen un Linter . Notepad ++ es excelente, pero no le dirá cuándo escribe mal el nombre de una variable, o algo peor.
Con un buen IDE, aunque puedes doblar el código, nunca me molesto en hacerlo. ¿Cuál es el punto de? Por lo general, solo se usa para facilitar la navegación a través de su código. Con un buen IDE, puedo obtener fácilmente una lista de funciones en un archivo determinado, hacer clic y saltar a una. Puedo ver que mi código accede a una variable o función y salta a su declaración, o a todos sus usos. ¿Por qué querría doblar el código?
@Mawg Cualquier editor de texto que admita la coloración de sintaxis para un idioma debería poder tener un linter para ese idioma. Atom y VSCode y probablemente muchos otros tienen js linters.
Esos son IDE. Notepad ++ no es un IDE y nota, AFAIK, admite un linter. Sin embargo, la pinta principal es el depurador. Ninguna característica es más importante que tener un depurador

Respuestas (2)

El editor CudaText (ligero y gratuito) tiene un panel de árbol de códigos con una lista de funciones. Alternado por F12. Compatible con muchas sintaxis, JavaScript también.

Árbol CudaText JS

Gracias, funciona y es mucho más ligero que Visual Studio Code.

Las versiones más recientes de VS Code tienen una "Vista de esquema de código".

Se puede hacer clic en los nombres de las funciones en ese panel (ver abajo a la izquierda en la captura de pantalla) y se moverán a la definición de la función en el archivo JS.

ingrese la descripción de la imagen aquí

Editor de texto con un panel de árbol de código
RespuestasAquíPolítica de privacidad1y, 0v