🧜 🌓 🌋 Visual Studio Code Code Editor. La guía más detallada para configurar e instalar complementos para principiantes 👋🏼 👩‍👦‍👦 🤵🏽

Gratis, potente, muy popular, con un montón de complementos, ¿qué puedo decir, el propio Facebook lo eligió como editor principal!

Hoy nos centraremos en el editor de código de Visual Studio Code o simplemente VS Code. Lo instalaremos, configuraremos y también utilizaremos complementos que simplificarán enormemente nuestro trabajo.

Si el editor de código Sublime Text 3 es más interesante, el artículo aquí https://habr.com/en/post/458206/

Contenido:

Eliminar

Si ya usa VS Code, pero decidió comenzar desde cero, le mostraré cómo eliminar completamente el programa, incluidas todas las configuraciones y complementos. Además del hecho de que el programa debe eliminarse del panel de control de Windows, también debe ir al Disco C> Usuarios> Su nombre de usuario y eliminar la carpeta .vscode aquí.

AppData debe agregarse en la barra de ruta, luego ir a la carpeta Roaming y aquí debe eliminar la carpeta Code.

Instalación

Ok, ahora podemos instalar el programa. Vaya al sitio web code.visualstudio.com , sección Descargar. Hay una versión para Mac, Linux. Estoy interesado en Windows Haga clic y descargue a su PC. Por cierto, el sitio web del programa es muy útil, por lo que te aconsejo que lo estudies.

El programa se descarga, ejecuta el instalador y sigue las instrucciones: acepta, agrega todas las marcas de verificación y espera hasta que el programa esté instalado en nuestra PC.

Corriendo en una máquina débil

Cuando el programa está instalado, podemos iniciarlo. Pero no se iniciará en todas las computadoras. El hecho es que el programa requiere muchos recursos. Por lo tanto, en una máquina débil, puede obtener este resultado: en lugar de la interfaz del programa, una pantalla en negro y el procesador suda al 100%. Pero hay una salida: debe abrir el menú contextual del acceso directo del programa y agregar la siguiente marca en la ruta al archivo: --disable-gpu

Genial, ahora el programa comenzará incluso en la calculadora.

Configuración de idioma

El programa se inicia y podemos comenzar a familiarizarnos con él. Y para que sea más fácil de conocer, instalaré el idioma ruso. Para hacer esto, hago clic en el icono de extensiones. En el campo de búsqueda, comienzo a escribir en ruso hasta que veo el paquete de idioma ruso para el paquete de código de Visual Studio.

Hago clic en el botón Instalar. A continuación, el programa le pedirá que reinicie, haga esto. Genial, ahora será mucho más claro. Pero, si habla inglés, no es necesario cambiar al ruso.

Pantalla de bienvenida

Esconderé el panel lateral por ahora, volveremos a él más de una vez.
Lo primero que vemos es la pantalla de bienvenida. Aquí hay un elemento con el que podemos importar todas las configuraciones, claves de editores ya instalados, por ejemplo, Vim, Sublime, Atom y otros.

Esto acelerará enormemente y facilitará la transición de un editor a otro. Pero hoy haremos todo desde cero. Además, hay otros enlaces útiles: información general sobre la interfaz, así como una lista de métodos abreviados de teclado en una forma muy conveniente y mucho más.

Le aconsejo que estudie esta pantalla, y cuando ya no sea necesario cada vez que inicie el programa, debe desmarcar esta casilla de verificación. Más tarde, siempre puede llamarlo desde el menú Ayuda> Saludo.

Interfaz fuera de la caja

¿Demasiado perezoso para leer? Aquí está la versión en video.

Se han realizado todos los preparativos y ahora podemos familiarizarnos con la interfaz del programa y, al mismo tiempo, ver qué puede hacer VS Code de forma inmediata.

Llamamos a la ventana de información de la interfaz general y vemos los elementos principales del programa.

Arriba vemos el menú. Lo siguiente es la interfaz de ejecución de cualquier comando que siempre podamos llamar. Área general del editor. Barra de acción izquierda. A continuación se muestra la barra de estado, y comenzaremos con ella. Las sugerencias nos dicen que hay una Vista de errores y advertencias. Puede llamar al terminal incorporado.

Consideremos todo con más detalle.

Barra de estado

Problemas

En el lado izquierdo, los números al lado de los iconos mostrarán la cantidad de errores y advertencias que surgieron durante la ejecución del código.

Para abrir el panel, debe hacer clic en estos iconos o mantener presionadas las teclas Ctrl + Shift + M , aquí veremos el texto de los mensajes de error.

En el panel, puede filtrar estos mensajes, minimizarlos, expandir todo el panel a pantalla completa o cerrarlo.

Consola de depuración

Además de la pestaña para la salida de problemas en este panel, todavía tenemos una consola de depuración, volveremos a ella.

Conclusión

El registro de salida del trabajo de todos los programas y sistemas del editor. Aquí también puede filtrar este registro, borrarlo, bloquear el desplazamiento de mensajes, expandir el panel o cerrarlo.

Terminal

La última pestaña de este panel es el terminal integrado. Puede llamarlo presionando Ctrl + ` .

En el Panel de control, también puede agregar terminales, dividir la ventana en varias partes, eliminar la ventana de terminal, alternar entre las ventanas de terminal y también seleccionar el shell predeterminado.

Por ejemplo, tengo instalado GitBash. Seleccionándolo, agregando una nueva ventana de terminal, esta interfaz se abrirá para mí. Tradicionalmente, aquí puede expandir el panel a pantalla completa y cerrarlo.

Notificaciones

A la derecha en la barra de estado vemos notificaciones, ahora no están allí. También es posible enviar un tweet con comentarios sobre el programa.

Además, aparecerán muchos otros elementos en la barra de estado.

Menú de contexto

También podemos llamar al menú contextual y eliminar de esta línea lo que no usamos. Por ejemplo, un tweet de revisión para hacer espacio.

También en el mismo menú contextual podemos ocultar esta línea por completo.

Barra de acciones

Por defecto, un panel de acción con 6 elementos se encuentra en la parte izquierda del editor:

Explorer, es un administrador de archivos incorporado;
Buscar;
Sistema de gestión de control de versiones;
Lanzamiento y depuración de aplicaciones;
El instalador para varios complementos es nuestro editor;
En la parte inferior hay un engranaje, haciendo clic en el cual veremos un menú de la configuración principal del programa.

Conductor

Vamos a empezar con el Explorer, se puede abrir haciendo clic en el icono o mantenga pulsada la tecla Ctrl + Shift + E .

Es muy conveniente que cuando pasa el cursor sobre el ícono, el editor nos solicita un atajo de teclado.

Aquí vemos 3 pestañas principales:

Editores abiertos: aquí habrá una lista de archivos abiertos para editar.
Pestaña con carpetas, proyectos. Ahora no tenemos carpetas abiertas.
La estructura: ahora no hay nada aquí, volveremos a ella más tarde.

La ventana de bienvenida ya podemos cerrar. Cuando todas las ventanas están cerradas, el editor muestra un código auxiliar donde muestra los atajos de teclado para las acciones principales:

agreguemos una carpeta vacía a nuestro proyecto futuro en el editor. Para hacer esto, haga clic en Abrir carpeta o simplemente arrástrelo a este campo.

Ahora tenemos una carpeta vacía hello_vscode, así como algunos controles:

Crea un archivo;
Crea una carpeta;
Actualiza todos los archivos y carpetas;
Contraer todo en Explorer.

Creemos algunos archivos que necesitamos para el proyecto. Haga clic en Crear archivo, escriba, por ejemplo, Index.html. A continuación, podemos crear una carpeta css y crear un archivo style.css en ella. Es muy conveniente utilizar este administrador de archivos incorporado.

También puede usar el menú contextual para crear archivos y carpetas. Además de esto, también hay características interesantes, por ejemplo, mostrar la carpeta en el Explorador de Windows.

Ahora podemos ir a Index.html y escribir algo interesante allí, por ejemplo, "Hola Código VC".

Resaltado de sintaxis

Solo quiero decir algunas palabras sobre el resaltado de sintaxis: esta es la capacidad del editor para reconocer el código y colorear sus elementos individuales. Cuando abrimos el archivo y comenzamos a trabajar en él, apareció un elemento html en la parte inferior de la barra de estado además de otros elementos nuevos. Esto significa que el editor ha reconocido el idioma y lo ha resaltado en consecuencia. Al hacer clic en este elemento, veremos una gran lista de aspectos destacados para varios idiomas.

Es posible que esta lista no incluya absolutamente todo. Por ejemplo, si estamos trabajando con un archivo .kit. Creemos index.kit y copie nuestro código allí. Veremos que no hay resaltado y, en lugar del elemento html, veremos el texto sin formato. ¿Qué hacer en este caso? Tenemos que hacer clic en texto sin formato y aquí tenemos una opción: en lugar de la detección automática, podemos intentar buscar complementos para resaltar la sintaxis específicamente para archivos .kit.

Si esto no funciona, entonces podemos configurar las asignaciones. Haga clic aquí y seleccione un idioma de mapeo para los archivos .kit. En mi caso es html.

Ahora todos los archivos .kit que el programa reconocerá como un archivo html y lo resaltarán en consecuencia. Volvamos a nuestro archivo html real. Guardaremos todo lo que hemos editado aquí. El resultado del trabajo se puede ver abriendo este archivo en el navegador. En la pestaña de estructura, veremos que tal estructura de árbol de nuestro documento ha aparecido.

Una característica útil adicional del explorador es su menú contextual, donde podemos mostrar u ocultar cualquier pestaña. Por ejemplo, eliminaré la estructura y eliminaré los editores abiertos.

Como resultado, solo tendré una carpeta de proyecto.

Buscar

Buscar ( Ctrl + Shift + F ): lo que necesita. Escribimos la palabra hola, que indicamos en nuestro archivo html. La búsqueda lo encontró de inmediato, resaltado, mostró en qué archivo. Puede reemplazar inmediatamente esta palabra con alguna otra.

Es conveniente para nosotros mostrar todo esto haciendo clic aquí en el icono de la palabra será reemplazada.

Sistema de gestión de control de versiones

Abrir la pestaña puede hacer clic en el icono o mantenga pulsada la tecla Ctrl + Shift + G . Para aquellos que ya están familiarizados con los sistemas de control de versiones, como Git, apreciará esta característica. Un poco más tarde, mostraré cómo vincular mi proyecto local con el repositorio en GitHub.

Depuración de aplicaciones

El siguiente elemento en la barra de acción es Depuración de la aplicación. Esta herramienta, tanto de forma independiente como con la ayuda de complementos de terceros, nos permite analizar la ejecución de un código de programa en particular.

Por ejemplo, tenemos algún tipo de código de JavaScript, y para comenzar a depurar, podemos hacer clic en el botón aquí o presionar F5.

El resultado de la depuración se mostrará en el panel inferior, también puede establecer los llamados puntos de interrupción del código y moverse entre ellos, lo cual es muy conveniente.

Extensiones

Aquí tenemos todo un almacén de extensiones y complementos para nuestro editor. Ya hemos usado esta pestaña para instalar el paquete de idioma. Hacemos clic en el icono o al mantener presionada la combinación de teclas Ctrl + Shift + X veremos un campo de búsqueda de extensiones y tres pestañas adicionales:

Habilitado: se muestran todas las extensiones instaladas;
Recomendado
Extensiones que están instaladas pero deshabilitadas.

En la pestaña con nuestras extensiones instaladas, tenemos acceso rápido a ellas, podemos ver, leer información, teclas de acceso rápido, descubrir todos los detalles sobre esta extensión. Además, se puede eliminar aquí haciendo clic en el botón Eliminar. Volveremos a las extensiones e instalaremos las mejores y más útiles.

Configuraciones

En el panel de acción, todavía tenemos un elemento más, el engranaje, el menú de configuración principal. Aquí podemos llamar una paleta de comandos haciendo clic aquí o las teclas Ctrl + Shift + P . Se abrirá un bloque donde podemos encontrar y ejecutar cualquier comando del editor o complementos instalados.

Más atajos de teclado. Aquí podemos personalizar nuestros atajos de teclado para comandos o cambiar a los existentes. Volveremos a ellos. Los fragmentos de código personalizados, los llamados fragmentos, son pequeñas abreviaturas que causarán el fragmento de código que necesitamos. Hoy aprenderemos cómo configurarlos. Aquí puede personalizar el tema de color del programa, los iconos de los archivos y mucho más.

Terminando con la barra de acción, vale la pena señalar que puede abrir rápidamente la última pestaña abierta con Ctrl + B. Además, al ocultar el menú contextual, puede ocultar un elemento innecesario. Por ejemplo, ocultaré Inicio y Depuración. En el mismo menú contextual, puede ocultar toda la barra de acción.

Área de editor

¿Demasiado perezoso para leer? Aquí está la versión en video.

Vemos pestañas con archivos abiertos. Se pueden arrastrar, cerrar. Si el archivo no se guarda, entonces el lugar de la cruz mostrará un gran punto en negrita aquí. Al lado de la parte superior está el ícono de la ventana dividida. Hay un archivo activo abierto, haga clic en el icono y se duplicará en el lateral.

Hay un menú adicional para administrar todos los archivos.

A continuación vemos la barra de navegación - migas de pan, donde podemos navegar convenientemente la estructura del documento, así como entre otros archivos.

El área general del código: vemos el código del archivo abierto en sí, y a la derecha hay un minimapa que le permite navegar cómodamente a través de un archivo largo. Hay un pequeño espacio en el área de código a la izquierda, para establecer puntos de interrupción para depurar el código, hay numeración de línea.

A continuación, vemos las flechas, que aparecen cuando pasa el mouse por encima, con su ayuda puede colapsar todo el bloque de código. En este editor, esta función funciona con memoria. Puedo cerrar el archivo, incluso cerrar todo el programa, y cuando lo abra de nuevo, el bloque previamente minimizado seguirá minimizado.

¿Qué podemos configurar aquí?

Como ya he mostrado, la ventana del editor se puede dividir en varias partes, esto es conveniente cuando se trabaja con diferentes archivos. Para ver diferentes opciones, debe ir a Ver> Diseño del editor . Aquí hay un montón de opciones, por ejemplo, dos líneas, y podemos mover un archivo aquí y trabajar así. También hay una opción de cuadrícula de 2x2. Es decir, puede trabajar simultáneamente con 4 archivos.

También puede organizar rápidamente la posición deseada de los archivos simplemente arrastrándolos y soltándolos. Inmediatamente formé el diseño correcto para mí. También es posible personalizar la apariencia de toda el área del editor. Abra Menú> Ver> Apariencia .

A continuación hay la capacidad de ajustar la escala de todo el programa. No confunda con los tamaños de fuente. Es conveniente usar métodos abreviados de teclado. Por ejemplo, para aumentar los elementos, presiono Ctrl + , para reducir - Ctrl- , para restablecer - Ctrl + 0 .

Puede mover la barra de acción de izquierda a derecha y luego estará en el otro lado. Puede especificar la posición del panel de nuestra barra de estado. Al hacer clic, veremos que el panel ya no se abrirá desde abajo como antes, sino desde un lado. Es decir, es posible configurar casi todo.

También en este bloque puedes ocultar o mostrar diferentes elementos. Dije anteriormente que podemos ocultar toda la línea de notificación, ocultar completamente la barra de acción. En este bloque podemos devolver todo esto al lugar.

Modos de pantalla

En la parte superior hay un modo de pantalla completa cuando presiona F11 . El menú superior, los botones para administrar la ventana del programa estarán ocultos.

Alineación central del diseño. El área del código está centrada, puede ajustar el ancho. Esto es para concentrarse mejor en el código.

Hay un maravilloso modo Zen. Oculta todos los elementos, incluso las pestañas de archivo, nos concentramos en un solo archivo, en un código. Resolvemos una tarea difícil que requiere la máxima concentración.

Para salir, presione Escape .

Ajuste de texto

Además, en el menú Ver, podemos activar o desactivar el ajuste de texto, puede hacerlo pulsando la tecla Alt + Z . Qué significa eso? Por ejemplo, tenemos un texto muy largo que no cabe en el área del código y aparece el desplazamiento horizontal. Si esto parece inconveniente, puede presionar Alt + Z; todo nuestro texto se ajustará para que quepa en el área del código.

Es posible ocultar o mostrar un minimapa, controles, es decir, migas de pan. Si parece innecesario Aquí puede mostrar espacios no imprimibles y caracteres imprimibles y dibujar caracteres de control que se pueden copiar desde la fuente en el texto.

Esquema de colores

Podemos elegir uno de los temas instalados yendo a Office, punto Tema de color. Vemos la lista y con las flechas en el teclado podemos movernos entre los temas, eligiendo el tema adecuado para nosotros. Hay opciones oscuras y claras.

Si ninguno de estos temas es apropiado, podemos establecer el nuestro. Para hacer esto, vuelvo a la pestaña Extensiones, en el campo de búsqueda escribo el nombre de mi tema: SpaceOceanKit. Lo encuentro, haga clic en Instalar. A continuación, puedo elegir qué tema elegir y lo elijo.

Ahora tengo todo el editor, incluido el código, se verá diferente. Configuré mi tema, puedes instalar cualquier otro.

La combinación de colores es muy importante para el trabajo a largo plazo con el código, esto afecta la percepción, la fatiga y la salud de sus ojos. Elija cuidadosamente un tema para usted y no olvide tomar descansos.

Íconos

También podemos cambiar la apariencia de los iconos para los archivos en nuestro explorador. Para hacer esto, vaya a Administración> Tema de icono de archivo , aquí podemos apagar los iconos por completo o elegir de la lista.

También instale paquetes de iconos adicionales. Por ejemplo, Matherial Icon Theme.

Parámetros

Además, puede ajustar la comodidad de trabajar con el código y con el editor como un todo en la Configuración del programa. Para hacer esto, vaya a Administración> Opciones o mantenga presionada la tecla Ctrl +, los

parámetros se pueden configurar tanto globalmente como para un proyecto específico. Hay muchas configuraciones aquí. Pasaremos por los principales.

Guardar automáticamente

La primera opción útil es el archivo de guardado automático. Para principiantes, una opción muy buena. Los principiantes a menudo se me ocurren el problema: "¿Por qué mi trabajo no funciona para mí?" Miro, y el archivo no se guarda allí.

Para evitar que esto suceda, aquí puede cambiar el valor a uno de tres:

afterDelay: el archivo se guardará después de algún retraso, que se puede configurar inmediatamente a continuación. Si selecciona esta opción al editar un archivo, se guardará inmediatamente, ni siquiera aparecerá un punto en negrita.
onfocusChange: el archivo se guardará cuando pasemos a otro archivo
onWindowChange: cuando cambiamos a un programa completamente diferente, el archivo se guardará automáticamente.

Elija una opción conveniente para usted y siga adelante.

Visualización de código

Las siguientes opciones lo ayudarán a configurar una cómoda visualización de código. Este es el tamaño de fuente y la familia de fuentes. Aquí puede elegir el valor que más le convenga.

Ajuste el tamaño de la sangría al tabular. Por defecto, es 4. En cuanto a mí, el campo es demasiado ancho con una pestaña, por lo que lo cambio a 3, por lo que me parece más compacto. Indicas el valor que es cómodo para ti.

En un archivo, se muestran espacios para mí, puntos cuando se presiona Tab, en otro, un icono de pestaña. El parámetro Insertar espacios es responsable de esta opción. De forma predeterminada, se establece una marca de verificación, es decir, se mostrarán espacios. Quiero que se muestren mis pestañas, así que eliminaré la marca de verificación.

Para convertir un archivo existente con espacios, puede ir a la barra de estado, presionar 4 espacios y seleccionar la opción Convertir sangría en pasos de tabulación. Así podemos convertir archivos ya abiertos.

Y la opción Detectar sangría responde cómo determinar la inserción de caracteres para nuevos archivos abiertos. Eliminaré la marca de verificación porque quiero que mis ajustes configurados funcionen para todos los archivos.

Ocultar información sobre herramientas

Anteriormente, mostré que cuando pasas el mouse sobre un elemento en el código, aparecen sugerencias emergentes, a menudo esto puede ser molesto. Para eliminar sugerencias, hay un parámetro Activado por desplazamiento . La marca de verificación se puede eliminar y las indicaciones desaparecen.

Pero, junto con esto, las funciones que podrían ser útiles desaparecerán.
Por ejemplo, en la hoja de estilo tenemos el color azul. Se resalta de inmediato. Si Hover está activado, cuando pasa el mouse sobre un color, tal cosa se cae:

podemos hacer que sea translúcido, establecer valores rgba o incluso cambiar el color a otro. Si desactivamos la casilla de verificación Activar desplazamiento, entonces esta función también desaparece.

El parámetro Decoradores de color es responsable de la salida, si no es necesario, la marca de verificación se puede eliminar y no habrá cuadrados de color.

Zoom de la rueda del mouse: después de marcarlo, podemos cambiar el tamaño de fuente en el editor manteniendo presionada la tecla Ctrl y girando la rueda del mouse .

Cerrar grupos activos controla si el grupo se cerrará cuando se cierre la última pestaña. El editor se puede dividir en partes. Por defecto, al cerrar en la última pestaña, se cerrará toda la pestaña. A veces esto es inconveniente, por lo que elimino esta marca de verificación. Y ahora, al cerrar la última pestaña, el grupo seguirá estando conmigo.

Formateo

El siguiente grupo de configuraciones es responsable del formateo, que ya está integrado en el editor de código VC. ¿Qué es el formateo? Por ejemplo, escribimos una estructura, hay otra estructura en ella, pero por alguna razón se ha movido una pestaña. Cuando mantienes presionada la tecla Mayús + Alt + F , todo se alineará como debería.

De vuelta a nuestra configuración. Aquí podemos poner tres marcas de verificación:

Formatear al pegar: el formateo se realizará automáticamente cuando pegue el código.
Formatear al guardar: el formateo se realizará cuando se guarde el archivo.
Formatear en tipo: el formateo será automático, es decir, imprimiremos y todo se formateará de una vez.

Configuré una marca de verificación: formatear al guardar.
Ahora, cuando se detiene la pestaña, no presto atención, al momento de guardar el archivo todo estará en su lugar.

Puede realizar ajustes más precisos en el formato de un idioma en particular si comprende la documentación en el sitio web del programa. También puede instalar extensiones adicionales para un idioma específico, así como para muchos otros.

Mostré esa parte de la configuración que uso yo mismo. Puede familiarizarse con el resto de las configuraciones usted mismo. Para mayor comodidad, la configuración aquí se divide en categorías. También hay una categoría de configuraciones para extensiones ya instaladas o aquellas que solo instalamos.

Para acceder rápidamente a todo lo que hemos configurado, mantenga presionadas las teclas Ctrl + Shift + P y escriba en la barra de búsquedaConfiguraciones hasta que veamos Configuraciones (JSON). Hacemos clic y nuestra configuración aparecerá frente a nosotros, puede cambiarlos de inmediato.

En el mismo archivo configuraremos la nueva extensión.

La comodidad al trabajar con el programa es muy importante, ya que esto afecta directamente el rendimiento. Lo siguiente que haremos es instalar una serie de complementos que nos ayudarán sustancialmente en esto.

Complementos

¿Demasiado perezoso para leer? Aquí está la versión en video.

Hormiga

- Este complemento ya está integrado en el editor de código VS fuera de la caja. De hecho, hoy es difícil imaginar la vida sin Emmet. Super acelera la escritura. Por ejemplo, fue gracias a él que creé tan rápidamente el código inicial para el archivo HTML escribiendo solo un signo de exclamación y presionando Tab.

Aquí hay otro ejemplo. Necesitamos crear un div con la clase de bloque para esto, escribo .block y presiono Tab. ¡Hecho!

O, por ejemplo, más complicado: necesitamos crear una lista con viñetas de 10 elementos. Escriba ul> li * 10 Tab. ¡Hecho!

Lo mismo se aplica a los archivos de estilo. Por ejemplo, para la etiqueta del cuerpo, quiero establecer el tamaño de fuente en 20 píxeles. Para hacer esto, es suficiente para mí escribir fz20 . Al presionar Tab, obtengo un parámetro listo.

Puede obtener más información sobre las características de Emmet en el sitio de este complemento.

Fragmentos

Pero es aún mejor crear sus propios atajos de fragmentos para llamar rápidamente a esa otra pieza de código.
Vaya a Administración> Fragmentos de código personalizados . Hay una opción:

Crear fragmentos para un idioma específico;
Crear fragmentos para todos los idiomas, pero para un proyecto específico;
Cree fragmentos globales para todos los idiomas y para todos los proyectos.

Creemos los globales, aquí debe ingresar el nombre de la lista de fragmentos.

Escribo my, hago clic y se abre el archivo my.code-snippets. Hay información comentada, así como un ejemplo. Lo descomentaré. Aquí está el fragmento de JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "