Visual Code Extensiones
Instalación de Git 2.23.0 para control de versiones desde Visual Code.
1. Descargar desde [Link] la versión que corresponda a su sistema operativo.
2. Instalar.
txt synConfiguración Visual Code 1.38.1
Tutorial recomendado para el aprendizaje de Visual Code
[Link]
Descargar Visual Studio Code desde
[Link]
Instalación de Extensiones necesarias
Acceder desde Visual Code por la barra de actividades.
Otra alternativa es hacer la descarga desde [Link]
1. Spanish Language Pack For Visual Studio Code, Microsoft.
Acá está explicado cómo configurarlo.
[Link]
es
2. Txt Syntax, xshrim, highlight the .txt, .ini and other config files.
3. Vscode Google Translate, funkyremi, traduce directamente sobre tu código.
4. Apache Conf, mrmlnc, Apache conf syntax support for VS Code, soporte sintáctico para
archivos Apache conf, recomendable para archivos como .htaccess.
5. MySQL, Jun Han, MySQL management tool, herramienta de administración de MySQL.
En el panel del explorador ir al apartado MYSQL y darle click a + para agregar una
conexión: en host escribir localhost, user, root, password, enter, puerto muestra 3306 sino
se ha cambiado de ip de MySQL dar enter, certificate file path, enter.
6. MySQL Syntax, Jake Bathman,MySQL syntax highlighting support,Soporte de resaltado
de sintaxis MySQL.
7. vscode-pdf, tomoki1207, muestra archivos pdf en VSCode.
8. PHP IntelliSense, Felix Becker, Advanced Autocompletion and Refactoring for PHP.
9. PHP Debug, Debug support for PHP with XDebug, Felix Becker.
10. phpfmt, kokorin, PHP formatter, formateador de archivos php.
11. para cada plugin que aparezca recargar hay que hacerlo para que se active y en algunos
casos reiniciar el Visual Studio Code.
toda la información en: [Link]
itemName=[Link]-debug
Para cada proyecto web hay que repetir lo siguiente:
a. Abrir la carpeta de trabajo, por menú, archivo, abrir carpeta o (Ctrl + K, Ctrl + O)
b. Clickear en la cucaracha.
c. Clickear en el engranaje para seleccionar el lenguaje a depurar, seleccionar PHP.
d. Cerrar el archivo [Link].
e. Abrir el navegador y ejecutar el sitio a depurar.
12. Solución al problema:
a. En Buscar configuración tipear: php
b. Editar en [Link] y agregar las dos claves como se muestra en el ejemplo:
"[Link]": "D:/wamp64/bin/php/php7.3.1/[Link]",
"[Link]": "D:/wamp64/bin/php/php7.3.1/[Link]",
13. PHP Unit puede instalarlo desde el enlace [Link]
itemName=[Link] en caso de que no aparezca Visual Code.
14. Live Share, Microsoft, desarrollo colaborativo en tiempo real desde la comodidad de sus
herramientas favoritas.
¿Cómo usar?
a. Después de la instalación veremos una nuevo icono en la barra de opciones, desde
donde podremos gestionar nuestras sesiones de colaboración.
b.
c. Iniciamos una nueva sesión dando click en la opción Start collaboration session.
d.
e. Invitaremos participantes a nuestra sesion dando click en la opción Invite
Participants... lo que copiará la url de la sesión al portapapeles para que lo
podamos enviar a los miembros de nuestro equipo.
f.
g. Para que nuestro miembro de equipo se una, este deberá ingresar por la opción
Join Collaboration Sesión y pegar la url que le hayamos enviado.
h.
i. Cuando nuestro miembro de equipo se una, veremos en el panel los miembros
conectados identificados por un color y la posición donde se encuentran ubicados,
ahora nuestros miembros de equipo podrán editar nuestro proyecto.
j. Adicionalmente podemos realizar llamadas de audio, chatear, compartir la terminal
y servidores, todo esto desde el panel de opciones.
k. Finalmente cuando termines de trabajar puedes cerrar la sesión de colaboración a
través del icono de stop Collaboration Session
Clonar un repositorio desde GitHub
1. Copiar la URL del repositorio desde [Link]
2. En Visual Code clonar el repositorio CTRL+SHIFT+P o menú, Ver, Paleta de
comandos, Git:clone, CTRL +V (pega la url copiada) enter.
Introducir cambios, commit
Conforme vamos introduciendo cambios en los ficheros estos se nos marcan como
modificados o añadidos.
Los ficheros se van marcando conforme modificamos
Cuando queramos subir cambios nos vamos a la pestaña de git y vemos cuáles
ficheros queremos hacer stage (podemos ir pulsando en "+" fichero a ficheros o en a
todos, también podemos directamente darle a commit y decirle que haga stage de
todos los ficheros).
Añadiendo a stage
Una vez que estamos listos le damos al botón de commit (esto sólo guarda en local,
tenemos que hacer un push para llevar los cambios a servidor).
Commit
Hacer push de los cambios
Para hacer push de los cambios podemos hacerlo de dos maneras:
- O bien pulsando en la parte derecha de la barra de git (icono tres puntos) y eligiendo la
opción push
Push
- O bien en la parte inferior pulsando sobre sincronizar (ojo esto haría push y pull).
Sincronizar
Como hacer un pull
Para traernos los cambios que haya en servidor de la rama en la que estamos trabajando,
podemos pulsar sobre los tres puntos (...) que hay en la parte superior derecha y
pinchar sobre la opción pull.
Pull
También podríamos hacer como en el paso anterior (puslando en los iconos de la parte
inferior, sincronizar). Está opción la suelo usar mucho, es cómoda.
Sincronizar: Push y pull
Si queremos traernos los cambios últimos que se hayan realizado en nuestra rama y subir
los nuestros podemos sincronizar el repo, pulsando sobre el icono inferior de
sincronización que están en la parte de abajo de la ventana (si trabajamos con Branch
per feature normalmente sólo haremos operaciones de push o de pull aunque le
demos a sincronizar).
En el ejemplo que vamos a ver tenemos varios cambios en servidor y un fichero que
hemos actualizado en local (por eso nos salen tres commits por bajar y un cambio por
subir, cuando pinchamos en el icono baja el cambio pertinente y sube el nuestro).
Sincronizar
Resolver conflictos
¿ Qué pasa si quiero hacer pull de mi rama pero trae cambios y conflictos de servidor?
¿Cómo soluciona esto Visual Studio Code?
En este caso hemos puesto un conflicto en el fichero [Link], tenemos que decidir con que
cambio nos quedamos. Para ello:
● Hacemos pull y nos sale el fichero con el conflicto, pinchamos sobre el fichero y
vemos donde están los conflictos.
● Ahora podemos elegir qué parte es la que queremos tomar como buena (la
nuestra o la de servidor) y la aceptamos:
Tambíen podemos escribir en una de las partes y aceptar el cambios, o aceptar ambos
cambios como buenos:
● Una vez que hemos terminado, tenemos que hacer un commit con el merge,
para ellos nos vamos al terminal y ejecutamos la siguiente orden.
git commit -m "fixing merge conflicts"
● Ya estamos listos para poder hacer push del merge.
Veamos todos los pasos en acción en el siguiente gif animado:
Resolver conflictos
Creando ramas
Podemos crear una rama mostrando la paleta de comandos (CTRL+SHIFT+P) y eligiendo
el comando git branch, después nos preguntará por el nombre de rama. Una vez
creada en local, podemos subirla al servidor pulsando sobre el indicador de la nube
que aparece en la parte inferior de la ventana.
Creando ramas
Cambiar de rama
Para cambiar de rama, pinchamos sobre la parte inferior en la que aparece el nombre de
la rama actual, y nos aparece un diálogo en el que podemos teclear el nombre de la
rama al que queremos navegar.
Importante para poder cambiar de ramas no debemos de tener ficheros locales con
cambios.
Cambiar de rama
¿Qué pasa si la rama a la que quiero hacer checkout no aparece? (no se ha sincronizado
con el servidor), puedo teclear desde el terminal:
git fetch
Y ahora si le volvemos a dar a la opción de cambiar de rama, podremos ver la lista
actualizada.
Descartar cambios
Para descartar cambios sobre un fichero, desde la ventana de git podemos pinchar con el
botón derecho sobre el fichero que queramos descartar y elegimos la opción Discard.
Descartar cambios
Mezclar máster a mi rama
Supongamos el caso en que mi rama se ha quedado desactualizada con respecto a
máster y me quiero traer los cambios (tengo suerte y no hay conflictos), para hacer
esto abro la paleta de comandos y teclear git merge con ese comando me pregunta
qué rama quiero mezclar a la actual, tecleo su nombre y realizar el merge.
Mezclar master a mi rama actual
Si tuviéramos conflictos haríamos como en el caso anterior (arreglar conflictos en misma
rama).