Historial de página

...

Para programar la parte de Vue, el front-end, se utilizará Visual Studio Code con una serie de extensiones. 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 extensionesel README del proyecto Portal UI (https://gitlab.com/umugit/atica/desarrollo/aulavirtual/portal-ui) aparecen las siguientes extensiones a instalar:

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

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

• Bracket Pair Colorizer
  Id: coenraads.bracket-pair-colorizer
  Autor: CoenraadS
• Beautify
  Id: hookyqr.beautify,
  Autor: HookyQR
• EditorConfig for VS Code
  Id: editorconfig.editorconfig
  Autor: EditorConfig
• ESLint
  Id: dbaeumer.vscode-eslint
  Autor: Microsoft
• 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á útilPodemos instalar otras extensiones si nos son útiles, estas son las básicas que debemos tener en común.

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)":

...

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

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

Por último, si tenemos el IDE en inglés y queremos cambiar a idioma español, seguiremos estos pasos:

...