Entrada

Guia - Visual Studio Code

Publicado
Por ImSoSx
4 min de lectura

Instalacion

Descargar e instalar Visual Studio Code

Configuracion

Fuente

La fuente que utilizo la mayoria del tiempo es Caskadia Code de Nerdfonts.

  1. Para instalarla se descarga del siguente enlace
  2. Lo extraen y lo instalan seleccionando los archivos extraidos, clic derecho e instalar
  3. Abrir VSCode e ir a configuracion o pulsa CTRL + ,
  4. Luego ir a Text Editor - Font - Font Family y escribir ‘CaskaydiaCove Nerd Font’
  5. Finalmente en Font Size escribir 13

Apariencia

El tema que utilizo es One Dark Pro

  1. Para instalarla la puedes descargarlo aqui o buscandolo en el apartado extensiones de VSCode
  2. Luego aparecera una seleccion de temas, seleccionar One Dark Pro Darker
  3. Instalar - Material Icon Theme y seleccionarlo

Otros Ajustes

Ajustes manuales al archivo de ajustes de Vscode

  1. Pulsar F1 y buscar Open User Settings (JSON)
  2. Agregar las siguientes lineas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.linkedEditing": true,
  "editor.fontLigatures": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "window.menuBarVisibility": "compact",
  "workbench.startupEditor": "none",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "onFocusChange",
  "php.suggest.basic": false,
  "security.workspace.trust.untrustedFiles": "open",
  "intelephense.diagnostics.undefinedTypes": false,
  "intelephense.diagnostics.undefinedFunctions": false,
  "intelephense.diagnostics.undefinedConstants": false,
  "intelephense.diagnostics.undefinedClassConstants": false,
  "intelephense.diagnostics.undefinedMethods": false,
  "intelephense.diagnostics.undefinedProperties": false,
  "intelephense.diagnostics.undefinedVariables": false,
  "git.autofetch": true,
  "window.zoomLevel": -1,
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist",
    "*"
  ],
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDragAndDrop": false,
  "files.associations": {
    "*.bat": "bat"
  },
  "editor.minimap.enabled": false,

Resumen: Guardado automatico, Quitar ligaturas de fuente, tabulacion de 2 espacios, asignacion de lenguajes a la extension Auto-close-tag, asignacion de formateador de codigo, formatear codigo al guardar, Zoom de ventana, ajuste de emmet, Ajustes de PHP Inteliphense

Extensiones

Utilizo diversas extensiones para mejorar la experiencia y utilidad de VSCode, aqui la lista:

Guias, Software
software programacion herramientas
Esta entrada está licenciada bajo CC BY 4.0 por el autor.