Cómo personalizar el código de Visual Studio

Visual Studio Code, el nuevo editor de código de código abierto de Microsoft, proporciona a los desarrolladores muchas características asombrosas que significativamente Facilitar el proceso de edición de código fuente.. Además, Visual Studio Code también garantiza que los usuarios no se aburrirán cuando trabajen con él, ya que les permite Personaliza varias partes de su apariencia., como los colores, las fuentes, el espaciado y el formato de texto, al igual que muchas funcionalidades, como forro y reglas de validación.

En este post, al principio echaremos un vistazo a cómo cambiar el aspecto del área de trabajo de Visual Studio Code, a continuación, le mostraré cómo personalizar la configuración predeterminada con la ayuda de dos JSON-archivos de configuración formateados.

Cómo establecer un tema de color en el código VS

Visual Studio Code te permite establecer un tema de color personalizado para su editor.

Para poner en uso un tema prefabricado, haga clic en el Archivo> Preferencias> Tema de color Menú en la barra de menú superior. Cuando golpeas “Entrar”, la paleta de comandos aparece y muestra una lista desplegable de los temas que puede elegir.

Puedes lograr el mismo efecto si presionas F1 para abrir la paleta de comandos y escriba Preferencias: Tema de color comando en el campo de entrada.

A medida que se desplaza por las opciones en la lista desplegable, La apariencia del espacio de trabajo cambia en tiempo real., para que pueda ver rápidamente qué tema se adapta mejor a sus necesidades.

Yo elijo “Alto contraste” Tema de color, ya que mis ojos no son los mejores. Así es como se ve mi punto de vista.

Cómo instalar un tema de VS Code Marketplace

Si no te gusta ninguno de los temas de color que ofrece VS Code de forma predeterminada, puedes descargar muchos otros desde VS Code Marketplace..

Aquí puede echar un vistazo a los temas que actualmente tiene Marketplace. Si desea instalar un tema de Marketplace, presione F1 justo dentro de su editor de código VS para abrir la paleta de comandos, luego escriba la ext instala comando en el campo de entrada, finalmente elija el Extensiones: Instalar extensión opción de la lista que aparece.

Cuando hace clic en esta opción, aparece una nueva instancia de Command Palette. Escribe el "ext instalar tema" comando en el nuevo campo de entrada, y lo hará obtener una lista de todos los temas que están disponibles en el mercado de códigos VS.

Elijo el tema llamado “Kit de material temático”, e instalarlo haciendo clic en él. Para tener el nuevo tema en la lista Tema de color, en el mismo lugar donde están los otros temas predeterminados, debe reiniciar el código VS. Después de reiniciar, el nuevo tema aparece en la lista de temas, y puede configurarlo desde la paleta de comandos.

Con el nuevo tema de materiales, mi editor ahora se ve así:

Puedes volver al tema anterior (como lo hice yo, porque todavía prefiero ese tema) o puedes jugar un poco más con otros temas para ver cuál es el más adecuado para ti..

Si quieres, también puedes crea tu tema personalizado, y publíquelo en VS Code Marketplace usando la herramienta del administrador de extensiones de vsce.

Cambiar la configuración del usuario y del área de trabajo

VS Code no solo le permite configurar un tema personalizado, sino que también puede configurar muchos otros ajustes, como reglas de formato, uso de diferentes funciones, informes de fallos, configuración de HTTP, asociaciones de archivos, reglas de alineación y más.

Puede hacer esto editando dos archivos de configuración, ambos en formato JSON. No se preocupe, no necesita ser un profesional, ya que VS Code ofrece una manera bastante sencilla e intuitiva de agregar rápidamente sus personalizaciones..

Al principio, veamos cuál es la diferencia entre los dos archivos de configuración. El Código VS tiene dos ámbitos (global y local) para la configuración, de ahí los dos archivos separados:

1. lo global settings.json, en el que las reglas de configuración son válidas para cada espacio de trabajo
2. el espacio de trabajo relacionado .vscode / settings.json, eso solo está relacionado con un espacio de trabajo individual

los global settings.json El archivo se puede encontrar en la carpeta donde su sistema operativo almacena todos los demás archivos de configuración relacionados con la aplicación, respectivamente:

• en Windows: % APPDATA% \ Code \ User \ settings.json
• en Linux: $ HOME / .config / Code / User / settings.json
• en Mac: $ HOME / Library / Application Support / Code / User / settings.json

los relacionado con el espacio de trabajo settings.json archivo se almacena en la carpeta de su proyecto actual. De forma predeterminada, este archivo no existe, pero tan pronto como agrega una Configuración de espacio de trabajo personalizada, el Código VS crea una .vscode / settings.json archivo a la vez, y coloca configuraciones personalizadas específicas del espacio de trabajo en él.

Entonces, ¿cuándo usas el settings.json archivos?

Si desea que VS Code use sus reglas de configuración personalizadas en todos Tus proyectos, ponlos en el global. settings.json expediente.

Si desea que su configuración solo sea válida en su Proyecto actual, Colóquelos en el espacio de trabajo relacionado settings.json expediente.

La configuración del espacio de trabajo anula la configuración global, así que ten cuidado.

Se llama configuración global “Ajustes de usuario” en el código VS. Ábrelos haciendo clic en el Archivo> Preferencias> Configuración de usuario menú, o comenzando a escribir la expresión “Ajustes de usuario” en la paleta de comandos (abrir con F1).

VS Code abre dos paneles uno al lado del otro: el de la izquierda contiene todas las opciones que se pueden configurar y el de la derecha muestra la pantalla global. settings.json expediente. Necesita colocar sus reglas de configuración personalizadas en este archivo.

Como puede ver, no necesita hacer nada más, solo copie y pegue la configuración que desea cambiar del lado izquierdo al derecho y agregue los valores modificados.

Veamos un pequeño ejemplo (pero puede hacer cualquier otra modificación de acuerdo con sus necesidades individuales). Cambiaré la familia de fuentes, reduciré la longitud de un lengüeta de los cuatro espacios predeterminados a dos, reduzca el número máximo de archivos de trabajo de nueve a cinco, y cambie una de las reglas de alineación de CSS con respecto a los estilos duplicados "ignorar" a "advertencia".

Después de copiar y pegar, mi global settings.json archivo se ve así:

 // Coloque su configuración en este archivo para sobrescribir la configuración predeterminada "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "advertencia" 

Después de guardar el modificado settings.json archivo, el aspecto de mi editor cambia a la vez (en la captura de pantalla a continuación solo se ve el cambio de la familia de fuentes):

Puede cambiar la configuración del área de trabajo de manera similar. Ahora tienes que hacer clic en el Archivo> Preferencias> Configuración del espacio de trabajo en la barra de menú superior para acceder al área de trabajo relacionada .vscode / settings.json expediente.

La Configuración del área de trabajo tiene exactamente las mismas opciones de configuración que la Configuración de usuario, y puede utilizar la misma técnica de pegado de copias. Solo hay dos diferencias, el alcance (local en lugar de global) y el settings.json Archivo en el que se guardarán sus configuraciones personalizadas.