Hasta ahora estábamos acostumbrados a que en Visual Studio pudiésemos editar páginas HTML usando un diseñador que nos permitía alternar entre tres vistas diferentes:

  • Design: edición visual de la página, pudiendo sacar partido a herramienta gráficas y facilitándonos la escritura de textos, creación de tablas, etc...
  • Source: edición directa de código fuente HTML, con ayuda “intellisense”, etc... pero nada visual.
  • Split: dividía el diseñador en dos zonas, mostrando en cada parte los dos modos anteriores, de modo que podíamos editar visualmente algo y ver los cambios reflejados en el código y viceversa.

VS2013_EditorHTML0

En Visual Studio 2013 sin embargo, la primera vez que editamos una página HTML nos damos cuenta de que esta característica ya no está disponible y sólo disponemos de la vista de código.

En Visual Studio 2013 han escrito de nuevo desde cero el editor de HTML, que no tiene nada que ver con el anterior aunque se parezcan en el modo “source”, y han dejado fuera estas funcionalidades imagino que por falta de tiempo (desconozco el motivo).

Lo cierto es que la complejidad de las páginas actuales, con HTML, CSS y JavaScript entrelazados, con partes reutilizables que se dispersan por nuestro proyecto, tanto en aplicaciones en aplicaciones ASP.NET MVC como en Single Page Applications, hace que al final escribamos muchos fragmentos diferentes, no siempre fáciles de relacionar y además el resultado conjunto cambia dinámicamente al ejecutar la aplicación. Por este motivo cada vez tiene menos sentido usar un diseñador gráfico y es más común escribir código directamente y probarlo en un navegador real. De hecho por eso tienen tanto éxito algunos editores de texto avanzados como Sublime Text, tan de moda últimamente.

Además, las facilidades que nos proporciona el nuevo editor para escribir código, sobre todo si instalamos las Visual Studio Web Essential Tools, hacen que muchos no echemos de menos en absoluto el antiguo editor.

Sin embargo si eres de los que realmente lo echan de menos y te gustaría volver a disponer de las tres vistas anteriores y poder editar tus páginas HTML de manera visual, estás de suerte pues es muy sencillo lograrlo.

La primera opción y menos “definitiva” es que, si el archivo que quieres editar pertenece a un proyecto de Visual Studio, puedes pulsar con el botón derecho sobre el mismo en el Explorador de Soluciones y elegir la opción de "Abrir con...". En el diálogo que aparece elige el editor de Web Forms:

VS2013_EditorHTML1
Click para aumentar

También tienes la posibilidad de cambiar el editor por defecto para las páginas HTML de modo que, en lugar de usar el nuevo, se utilice siempre el editor de Web Forms (páginas .aspx) y así puedas tener la edición visual y la vista partida de toda la vida.

Para ello vete a Herramientas·Opciones y dentro del apartado "Editor de texto·Extensión de arhivo" añade las extensiones "htm" y "html" eligiendo como editor el de Web Forms:

VS2013_EditorHTML2

¡Listo! A partir de ahora tendrás la experiencia de edición de siempre, aunque seguramente te perderás muchas de las mejoras de escritura de código “puro” que ofrece el nuevo editor.

Espero que te sea útil.

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA