Tutorial sobre Visual Studio Code

De Manuais Informática - IES San Clemente.
Revisión del 09:58 19 oct 2021 de Veiga (discusión | contribs.) (→‎Snippets de PHP)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)
Ir a la navegación Ir a la búsqueda

Cómo convertir las claves generadas por PUTTY para Visual Studio Code

  1. Abrir Puttygen
  2. Pulsar en Load
  3. Cargar nuestra clave privada
  4. Ir a Conversions->Export OpenSSH y exportar nuestra clave privada.
  5. Copiar la clave privada a la carpeta que queramos o si estamos en Linux a : ~/.ssh/id_dsa (or id_rsa).
  6. Crear la versión FRC 4716 de nuestra clave pública utilizando ssh-keygen
  ssh-keygen -e -f ~/.ssh/id_dsa > ~/.ssh/id_dsa_com.pub
  1. Convertir la versión RFC 4716 de nuestra clave pública a formato de OpenSSH:
  ssh-keygen -i -f ~/.ssh/id_dsa_com.pub > ~/.ssh/id_dsa.pub

Extensiones recomendables para PHP

A continuación configuraremos lo siguiente:

  • Agregaremos en variables de entorno de Windows en el apartado de PATH: la ruta dónde tenemos nuestro PHP instalado:
    • Botón derecho propiedades de Mi PC -> Configuración avanzada -> Editamos la variable del sistema PATH y agregamos la ruta dónde tenemos instalado el PHP: C:\tools\php74\php.exe

Snippets de PHP

  • Vamos a Archivo -> Preferencias -> Fragmentos de código del usuario -> y Tecleamos HTML.json
  • En ese archivo añadimos lo siguiente:
	"php": {
		"prefix": "php",
		"body": [
			"<?php \n\t$1\n?>"
		],
		"description": "php tag"
	}
  • De esta manera cuando estemos editando código HTML y tecleemos PHP y le demos a TAB se creará automáticamente el bloque de PHP dentro de nuestro bloque HTML.
  • También podemos crear un snippet para PHP, por ejemplo cuando escribamos _try nos escribirá el bloque try catch para PDO.
  • Vamos a Archivo -> Preferencias -> Fragmentos de código del usuario -> Buscaremos php.json y lo editamos:
  • Código de ejemplo del fichero php.json:
{
	// Place your snippets for php here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"try catch PDO": {
		"prefix": "_try",
		"body": [
			"try {\r",
			"\t$1",
			"} catch (PDOException \\$error) {\r",
			"\tdie (\"Error en consulta de MySQL: {\\$error->getMessage()}.\");",
			"\t//die (\"Error en consulta de MySQL.\");",
			"}"
		],
		"description": "Try catch PDO."
	}
}
  • Cuando en un fichero .php tecleemos _try nos aparecerá la sugerencia del snippet para generar el código automáticamente.

Asociación de archivos blade con html

Cuando estamos trabajando con Laravel por ejemplo, podemos asociar las plantillas de Blade para que las reconozca como html. 

# Pulsamos CTRL + MAYUS + P

# Abrimos el fichero settings.json

# Pegamos al final del archivo esta configuración y la guardamos:

"files.associations": {
    "*.blade.php": "html",
    "*.tpl": "html"
  }

Solución de problema de plugin VSCODE al trabajar con vuestro servidor por SSH

Para la gente que os está dando fallos en el plugin sftp de Visual Studio con el error "No Such file" en VScode, una solución es: 

# Editar este archivo dentro de vuestro usuario:
c:\Usuarios\xxxxxxxxx\.vscode\extensions\liximomo.sftp-1.12.9\node_modules\ssh2-streams\lib\sftp.js

# Modificar la línea 388:
if (code === STATUS_CODE.OK) {

# Por esta otra:
if (code === STATUS_CODE.OK || code === STATUS_CODE.NO_SUCH_FILE) {

# Guardar y reiniciar VSCode.

Si tenéis problemas con la clave de Amazon ppk para conectar con AWS

https://code.visualstudio.com/docs/remote/troubleshooting#_reusing-a-key-generated-in-puttygen

Configuración de VSCode para PHP

Para abrir el fichero de configuración settings.json:

  • Pulsar CTRL + P
  • Teclear settings.json
  • Abrir el fichero y editarlo:
{
    "php.validate.executablePath": "C:\\tools\\php74\\php.exe",
    "php.validate.enable": true,
    "php.validate.run": "onSave",
    "editor.formatOnSave":true,


}

Ejemplo de una configuración más ampliada de settings.json

Para abrir el fichero de configuración settings.json:

  • Pulsar CTRL + P
  • Teclear settings.json
  • Abrir el fichero y editarlo:
{
    "editor.formatOnSave": true,
    "php.validate.executablePath": "C:\\tools\\php74\\php.exe",
    "php.validate.enable": false,
    "php.suggest.basic": false,
    "search.collapseResults": "alwaysCollapse",
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/.git": true,
        "**/storage": true,
        "**/tests": true,
        "_ide_helper.php": true,
        "_ide_helper_models.php": true,
        "package-lock.json": true
    },
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "editor.fontSize": 16,
    "editor.letterSpacing": 0.5,
    "editor.lineHeight": 24,
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": false,
    "editor.formatOnType": false,
    "editor.formatOnPaste": false,
    "editor.autoIndent": "advanced",
    "editor.wordWrap": "on",
    "git.showPushSuccessNotification": true,
    "editor.gotoLocation.multipleDefinitions": "goto",
    "editor.snippetSuggestions": "bottom",
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.renameOnType": true,
    "workbench.iconTheme": "Monokai Pro (Filter Spectrum) Icons",
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "workbench.editor.untitled.hint": "hidden",
    "workbench.colorTheme": "Monokai Pro (Filter Spectrum)",
    "terminal.integrated.fontWeightBold": null,
    "open-php-html-js-in-browser.selectedBrowser": "Chrome",
    "open-php-html-js-in-browser.documentRootFolder": "D:\\xampp\\htdocs\\cursophp"
}
Obtenido de «https://manuais.iessanclemente.net/index.php?title=Tutorial_sobre_Visual_Studio_Code&oldid=69824»