Historial de página

...

Para programar la parte de Vue, el front-end, se utilizará Visual Studio Code con una serie de extensiones.

• En primer lugar, descargamos Visual Studio Code de https://code.visualstudio.com/, y lo instalamos.

• Para importar las extensiones, primero habrá que descargar este pack: FundeWebJS Vue Extension Pack

• Ahora, dentro de Visual Studio Code, nos vamos a la pestaña de extensiones (barra lateral izquierda, icono con cuadrados), pulsamos en los tres puntitos de arriba y seleccionamos Install from VSIX…:

Image Removed

...

Para ello, en la barra lateral de VS Code tendremos un símbolo con cuatro cuadrados, con el que accederemos a la sección de las extensiones, donde podremos buscarlas e instalarlas. En concreto, utilizaremos estas extensiones:

• Alphabetical Sorter
  Id: ue.alphabetical-sorter
  Autor: Ugur Erdal

• Auto Rename Tag
  Id: formulahendry.auto-rename-tag
  Autor: Jun Han

• Beautify
  Id: hookyqr.beautify,
  Autor: HookyQR
• EditorConfig for VS Code
  Id: editorconfig.editorconfig
  Autor: EditorConfig
• ESLint
  Id: dbaeumer.vscode-eslint
  Autor: Dirk Baeumer
• Import Cost
  Id: wix.vscode-import-cost
  Autor: Wix
• Vue Language Features (Volar)
  Id: johnsoncodehk.volar
  Autor: Johnson Chu
• Eclipse Keymap
  Id: alphabotsec.vscode-eclipse-keybindings
  Autor: Alphabot Security

Esta última nos cambiará algunos atajos de teclado a los de Eclipse, por ejemplo, Ctrl + Mayus + F para formatear el código. Es opcional, pero si estamos acostumbrados a Eclipse será útil.

Por último, tenemos que modificar la configuración del editor, modificando directamente settings.json. Para acceder a este archivo, pulsaremos Ctrl + Mayus + P y escribiremos "abrir configuración". Nos dará varias opciones, seleccionamos "Preferencias: Abrir Configuración (JSON)":

Image Added

Esto nos abrirá el archivo, y dentro del primer bloque de llaves { } pegaremos el siguiente snippet:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  }
]

Con esto ya tendríamos la configuración de VS Code completa.