Elecció d'un IDE per a programació web/javascript

De wikijoan
Salta a la navegació Salta a la cerca

Cas d'ús. Editor gedit. Introducció

Quan anem a programar amb qualsevol llenguatge de programació és important utilitzar un entorn on ens sentim còmodes per tal de millorar la productivitat i l'eficàcia. En el cas de què ens ocupa (per pàgines web utilitzant llenguatges HTML, PHP, CSS, Javascript) potser no està molt justificat utilitzar un IDE com Eclipse o Netbeans. Per exemple, en un entorn Ubuntu per defecte tenim l'editor de text gedit que és molt configurable i ampliable.

Exemple d'ús. Utilitzar l'editor gedit com a IDE per a desenvolupament web. L'editor gedit és el que ve per defecte a Ubuntu.

El primer de tot és escollir les preferències bàsiques per a poder programar de forma còmoda:

  • Mostra els números de línia
  • Ressalta la línia actual
  • Ressalta els claudàtors concordants
  • Tabulació: amplada adequada de la tabulació
  • Habilita sagnat automàtic?
  • Visualitza > Mode ressaltat poden triar el llenguatge (HTML, PHP, Javascript)
  • una altra possibilitat: Mostrar el marge dret de la columna (per ex, 80 caràcters). Això és útil per a la llegibilitat del codi, i per si s'ha d'imprimir.
  • Connectors?

A més, d'un IDE hem d'esperar que tingui:

  • bookmarks
  • autocompletar

Instal.lar tidy per a validar HTML

A la pàgina web dels plugins per a gedit veiem que existeix un validador de sintaxi HTML:

Primer de tot hem de tenir instal.lat tidy

$ sudo apt-get install tidy

i després seguir les instruccions. Bàsicament el que fem en instal.lar un plugin és copiar els fitxers a .local/share/gedit/plugins/, i si es vol una instal.lació per a tot el sistema/usuaris, copiar-ho a /usr/lib/gedit/plugins/.

Amb Tidy podem fer un check dels errors i avisos d'incompatibilitat (important Ctrl-F9, quadre inferior on surten els missatges), i també ens pot netejar (tidy) el codi per tal de què sigui compatible amb XHTML.

Escriure els nostres plugins per a gedit

També podem escriure els nostres plugins, amb llenguatge C o python:

Alternatives: Windows, MAC, Linux

Cada programador ha de conèixer i triar les eines que li poden anar bé. Un cop triat un editor de text que s'ajusti a les seves necessitats, seria interessant perdre una mica de temps estudiant les possibilitats de configurar-lo amb la idea de millorar la productivitat i fer fàcils les tasques repetitives. La idea és que ens hem de centrar en la programació, no hem de perdre temps en errors tontos de sintaxi...

Multiplataforma:

  • Visual Studio Code
  • Sublime Text2 (http://www.sublimetext.com/2). Està molt bé, és de pagament.
  • Aptana Studio 3 (MAC, Windows, Linux). Alumnes han reportat que va molt bé.
  • Atom. https://atom.io/ (open source). Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
  • Brackets. http://brackets.io/. A modern, open source text editor that understands web design

Els usuaris de Windows/Mac hauran de trobar les eines que els vagin millor, adaptades a la seva manera de trebalalr. Per exemple:

Sublime: cas pràctic

plugin per a Sublime: live reload for sublime text 3

Quan gravem en el Sublime (Ctrl-S), automàticament refresca el navegador web.


creat per Joan Quintana Compte, setembre 2018