En mi caso particular voy a utilizar Neovim como entorno de desarrollo. Simplemente por una cuestión práctica, y es que es esta herramienta la que estoy empleando con otros lenguajes de programación. Por supuesto, que no es el único editor, ni la única herramienta. Incluso te diría que probablemente no sea la herramienta más cómoda, sobre todo si no la conoces. Aquí cada uno tiene que decidir que es lo que quiere hacer y como lo quiere hacer. Mi recomendación, que es básicamente la misma que me hago a mi mismo en la mayoría de los casos, es que sigas a la mayoría. Es decir, que utilices el mismo editor que el que utiliza la mayoría. Esto te lo recomiendo así, porque es mas fácil que ese software se mantenga, encontrarás mucho mas soporte y seguro que te encuentras más cómodo. Yo como te digo, y en mi caso, voy a seguir con Neovim. Así, que si quieres utilizar mi configuración, te recomiendo que le des un vistazo a mis dotfiles, donde encontrarás la configuración completa. Sin embargo, aquí quiero darte algunas pistas de la configuración particularizada de TypeScript para preparar mi entorno de programación.
Preparar mi entorno de programación para TypeScript
Instalando Node
Seguramente ya tengas instalado Node, en el caso de que estés utilizando Neovim, o incluso si no lo estás utilizando. Pero, en cualquier caso, lo que deberías hacer es ejecutar el siguiente comando en una terminal,
sudo pacman -S nodejs npmNode Version Manager
En el caso de que quieras, o necesites instalar diferentes versiones de Node, puedes utilizar NVM, Node Version Manager. Este paquete se encuentra en los repositorios AUR, así que,
paru -S nvmY para completar tu configuración, tienes que añadir lo siguiente a tu .zshrc o a tu .bashrc, dependiendo de la shell que estés utilizando,
source /usr/share/nvm/init-nvm.shAhora para ver las versiones que hay disponibles, puedes utilizar el siguiente comando,
nvm list-remoteY otras opciones realmente interesantes y a tener en cuenta son,
nvm lslista las versiones instaladasnvm install nodeinstala la última versiónnvm install --ltsinstala la última versión establenvm use <version>establece la versión por defecto
Instalar paquetes de forma global
Para instalar paquete de Node, de forma global, y sin necesidad de adquirir derechos de administrador, tienes que ejecutar la siguiente instrucción,
npm config set prefix '~/.local/'Instalar typescript
Dado que voy a utilizar Typescript, en todas partes, la cuestión es instalarlo de forma global. Para ello, ejecuto lo siguiente,
npm install -g typescriptAhora es posible ver la versión de Typescript que he instalado. Solo tengo que ejecutar,
tsc -vSi quiere instalar Typescript en un proyecto, tengo que hacerlo de la siguiente forma,
npm install typescript --save-devCrear un proyecto
mkdir proyecto
tsc --init El siguiente paso es realizar algunos cambios en el recién creado tsconfig.json, en concreto, se trata de modificar las siguientes opciones,
"outDir": "./build"
"rootDir": "./src"Mejorar nuestra productividad en el desarrollo
npm init --yes
npm install --g nodemon concurrentlyEn el archivo package.json, modificar scripts de la siguiente forma,
"scripts": {
"start:build": "tsc -w",
"start:run": "nodemon build/app.js",
"start": "concurrently npm:start:*"
},Finalmente, con el objeto de facilitarme la vida, hice un sencillo script que resuelve todas estas cosillas de golpe, así como algunas ayudas auxiliares que aprovecharé.
#!/usr/bin/env bash
function new_typescript(){
NAME="$1"
if [[ -z "$NAME" ]]; then
exit 1
fi
mkdir -p "$NAME"/{src,build}
cd "$NAME" || exit
cat << EOF > package.json
{
"name": "$NAME",
"version": "1.0.0",
"main": "build/app.js",
"dependencies": {
},
"devDependencies": {},
"scripts": {
"start:build": "tsc -w",
"start:run": "nodemon build/app.js",
"start": "concurrently npm:start:*"
},
"keywords": [],
"author": "Lorenzo Carbonell <a.k.a atareao>",
"license": "MIT",
"description": ""
}
EOF
npm install typescript \
eslint \
@typescript-eslint/parser \
@typescript-eslint/eslint-plugin \
--save-dev
cat << EOF > tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
EOF
cat << EOF > .justfile
default:
just --list
start:
npm start
install package:
npm install {{ package }}
uninstall package:
npm until {{package}}
EOF
cat << EOF > ./src/app.ts
console.log("Hello World!");
EOF
}Configurando Neovim
Además del resto de complementos que tengo instalados por defecto en Neovim, he añadido uno exclusivo para TypeScript, que es typescript-tools.
Antes que nada indicar, tal y como lo hace el propio desarrollador de la aplicación, que este plugin está en versión beta, con lo que es posible que encuentres algún que otro bug.
En mi caso, lo instalé utilizando Lazy, con la siguiente configuración,
return {
"pmizio/typescript-tools.nvim",
dependencies = { "nvim-lua/plenary.nvim", "neovim/nvim-lspconfig" },
opts = {},
config = function()
require("typescript-tools").setup({
tsserver_locale = "es",
})
end,
}Para documentar utilizo Neogen, que a su vez hace uso de TreeSitter, con lo que es necesario instalar typescript. Para ello, lo que tienes que hacer es ejecutar este comando en Neovim,
TSInstall typescriptA partir de aquí, ya podrás utilizar Neogen para generar la documentación de todo aquello que hagamos. De nuevo, esto lo puedes hacer ejecutando el comando Neogen, o bien, si lo quieres puedes crearte un atajo de teclado que te facilite este. Por ejemplo, en mi caso utilizo ;Dd
El vídeo
A continuación puedes encontrar lo mismo pero en formato vídeo,
Conclusiones
Esta es mi configuración actual, pero se trata de un trabajo en progreso que iré actualizando, conforme vaya actualizando mi flujo de trabajo. Sobre todo, teniendo en cuenta que ahora mismo estoy enfocado a dos entornos completamente distintos.
Más información,