357 - Python con Visual Studio Code desde el navegador.

357 - Python con Visual Studio Code desde el navegador.

¿Como desarrollar código Python con Visual Studio Code desde el navegador?Puedes hacerlo en remoto y con tu configuración totalmente funcional

1:25
-3:15

En el podcast anterior, o quizá en el anterior del anterior, ya te lo dejé caer, o al menos lo insinué. Recuerda que te estuve hablando de utilizar NeoVim en remoto, y que andaba detrás de eso utilizando Docker y Alpine Linux. Sin embargo, esto venía de antes. Esto venía de que había visto una imagen de Visual Studio Code para levantarlo y trabajar en remoto. Es decir, trabajar con Visual Studio Code directamente en la web, sin necesidad de ejecutarlo en local. Una maravilla.

¿Como? Puedes trabajar con Visual Studio Code directamente desde el navegador, sin necesidad de tenerlo en local. Esto te permite utilizarlo desde dispositivos que actualmente no permiten, o simplemente no facilitan programar.

Y es que tener una tablet Android, y poder programar en ella estés donde estés, es simplemente una gozada. Pero son solo esto. Las ventajas que te ofrece trabajar con Visual Studio Code en remoto son muchas, pero, probablemente, la que mas me atrae, es tener un editor siempre disponible para mi con mi configuración preferida, listo para ser usado.

Python con Visual Studio Code desde el navegador.

Python con Visual Studio Code desde el navegador.

¿Porque Python con Visual Studio Code?

Antes de adentrarme en explicarte sobre Python con Visual Studio Code, como levantar el contenedor y que extensiones te recomiendo que instales, explicarte porque este episodio del podcast.

En las últimas semanas, en el grupo de telegram de atareao con Linux, hemos hablado sobre realizar un reto con Python. La idea es hacer algo similar al Advent of Code, pero que se realice a lo largo de todo el año.

Esto me ha dado pie a un proyecto que lanzaré este próximo jueves, y como preparativo al mismo, te traigo, este solución tan interesante. Indicarte que, evidentemente, puedes tomar la parte que mas te interese, faltaba mas. Pero, esta es la idea original de este podcast.

Ahora ya he creado la intriga.

Visual Studio en un contenedor

¿Porque tener Visual Studio Code en un contenedor?¿Porque utilizarlo en remoto? Algunasa de las ventajas de tener Visual Studio Code funcionando en un servidor las he comentado anteriormente,

  • Lo tienes siempre disponible
  • Funcionará siempre con tu configuración preferida
  • Te permite utilizarlo desde cualquier dispositivo que soporte un navegador
  • Se trata de un editor completo en un navegador.

Como instalar Visual Studio Code

Para instalar Visual Studio Code, de nuevo me remito al tutorial de Docker y en particular al capítulo dedicado a docker-compose en el tutorial de atareao.es.

Si lo utilizas directamente, puedes hacerlo de la siguiente forma,

version: "3.1"

services:
  code-server:
    image: lscr.io/linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/Madrid
      - PASSWORD=tucontraseñapreferida #optional
    volumes:
      - ./config:/config
    restart: unless-stopped
    port:
      - 8443:8443

En el caso de que utilices Traefik como proxy inverso, el archivo docker-compose será el siguiente,

version: "3.1"

services:
  code-server:
    image: lscr.io/linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/Madrid
      - PASSWORD=tucontraseñasecreta #optional
    volumes:
      - ./config:/config
    restart: unless-stopped
    networks:
      - proxy
    labels:
      - traefik.enable=true
      - traefik.http.services.vscode.loadbalancer.server.port=8443
      - traefik.http.routers.vscode.entrypoints=https
      - traefik.http.routers.vscode.rule=Host(`vscode.tuservidor.es`)
      - traefik.http.routers.vscode.tls=true
      - traefik.http.routers.vscode.tls.certresolver=myresolver

networks:
  proxy:
    external: true

Una vez seleccionado el docker-compose que quieras utilizar, solo te queda levantarlo, con un sencillo,

docker-compose up -d

Ahora ya lo tienes en marcha, queda configurarlo

Sobre la configuración de Visual Studio Code

A continuación te indico algunos complementos para Visual Studio Code, que te vendrán perfectos para programar en Python. Los primeros que te voy a indicar son genéricos, en el sentido de que no son exclusivamente para Python, sino que o bien afectan al propio Visual Studio Code, o bien, son realmente interesantes.

El tema Ayu

Ayu es el tema que utilizo por defecto en cualquier herramienta o aplicación que utilizo. La razón de utilizarlo es porque básicamente me ayuda a trabajar con comodidad por que los colores que utiliza. Además de esto tiene tres variantes de mas claro a mas oscuro que puedes utilizar en función de las condiciones. Yo, actualmente, estoy tan acostumbrado al uso de temas oscuros que me resulta complejo cambiar a temas claros.

ext install teabyii.ayu

Vim

Este complemento es totalmente prescindible, y solo es para aquellos que están, como yo, tan acostumbrados a los atajos de teclado de Vim. Aunque tengo que aclararte que a mi no me termina de funcionar del todo bien en el caso de utilizarlo en el navegador. Para utilizarlo en local funciona perfectamente.

ext install vscodevim.vim

GitLens

Si utilizas git como control de versiones, te diría que este complemento es un imprescindible. Te facilita tu relación con git y te muestra la información relacionada con el control de versiones de forma sencilla.

ext install eamodio.gitlens

Bracket Pair Colorizer 2

Este es uno de esos complementos que puedes prescindir por completo, pero que te hace la vida mas fácil. Se trata de un plugin, para colorear los paréntesis, corchetes y llaves, haciendote la lectura de código mucho más cómoda.

ext install coenraads.bracket-pair-colorizer-2

Tabnine

Otro asistente para escribir código. Este lo acabo de incorportar a mi flujo de trabajo y ya se ha convertido en un imprescindible. Lo estoy utilizando tanto en Visual Studio Code como en NeoVim. Pero te tengo que decir que está disponible para otros editores de código.

ext tabnine.tabnine-vscode

Python

Este es el primero de los complementos específicos para Python, está desarrollado por Microsoft, y funciona perfectamente. Desde luego, es un imprescindible para trabajar con Visual Studio Code en Remote y desarrollar código Python.

ext install ms-python.python

Python Docstring Generator

Una ayuda imprescindible para documentar el código. Se trata de un complemento que te ayudará a generar y documentar tu código. Es un imprescindible si quieres escribir código de calidad.

ext install njpwerner.autodocstring

Python Indent

Una de las características de Python es el uso de la sangría. Por esta razón utilizo este complemento que me ayuda a tratar con la, en ocasiones, incómoda sangría.

ext install kevinrose.vsc-python-indent

Python Test Explorer

Una herramienta imprescindible para trabajar con los test. Añade una sección en la barra lateral, que te permite ejecutar, revisar y comprobar el resultado de los test.

ext install LittleFoxTeam.vscode-python-test-adapter

Imagen de portada de Clément Hélardot

4 comentarios en “Python con Visual Studio Code desde el navegador.

  1. CA
    Carlos hace 3 años

    Hola, si no queréis instalar bracket-pair-colorizer-2, hay una opción en vs-code para activarlo en la configuración sin instalar nada.
    Un saludo a todos

    1. AT
      atareao hace 3 años

      Hola Carlos,
      Muchas gracias por la sugerencia.
      Un saludo.

  2. VI
    Victor González hace 3 años

    Buenas.
    Yo te agradezco tus esfuerzos para con los inútiles como yo, pero me resulta imposible seguir ningún tutorial de los tuyos sin ayuda externa.
    Por otro lado en el primer trozo de código donde pone «port» debería poner «ports»

    1. AT
      atareao hace 3 años

      Hola Victor,
      Tomo nota sobre lo que dices de la «ayuda externa», intentaré enfocarlo de otra forma en este tutorial,
      Muchas gracias por comentar y por tus sugerencias.
      Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *