by Braulio Diez

Una de las cosas más apasionantes en el mundo del Front-end es lo rápido que está evolucionando, hace unos meses estábamos usando bower y tags “script” en el html de nuestros sitios web y ahora nos encontramos utilizando “imports” y dejando que una herramienta de bundling nos lo resuelva todo.

Otro tema apasionante es el abanico de herramientas que tenemos disponibles, de utilizar Eclipse o Visual Studio, pasamos a tener una cantidad de opciones muy interesantes: Sublime, Atom, Webstorm, Visual Studio Code…

Ahora viene la parte negativa ¿Cómo narices haces que todo esto funcione bien en los diferentes editores?

Por nuestra parte nos hemos esforzado en que nuestros proyectos publicados se abran correctamente con Atom y Visual Studio Code (nos comentan que con Webstorm también va la cosa bien). En este post vamos a resumir los “tortazos” que nos hemos dado y las soluciones que hemos aplicado, espero que os sea de utilidad.

Escenario

En cuanto a editores, Visual Studio Code ya trae soporte para Typescript, en Atom tienes que instalarte un plugin, el que más nos gusta es atom-typescript de typestrong.

Puedes ver como instalártelo en este link.

Por otro lado, utilizamos webpack para empaquetar (esto nos permite utilizar “import”), npm para instalar librerías de terceros (si, react, jquery…), si buscas más info sobre esto, puedes encontrarla en este link.

Otra cosa que utilizamos es “typings” esto nos permite tener intellisense para las librerías que sean js (por ejemplo,react), más información en este link.

Tsconfig

Ahora viene la parte divertida, ¿Cómo montar un fichero tsconfig que se lleve bien en diversos editores?... vamos a primero a enumerar la lista de problemas que nos encontramos:

  • Uno de los problemas que nos podemos encontrar con los editores o al compilar es que se queje de que hay ficheros duplicados:
    • Se hace un lío con la carpeta node_modules “ERROR in ..\01 Node Modules Error\node_modules\typescript\lib\lib.webworker.d.ts (23, 9): error TS2300: Duplicateidentifier ‘usage’.”
    • O con la de typings “ERROR in ..\02 Typings Error\typings\main\ambient\jquery\index.d.ts”

  • Atom-typescript trae una extensión no estándar del tsconfig que se llama “filesGlob” esto nos permite decirle al plugin en que carpeta se encuentran los TS que nos interesa y cuales ignorar. Esto está muy bien hasta que te hace falta transpilar o abres con otro editor el proyecto (ej. Visual Studio Code).

  • Atom-typescript también tiene una opción en la que te lista todos los ficheros que se están usando de forma automática, eso parece estar muy bien porque ayuda a compilar, pero ya veremos que no hace falta tirar de esa opción.

  • Visual Studio Code no tira de “filesGlob”, y lo que hace es tirar de la lista enorme de ficheros que hemos comentado en el punto anterior, y si no está disponible se pone a rastrear todas las carpetas… aquí es donde empiezan los problemas.

Solución

Tras un poco de investigación, nos encontramos con que:

  • En los tsconfig podemos decir que carpetas queremos excluir (buen punto para indicarle que no se ponga a husmear en node_modules ni en typings/main).
  • Podemos desactivar el que atom-typescript genere lista de ficheros (de hecho, la dejamos vacía).
  • No nos hace falta tirar de “filesGlob”.

Es decir, el tsconfig que nos queda, es el siguiente:

Para que lo tengáis fácil para poder “bichear” esto, hemos aislado un proyecto de ejemplo y publicado en este link de GitHub.