| ... | ... | @@ -62,11 +62,11 @@ code . |
|
|
|
|
|
|
|
### 2.2. Activar el guardado automático
|
|
|
|
|
|
|
|
- Abre **Archivo → Guardado automático**, o presiona `Ctrl+Shift+P` → escribe `Guardado automático` (`Auto Save` si está en inglés) y actívalo.
|
|
|
|
- Abre **Archivo → Guardado automático**, o presiona `Ctrl+Shift+P` → escribe `Autoguardado` (`Auto Save` si está en inglés) y actívalo.
|
|
|
|
|
|
|
|
### 2.3. Ajustar la apariencia
|
|
|
|
|
|
|
|
Presiona `Ctrl+Shift+P` y escribe `Preferences: color theme` y `Preferences: file icon theme`
|
|
|
|
Presiona `Ctrl+Shift+P` y escribe `Tema de color` y `Tema de icono`
|
|
|
|
|
|
|
|
- Tema recomendado: **“Dark+”** o **“One Dark Pro”**
|
|
|
|
- Iconos recomendados: **Material Icon Theme**
|
| ... | ... | @@ -99,6 +99,7 @@ y busca las siguientes: |
|
|
|
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
//... contenido anterior del json
|
|
|
|
"editor.tabSize": 2,
|
|
|
|
"editor.formatOnSave": true,
|
|
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
| ... | ... | @@ -116,6 +117,8 @@ y busca las siguientes: |
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
Si hay algún elemento repetido, lo habitual es que se muestre con un _warn_, se debe eliminar uno de los elementos (el que estuviera previamente).
|
|
|
|
|
|
|
|
### Ejemplo de uso
|
|
|
|
|
|
|
|
Cuando guardes un archivo `.vue` o `.js`, el código se **formateará automáticamente** según las reglas de Prettier y ESLint.
|
| ... | ... | @@ -124,17 +127,19 @@ Por ejemplo: |
|
|
|
Antes de guardar:
|
|
|
|
|
|
|
|
```js
|
|
|
|
const mensaje = 'Hola Mundo'
|
|
|
|
const mensaje='Hola Mundo'
|
|
|
|
console.log(mensaje)
|
|
|
|
```
|
|
|
|
|
|
|
|
Después de guardar:
|
|
|
|
|
|
|
|
```js
|
|
|
|
const mensaje = 'Hola Mundo'
|
|
|
|
console.log(mensaje)
|
|
|
|
const mensaje = 'Hola Mundo';
|
|
|
|
console.log(mensaje);
|
|
|
|
```
|
|
|
|
|
|
|
|
No funciona con el autoguardado, debe hacerse el guardado manual para que se aplique el formateo.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 5. Crear snippets personalizados
|
| ... | ... | @@ -142,7 +147,7 @@ console.log(mensaje) |
|
|
|
### 5.1. Cómo crear un snippet
|
|
|
|
|
|
|
|
1. Pulsa `Ctrl+Shift+P`
|
|
|
|
2. Escribe **“Snippets: Configurar fragmentos de usuario”**
|
|
|
|
2. Escribe **“Fragmentos de código: Configurar fragmentos de usuario”**
|
|
|
|
3. Elige **JavaScript** o **Vue**
|
|
|
|
4. Añade el siguiente ejemplo:
|
|
|
|
|
| ... | ... | |