Cómo convertir VSCode en el editor de rebajas definitivo

Cómo convertir VSCode en el editor de rebajas definitivo

Si escribe para la web, es posible que desee buscar en Markdown. Hay muchas aplicaciones de Markdown que se adaptan a los escritores web. Pero los editores de código gratuitos como Visual Studio Code (VSCode) de Microsoft pueden ser incluso más potentes.





VSCode entiende Markdown y tiene herramientas integradas para obtener una vista previa en HTML. Sin embargo, puede agregar la funcionalidad del procesador de textos, como el conteo de palabras y un corrector ortográfico. También es posible que desee habilitar las personalizaciones específicas del sitio web para la vista previa.



MAKEUSEOF VÍDEO DEL DÍA

Finalmente, la capacidad de copiar Markdown como HTML para que pueda pegarlo limpiamente en un Sistema de gestión de contenido (CMS) es imprescindible.





Descargar e instalar VSCode

Para comenzar, descargue VSCode o su alternativa de código abierto VSCodium. Las versiones de cada uno están disponibles para los principales sistemas operativos de escritorio.

Una vez que hayas descargado e instalado VSCode , ejecute la aplicación para comenzar.



La pantalla de bienvenida predeterminada de VSCode.

Instalar la extensión de recuento de palabras

Comience agregando un contador de palabras. Hay muchas extensiones disponibles que manejan esto. La que mejor diferencia entre palabras reales y código o nombres de archivos es la propia extensión Word Counter de Microsoft.

Descargar: El recuento de palabras Extensión VSCode (Gratis)



  1. Haga clic en Descargar extensión por debajo Recursos en el panel inferior derecho.
  2. Una vez descargado, cambie a VSCode.
  3. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  4. Haga clic en Extensiones .
  5. Haga clic en los puntos suspensivos ( ... ) cerca de la parte superior del panel Extensiones.
  6. Hacer clic Instalar desde VSIX . ​​​​​​​VSCode con la extensión Word Count de Microsoft detectando el número de palabras en un documento de muestra.
  7. Elegir la ms-vscode.wordcount-*.vsix archivo que acaba de descargar.

los El recuento de palabras La extensión ahora debería estar instalada. Pruébelo abriendo un nuevo archivo Markdown y escribiendo. Ahora debería ver un contador de palabras en la parte inferior izquierda de la interfaz:

​​​​​​​Un documento de descuento abierto en VSCode con errores ortográficos detectados por un subrayado ondulado azul suave.

Instalar la extensión del corrector ortográfico

También querrá agregar la función de revisión ortográfica. Al igual que con los contadores de palabras, hay muchas extensiones que manejan la revisión ortográfica. El más popular es Verificación ortográfica del código por Street Side Software ya que está disponible en muchos idiomas.



Descargar: Verificación ortográfica del código Extensión VSCode (Gratis)

  1. Siga los pasos 1 a 6 de la sección anterior.
  2. Elegir la streetsidesoftware.code-spell-checker-*.vsix archivo que acaba de descargar.

los Verificación ortográfica del código La extensión ahora debería estar instalada. Pruébelo abriendo un nuevo archivo Markdown y escribiendo palabras mal escritas.

​​​​​​​La parte inferior derecha de la barra de estado de VSCode con un indicador que muestra cuatro errores ortográficos.

Debería ver una línea ondulada azul debajo de esas palabras junto con un recuento de errores en la parte inferior derecha de la interfaz:

cómo agregar el controlador xbox one a la pc
El archivo VSCode settings.json se abre con un código personalizado agregado.

Personaliza el garabato de error

El mayor problema con esta extensión del corrector ortográfico es el color azul débil que se usa para el garabato que identifica los errores. Tiende a mezclarse con el fondo de los temas oscuros y se reutiliza para otros elementos de Markdown.

Puede intentar cambiarlo a un color rojo intenso como esperaría ver en un procesador de textos:

  1. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  2. Haga clic en Ajustes .
  3. Haga clic en banco de trabajo , después Apariencia .
  4. Desplácese hacia abajo para Personalización de color : Un documento de descuento abierto en VSCode con errores ortográficos flagrantes detectados por un fuerte subrayado rojo ondulado.
  5. Hacer clic Editar en settings.json .
  6. Pegue el siguiente código en el editor que se abre en una nueva pestaña: 
    "editorInfo.foreground": "#ff0000"
    Un documento de descuento abierto en VSCode con tres errores ortográficos.
  7. y guarde el archivo.

Ahora, si escribe mal una palabra, VSCode la decorará con un garabato rojo brillante:

Un documento HTML correctamente formateado abierto en VSCode.

Ignorando los falsos positivos

Es posible que el corrector ortográfico no reconozca ciertos términos específicos de la industria o nombres propios, como nombres de empresas. En la captura de pantalla anterior, por ejemplo, VSCode resalta la abreviatura 'distro' como un error ortográfico.

Para dejar de ver estas palabras como errores, querrá agregarlas a su Ajustes de usuario .

  1. Haga clic derecho en la palabra que desea que el corrector ortográfico ignore.
  2. pasar el cursor sobre Ortografía y seleccione Agregar palabras a la configuración del usuario . ​​​​​​​Este artículo se abre como un archivo de descuento en VSCode con la vista previa predeterminada.

A partir de ahora, el corrector ortográfico ya no identificará estas palabras como incorrectas:

El menú Configuración de VSCode > Extensiones > Markdown > Markdown: Estilos.

Instalar Copy Markdown como extensión HTML

A continuación, instale Copiar Markdown como extensión HTML para que pueda copiar y pegar Markdown con formato.

Descargar: Copiar Markdown como HTML Extensión VSCode (Gratis)

  1. Siga los pasos del 1 al 6 de las secciones anteriores.
  2. Elegir la jerriepelser.copy-markdown-as-html-1.1.0.vsix archivo que acaba de descargar.

Ahora debería poder copiar Markdown de VSCode y pegarlo en un CMS como HTML limpio. Para probar esto:

  1. Seleccione algún texto de Markdown.
  2. Abre el Paleta de comandos en el Vista menú, o presionando CTRL+Mayús+P .
  3. Elegir Markdown: Copiar como HTML : Este artículo como un archivo de descuento abierto en VSCode con la vista previa personalizada para parecerse a MUO.
  4. Pegue el Markdown copiado en un nuevo archivo HTML.

Debería ver que el Markdown copiado se pegó correctamente como HTML:

La pantalla de bienvenida de VSCode en el tema claro.

Personalización del panel de vista previa

De forma predeterminada, el panel de vista previa tendrá el mismo estilo que el tema VSCode actual.

El descuento de este artículo se abre en VSCode usando el tema de Office de huacat.

Sin embargo, es posible que desee que las vistas previas reflejen más de cerca el destino final de su contenido. Puede personalizar el panel de vista previa para que su Markdown parezca que ya está en el sitio web en el que está publicando.

Puede utilizar cualquier sitio web que desee; los siguientes estilos fueron tomados de MUO. Sólo use la herramienta de inspección de elementos de su navegador para encontrar fuentes y elegir colores de cualquier sitio web .

  1. Cree un nuevo archivo y llámelo algo como ' CustomStyles.css '
  2. Pegue el siguiente código CSS de ejemplo en el archivo: 
    body { 
      background-color: #fff; 
      color: #2c2c2c; 
      font-family: Roboto; 
      font-size: 18px; 
      font-weight: 400; 
      line-height: 1.7em; 
      max-width: 750px; 
    } 
      
    h1 { 
      font-size: 38px; 
      font-weight: 800; 
    } 
      
    h2 { 
      font-size: 34px; 
      font-weight: 700; 
    } 
      
    h3 { 
      font-size: 24px; 
      font-weight: 700; 
    } 
      
    a { 
      border-bottom: 2px solid #bf0d0b; 
      color: #bf0d0b; 
      font-weight: 700; 
    } 
      
    a:hover { 
      color: #fff; 
      background: #bf0d0b; 
    } 
      
    strong { 
      font-weight: bold; 
    }
  3. y guarde el archivo.
  4. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  5. Haga clic en Ajustes .
  6. Haga clic en Extensiones y entonces Reducción .
  7. Desplácese hacia abajo para Rebajas: Estilos y haga clic Añadir artículo .
  8. Introduzca la ruta de su CustomStyles.css archivo, por ejemplo: 
    C:\Users\Adam\CustomStyles.css
    El descuento de este artículo abierto en VSCode usando el tema Material de Equinusocio.
  9. Hacer clic OK .

Una vez que haya hecho esto, debería terminar con un panel de vista previa que se parece mucho a este artículo.

Nuevamente, obtuve estos valores usando la herramienta Inspeccionar elemento de mi navegador en MUO, pero querrá encontrar los valores para su propio sitio web de destino.

Editor de temas

El tema predeterminado de VSCode viene en oscuro y claro, con versiones de alto contraste de cada uno. Pero como cualquier buen editor de código, hay una tonelada de excelentes temas de terceros disponibles .

Si prefiere el aspecto de un procesador de textos al de un editor de código, le recomiendo el tema de Office de huacat:

¿Es seguro comprar g2a?

Si prefiere un editor de código, los temas comunes como Drácula, Gruvbox, Material (vea la captura de pantalla a continuación) y Nord están disponibles en el mercado de extensiones.

Para instalar un nuevo tema:

  1. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  2. Haga clic en Extensiones .
  3. Busque cualquiera de los temas mencionados anteriormente o simplemente filtre la categoría para temas y explore lo que está disponible.

¿Es VSCode el editor de rebajas definitivo?

Entonces, ¿es VSCode el mejor editor de Markdown para contenido web? Fuera de la caja, probablemente no. Pero es tan extensible como cualquier cosa podría ser.

Los contadores de palabras, los correctores ortográficos, Copy Markdown como HTML, las personalizaciones de vista previa y los temas solo rascan la superficie. Hay un ecosistema lleno de extensiones disponibles para VSCode, y eres libre de personalizarlo.