Cómo configurar Ubuntu para programar en JavaScript

A veces reinicio mi entorno en Ubuntu y vuelvo a instalar todo desde cero. Configurar todo de nuevo no siempre es una tarea rápida, así que aquí comparto la lista de mis aplicaciones, paquetes y extensiones favoritas para este setup.

Mi máquina de desarrollo está enfocada en JavaScript (Angular y TypeScript) sobre Ubuntu, aunque la mayoría de estas herramientas también funcionan en macOS.

Puedes copiar y pegar los comandos directamente en tu terminal para instalar o configurar cada herramienta.

Node

Node.js es el entorno de ejecución básico para programar en JavaScript. El gestor de paquetes apt de Ubuntu suele instalar una versión antigua, así que uso el paquete n para actualizar a la versión estable más reciente.

sudo apt update
sudo apt install nodejs
sudo apt install npm
sudo npm install -g n
sudo n stable

Corregir permisos de acceso en npm

Gracias al feedback de @thope, antes de instalar paquetes globales recomiendo corregir los permisos de npm para evitar el uso de sudo.

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile

Puedes leer más detalles en la documentación oficial de npm.

Paquetes de npm

@angular/cli: Herramienta de línea de comandos para crear proyectos de Angular listos para usar.

Nodemon: Monitorea cambios en tu código JavaScript desde la terminal con recarga automática.

Prettier: Formateador de código para mantener un estilo consistente.

Lite-server: Servidor HTTP para archivos estáticos con recarga en vivo y acceso en red local.

Parcel-bundler: Empaquetador rápido con excelente soporte para TypeScript, Sass y más.

Typescript: El compilador de TypeScript para archivos .ts.

@ngxs/cli: Herramienta de línea de comandos para la gestión de estado con NGXS.

npm i -g typescript
npm i -g @angular/cli
npm i -g nodemon
npm i -g prettier
npm i -g parcel-bundler
npm i -g lite-server
npm i -g typescript
npm i -g @ngxs/cli

Visual Studio Code

Uno de los editores de código más utilizados es VS Code.

https://code.visualstudio.com/download

Extensiones

Esta es mi lista de extensiones recomendadas para programar en VS Code. Puedes copiarlas y pegarlas en tu terminal para instalarlas:

code --install-extension codezombiech.gitignore
code --install-extension dbaeumer.vscode-eslint
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension eamodio.gitlens
code --install-extension EditorConfig.EditorConfig
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension fiazluthfi.bulma-snippets
code --install-extension johnpapa.angular-essentials
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vsliveshare.vsliveshare-pack
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension thenikso.github-plus-theme
code --install-extension zhuangtongfa.material-theme

Git

Git es el sistema de control de versiones por defecto. En mi caso, me gusta ver el nombre de la rama activa en la terminal y redactar los mensajes de mis commits con VS Code.

sudo apt-get install git
git config --global user.email you@gmail.com
git config --global user.name You Name

Mostrar el nombre de la rama en la terminal

Agrega estas líneas a tu archivo ~/.bashrc:

force_color_prompt=yes
color_prompt=yes
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
if [ "$color_prompt" = yes ]; then
 PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
else
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
fi
unset color_prompt force_color_prompt

Mensajes de commit con VS Code

Agrega estas líneas a tu archivo .gitconfig para usar VS Code al escribir tus commits:

[core]
	editor = code --wait
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE

Navegador Google Chrome

Por defecto, Ubuntu viene con Firefox, pero instalar Google Chrome es muy fácil:

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

Mis extensiones de Chrome

JSON Viewer: Da formato legible y resalta la sintaxis de respuestas JSON.

VisBug: Permite inspeccionar y editar elementos del DOM visualmente en la página.

Augury: Depurador de componentes para Angular.

Redux devtools: Ayuda a depurar acciones y estado para Redux y NGXS.

Angular State inspector: Permite inspeccionar el estado de propiedades y componentes en Angular.

¡Listo!

Espero que esta lista te sea de ayuda para configurar tu propia máquina de desarrollo. Si echas en falta alguna herramienta, ¡deja un comentario o comparte el artículo!

Foto de Andrik Langfield