Cómo crear perfiles de código en VSCode

Esta publicación se basa en el trabajo realizado por @avanslaars, quien es un compañero instructor en egghead.io. Compartió esto en el Slack cabeza de huevo hace algún tiempo y nunca pude configurar esto yo mismo.

Ahora, estoy configurando una nueva computadora portátil y decidí darle una oportunidad. Siguiendo el repositorio de Andy aquí, lo guiaré a través del proceso para que pueda seguirlo.

Antes de comenzar, un "perfil de código" es esencialmente una settings.jsonconfiguración diferente . También puede personalizar qué extensiones se cargan por perfil de código, pero eso está fuera del alcance de este artículo.

1. Crea un code_profilesdirectorio

Lo primero que debemos hacer es crear un lugar para almacenar nuestra "configuración de perfil". No es necesario que se llame code_profiles, pero usaremos ese término ya que Andy lo hace y suena bien.

Mantiene el suyo en la raíz de su computadora, así que nosotros haremos lo mismo:

# From the root of your computer ~/ mkdir code_profiles 

Después de haber terminado, cden ese directorio:

cd code_profiles 

2. Crea tu primer perfil

Como voy a usar esto para las grabaciones de egghead, voy a crear un nuevo directorio llamado egghead:

# mkdir name-of-profile mkdir egghead 

Luego cden ese directorio:

cd egghead 

3. Agregue su settings.json

VSCode espera un datadirectorio con un Usersubdirectorio. Allí, colocaremos nuestra configuración:

# -p will create parent directories as needed mkdir -p data/User 

Después de Usercrearlos , cambie a ese nuevo subdirectorio y cree su settings.jsonarchivo:

# Go into that directory cd data/User # Create your settings file touch settings.json 

Luego abra su settings.jsonarchivo y agregue su configuración. Agregaré una versión modificada de lo que Andy tiene en su:

{ "editor.tabSize": 2, "editor.quickSuggestions": false, "editor.parameterHints": false, "editor.suggestOnTriggerCharacters": false, "editor.hover": false, "editor.fontSize": 18, "editor.tabCompletion": true, "window.zoomLevel": 1, "workbench.colorTheme": "Night Owl", "editor.cursorBlinking": "solid", "editor.cursorStyle": "line", "editor.minimap.renderCharacters": false, "terminal.integrated.fontSize": 16, "explorer.openEditors.visible": 0 } 

4. Pruebe su nuevo perfil de código

Ahora asegurémonos de haber hecho todo bien. Suponiendo que ya ha configurado VSCode para [iniciar desde la línea de comandos] (// code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line, podemos lanzar nuestro nuevo perfil ejecutando:

# replace CODE_PROFILE_NAME with the profile name used earlier code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data 

Y si funcionó, debería ver VSCode abierto con su configuración:

captura de pantalla de vscode con nueva configuración

5. Cree un alias para su perfil.

No sé ustedes, pero no quiero tener que recordarlo, code --user-data-dir ...así que sigamos el consejo de Andy y creemos un alias.

Estoy usando, zshasí que voy a agregar este alias a mi .zshrcarchivo usando la palabra clave "enseñar":

# replace CODE_PROFILE_NAME with the profile name used earlier alias teach="code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data" 

Ahora, cuando desee utilizar este perfil de código, todo lo que tiene que hacer es escribir:

teach ~/projects/lesson 

¡Woohoo! Y eso es.

Un agradecimiento especial a @avanslaars por compartir esto. Aquí hay un enlace a su code_profilesrepositorio donde aprendí cómo hacer esto.

NOTA : Si está utilizando VSCode en modo portátil, hay un error conocido en el que la bandera user-data-dirno funciona actualmente (gracias especiales a @myfonj por señalar esto).

###

Esta publicación apareció por primera vez en DEV.

? Shameless Plug: si quieres ver más contenido como este, suscríbete a mi newsletter: //buttondown.email/jsjoeio