Personaliza Tu Visual Studio Code
Tags: vscode, tutorial, programming, javascript
Published: 2022-05-11 17:03:04


En la actualidad hay muchos plugins que hacen que codificar en VSC sea más rapido y sencillo.

- 1. Tema: Elige un tema que te guste para personalizar el aspecto de tu editor de código. Para hacer esto, haz clic en el icono de engranaje en la parte inferior izquierda de la ventana de Visual Studio Code, selecciona "Color Theme" y elige el tema que prefieras.

- 2. Iconos: Visual Studio Code viene con varios paquetes de iconos integrados, pero también puedes descargar e instalar paquetes de iconos de terceros. Para hacer esto, haz clic en el icono de engranaje en la parte inferior izquierda de la ventana de Visual Studio Code, selecciona "File Icon Theme" y elige el paquete de iconos que desees.

- 3. Atajos de teclado: Personaliza los atajos de teclado para ajustarlos a tus preferencias. Haz clic en "File" en la barra de menú superior, selecciona "Preferences" y luego "Keyboard Shortcuts". Aquí puedes cambiar los atajos de teclado existentes o crear tus propios atajos de teclado personalizados.

- 4. Extensiones: Instala extensiones para agregar características adicionales a Visual Studio Code. Para hacer esto, haz clic en el icono de extensiones en la barra lateral izquierda de Visual Studio Code y busca las extensiones que te interesen. Hay una amplia variedad de extensiones disponibles para diferentes lenguajes de programación y necesidades específicas.

- 5. Configuración: Personaliza la configuración de Visual Studio Code para ajustarla a tus necesidades. Para hacer esto, haz clic en el icono de engranaje en la parte inferior izquierda de la ventana de Visual Studio Code y selecciona "Settings". Aquí puedes ajustar la configuración predeterminada de Visual Studio Code, como la fuente, el tamaño de la fuente, la indentación y otras configuraciones específicas de lenguajes de programación.

- 6. Personalización de la barra de herramientas: Si deseas tener acceso más rápido a las funciones y extensiones más utilizadas, puedes personalizar la barra de herramientas. Para hacer esto, haz clic derecho en la barra de herramientas y selecciona "Personalizar barra de herramientas". Desde aquí, puedes agregar, eliminar y mover iconos a tu gusto.

- 7. Terminal: Visual Studio Code viene con una terminal integrada que puedes personalizar. Haz clic en "Terminal" en la barra de menú superior y selecciona "New Terminal" para abrir la terminal. Desde aquí, puedes personalizar la apariencia y el comportamiento de la terminal.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk3pw62pntv830fbiv9h.png)

**EXTENSIONS**

— Path Autocomplete

— Prettier - Code formatter

— Auto Close Tag

— Activitus Bar

— indent-rainbow

— Code Autocomplete


**SETTINGS.JSON**
`{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "window.menuBarVisibility": "toggle",
  "editor.fontWeight": "normal",
  "editor.fontSize": 15,
  "editor.fontFamily": "'San Francisco', 'Helvetica', sans",
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "eslint.options": {
    "rules": {
      "import/default": "error",
      "import/export": "error",
      "import/named": "error",
      "import/namespace": "error",
      "import/no-duplicates": "error",
      "import/no-named-as-default": "error",
      "import/no-named-as-default-member": "error",
      "import/no-unresolved": "error"
    }
  },
  "javascript.format.enable": true,
  "window.zoomLevel": 0,
  "editor.tabSize": 2,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
  "editor.formatOnSave": true
}
`