Visual-Studio-Code.txt

================================
Guía de Visual Studio Code by dM
================================

=====================================
Instalar Visual Studio Code en Debian
=====================================

$ sudo apt update

$ sudo apt install software-properties-common apt-transport-https curl

$ curl -sSL https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -

$ sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

$ sudo apt update

$ sudo apt install code

=======================================
Actualizar Visual Studio Code en Debian
=======================================

$ sudo apt-get install --only-upgrade code

==================================================
Cambiar el idioma de Visual Studio Code al Español
==================================================

Abre Visual Studio Code.

Pulsa Ctrl + Shift + P.

Escribe en la barra de búsqueda: «Configure Display Language«

Haz clic sobre «Install Aditional Languages«

Selecciona el pack de idioma que te interese de la lista de la izquierda. ...

Haz clic en Install

=======================
Extensiones para vscode
=======================

-Spanish Language Pack for Visual Studio Code: Poner en espanol el vscode.

-Vue - Official: Language Support for Vue, official, se debe deshabilitar Vetur
para que no haya conflictos.

-Vetur: Herramientas de Vue para VS Code.

-vscode-icons: Iconos bonitos para diferenciar cada tipo de archivo.

-PHP Intelephense: Inteligencia de código PHP para Visual Studio Code.

-Bracket Pair Colorizer: Permite identificar los corchetes correspondientes con
colores.

-PRETTIER: Formatea tu código de manera automática.

-eslint: Integra ESLint JavaScript en VS Code.

-indent-rainbow: Hace que la sangría sea más fácil de leer, dándo
coloración.

-Auto Rename Tag: Renombra automáticamente y simultaneamente las etiquetas html
de apertura y cierra.

-Live Server: Lanzar un servidor local de desarrollo con función de recarga en
vivo para páginas estáticas y dinámicas.

-Tailwind CSS Extension Pack: A collection of extensions for developing with
Tailwind CSS.

-HTML CSS Support: HTML id and class attribute completion for Visual Studio
Code.

-PostgreSQL de Weijan Chen: Administrador de base de datos para MySQL/MariaDB,
PostgreSQL, SQLite, Redis y ElasticSearch.

-Project Manager: Creado por Alessandro Fraganani, permite cambiarse entre
proyectos con solo un click, se guardar los directorios o proyectos y luego se
listan para cambiarse entre ellos.

-Rainbow CSV: Mejorar la legibilidad de los datos csv en vscode.

-Live Share: Compartir el código fuente de un archivo desde vscode, se crea una
sesión privada y de solo lectura mediante un enlace se comparte por internet
y se puede exponer el código, el host debe aceptar al visitante cuando solicite
el acceso.

-phpcs: Extensión que permite evaluar los archivos PHP en búsqueda de error
de estándar tipo PSR2.

Url: https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs

Tema: https://vscodethemes.com/e/sldobri.bunker/dobri-next-a00-black
  Preferido: AOO Black

===============================
Agregar línea vertical ruler 80
===============================

Ir a la configuración y buscar ruler o rulers, click a donde dice editar
settings.json donde debemos agregar los siguiente:

"editor.rulers": [
  80
]

Tal que:

{
    "workbench.colorTheme": "Default Dark+",
    "security.workspace.trust.untrustedFiles": "open"
    "editor.rulers": [
        80
    ]
}

Guardamos y debería salir la línea que marque los 80 caractéres.

==============================================
Evitar que VS code recopile información de uso
==============================================

A muchos nos incomoda el hecho de saber que se comparta información que creemos
"privada", como el uso que le damos a ciertos programas, Visual Studio Code
envía esa información de manera predeterminada, si deseas desactivarlo debes
seguir los siguientes pasos:

1) Ir a Archivo > Preferencias > Configuración

2) En el recuadro de Buscar configuración ingresa telemetry y ponemos en off

Con eso le pedimos a VSCode que deje de estar compartiendo información sobre su
uso, lo que ellos llaman, Telemetria.

Fuente
======

https://www.javimata.com/blog/como-evitar-que-vs-code-recopile-informacion-de-uso

=======================================
Instalar extensión de ChatGPT en VSCode
=======================================

1- Primero, vamos a ir a Visual Studio Code, a la sección de extensiones. En la
barra de búsqueda, buscaremos "CodeGPT", la extensión oficial esta demarcado con
un cetificado de color azúl, lo instalamos.

2- Luego tenemos que crear nuestra API Key que vamos a utilizar para conectar
ChatGPT con Visual Studio Code, si no, no funcionará, en los detalles
de la extensión buscamos el enlace API Key, al hacer click nos llevará
a la web https://www.codegpt.co/docs/tutorial-basics/configuration donde
buscaremos la sección "Get your api key" > OpenAI > Go to View API Keys y le
damos click, debemos iniciar sesión con la cuenta de OpenAI, puede usarse
la cuenta de Google, una vez ahí le damos a "Create a new secret key", copiamos
la clave que nos dan.

3- Ahora, desde vscode le damos a F1 y teclearemos "CodeGPT: Set API".
A continuación, le daremos clic a esta opción, pegaremos API Keys y
presionaremos enter.

Ya estaremos conectados a Chat GPT y podremos usarlo.

Configuración Extensión ChatGPT
===============================

Vamos a Configuración > Extensiones > CodeGPT

Podemos poner el lenguaje en Español por ejemplo

Uso de la extensión
===================

Simplemente debemos presionar F1 o presionar Control + Shift + p y escribir:

>Ask CodeGPT

Presionamos Enter y aparecerá un cuadro para ingresar nuestra instrucción, le
podemos pedir algo como:

Crear un formulario de contacto en PHP

Fuentes
=======

https://dropcoding.com/extension-chatgpt-visual-studio-code/

https://www.codegpt.co/docs/tutorial-basics/installation

========================================================
Compartir puerto en internet con Tunneling - dev tunnels
========================================================

Esta funcionalidad de vscode nos permite compartir un puerto que se esté
ejecutando en nuestro entorno local con el objetivo de que a través de un
enlace de internet cualquier persona, como un cliente por ejemplo pueda probar
desde donde está, el proyecto que estamos trabajando.

1- Para compartir nuestro proyecto en internet mediante un tunel de
desarrollador de vscode lo primero que debemos hacer es abrir un terminal de
vscode y ejecutar nuestro proyecto, supongamos que tenemos una página html
con su archivo index.html y queremos mostrarlo mediante una dirección y un
puerto, una opción recomendada es hacer uso de la extensión de vscode llamada
Live Server que nos permite servir mediante una dirección y un purto lo que
se encuentre en el directorio configurado para ello.

2- Ejecutamos Live Server para servir nuestra página html según lo configurado,
este hace que nuestra página esté disponible desde la dirección
http://127.0.0.1:5500 lo que nos interesa de esa dirección es el puerto, que es
el 5500.

3- Ahora en la consola hacemos click en la pestaña PUERTOS y damos click al
botón "Reenviar puerto", eso nos abre un pequeño formulario con columnas, la
primeara es puerto, ahí debemos colocar el puerto que queremos compartir que es
el 5500, luego de escribirlo damos a enter, eso hará que en la columna de la
tabla "Dirección reenviada" veamos una dirección web, como por ejemplo esta:
https://gt30058c-5500.use2.devtunnels.ms/ esa será la dirección que
compartiremos con otra persona para que vea nuestra página html, sin embargo,
primero hay que cambiar la visibilidad, que por defecto es privada, en la
columna "Visibilidad" hacemos click en Privado > Cambiar visibilidad del puerto
> Público

4- Listo! ya cualquiera puede consulta la dirección
https://gt30058c-5500.use2.devtunnels.ms/ para ver lo que se está ejecutando
desde tu puerto 5500, siempre y cuando Live Server siga sirviendo la página
desde la dirección local http://127.0.0.1:5500.

===============
Temas de vscode
===============

https://vscodethemes.com