NetBeans JavaScript Editor

Par liguorien, dimanche 5 février 2006 à 20:37 :: Projets :: #154 :: rss

NetBeans n'a jamais offert de support pour le JavaScript. C'est prévu pour la prochaine version mais comme je n'ai appris cette nouvelle qu'hier et comme je VOULAIS un support pour le javascript, j'ai entrepris il y a quelques jours l'écriture d'un module offrant un support de base pour le JavaScript.

Les fonctionnalités offertes sont les suivantes :

- Colorisation syntaxique : Permet de personnaliser à 100% le formatage des identifiants, mots clés, opérateurs, String, Number, nombres hexadécimals, méthodes et commentaires.

- Engin d'indentation (ctrl-shift-F)

- Dialogue de création de classe (génération de stub code)

- Toute les fonctionnalités déjà offertes par l'éditeur de NetBeans (historique de navigation, bookmark, macro, abbreviation, etc...)

J'ai en fait repris le code abandonné que j'avais fait l'été dernier pour un éditeur AS2. La plupart du code provient de NetBeans lui-même. J'ai pris les classes pour la syntaxe et l'indentation de l'éditeur Java et je les ai modifiées pour le JavaScript. J'en ai profité pour rajouter la coloration des méthodes (c'est présent dans l'éditeur java, mais c'est dans une couche différente du code que j'utilise..). Le seul code qui est vraiment de moi c'est la logique du dialogue de création de classe. Ce n'est pas la fonctionnalité du siècle, mais ça fait gagner du temps et ça m'a permis de tester le nouveau éditeur d'interface graphique de NetBeans : Matisse (il fonctionne à merveille !).

Le module est conçu pour NetBeans 5.0. Il y a 2 façon d'installer le module, je recommande l'installation en ligne qui est la plus compliqué à mettre en place, mais elle est magique par la suite!

Installation en ligne
Il faut tout d'abord ajouté mon serveur dans la liste des Update Center de NetBeans.

Menu > Tools > Options > Advanced Options > IDE Configuration > System > Autoupdate Types

Faites un clic-droit sur Autoupdate Types et ensuite New > General Update Center. Entrez un nom descriptif pour le update center, par exemple "Liguorien Update Center". Une fois créé, il faut cliquer sur le Node qui est apparu dans la liste et modifié la valeur de la propriété Server URL avec la valeur suivante :

http://www.liguorien.com/download/jseditor/updates.xml

Vous pouvez maintenant fermer la fenêtre d'options.

Bon maintenant que le serveur est ajouté, nous allons procéder au téléchargement et à l'installation du module.

Menu > Tools > Update Center

Assurez-vous d'avoir mon serveur dans la liste et que la case est coché. Dans l'étape suivante, assurez-vous de transférer l'élément JavaScript Editor dans la liste de droite. Vous devriez finir l'installation sans problème en suivant les instructions.
Tous dépendants de la configuration (par défaut, à chaque semaine), NetBeans se connecte aux Update Center et s'il y a de nouveaux updates de disponibles pour les modules, s'il y en a, il vous fera signe. Il est toujours possible de vérifier manuellement en allant dans le Update Center.

Installation hors ligne
Télécharger le fichier com-liguorien-jseditor.nbm. Ensuite aller dans le Update Center :

Menu > Tools > Update Center
Au lieu de vous connectez en ligne, sélectionnez la 2ième et ajoutez le fichier NBM que vous venez de télécharger. Vous devriez finir l'installation sans problème en suivant les instructions.

Je vais encore travailler un peu dessus et je vais rendre les sources disponible prochainement. N'hésitez pas à me signaler les bugs s'il y a lieu.

Commentaires

1. Le mardi 7 février 2006 à 10:09, par Riccardo Lora

Hi Nicolas, your work is very useful! Thanks!
Next steps could be implementing a function outliner and a way to set .js file encoding.
This thing would be very apprecieted.
PS. i don't understand francais and i am not aware of your plans.

2. Le mardi 7 février 2006 à 14:02, par Philippe

Ton code d'indentation m'intéresse au plus haut point
Bon, je pourrais aussi modifier le code de NetBeans...

3. Le mercredi 8 février 2006 à 16:08, par liguorien

En attendant que mon code soit disponible, tu peux récupérer le code d'indentation pour l'éditeur Java dans ce package. Plus particulièrement la classe JavaFormatter.java. L'indentation est vraiment la parti du code que je n'ai presque pas touché, donc ça devrait te donner une idée. Par contre, je ne crois pas que le code tel quel soit utilisable en dehors de la plateforme NetBeans (ou dans un autre language), car il y a beaucoup de références aux API de NetBeans.

4. Le jeudi 20 avril 2006 à 01:22, par seb

Salut,

J'en avais marre d'avoir le javascript gris et pas indenté en haut de mes pages, j'ai tapé "netbeans javascript" et ta page était là !

J'ai bien installé ton module, il figure dans le module manager installé dans "editing" mais rien ne se passe, mon code javascript est toujours tout gris, ais-je raté quelque chose?

merci

5. Le jeudi 20 avril 2006 à 08:15, par liguorien

L'éditeur javascript est fonctionnel uniquement dans les fichier *.js. Ce n'est pas possible de l'avoir à l'intérieur d'un tag <script> dans une page HTML ou JSP. C'est trop complexe pour le moment et l'API de l'éditeur de NetBeans sera remis à neuf dans la version 6.0. Il sera alors beaucoup plus facile de faire ce genre de chose.

6. Le samedi 9 septembre 2006 à 11:28, par André Desrosiers

Wow, superbe, ça fonctionne comme un charme. Est-ce que tu crois qu'il est possible d'ajouter le support pour le utf-8 dans les fichiers *.js?

C'est vraiment pénible de faire une application web avec Netbean en utf-8 uniquement, à moins que j'ai raté quelque chose?!?

Encore une fois, merci beaucoup pour ton plugin.

7. Le lundi 4 décembre 2006 à 10:29, par vince

salut,

Un grand merci pour ton module javascript qui rend un peu plus coloré le code !!
Mais plus on en a plus on en veut...
Une fonctionnalité bien pratique serait de pouvoir réduire le code en fermant le code entre accolades comme le fait Netbeans pour les méthodes Java.

Encore merci et bon courage pour les prochaines versions.

8. Le vendredi 1 juin 2007 à 20:31, par Nis

Hello,

Tu viens de donner un sens à ma vie à 1h du mat' lol Moi et la coloration syntaxique c'est comme une histoire d'amour ... Ce qui serait bien, en attendant la version 6 et si tu comptes encore améliorer ton support du Javascript, ça serait d'ajouter une option en plus pour l'indentation : mettre un retour à la ligne avant chaque {, histoire d'avoir :

function f()
{

et pas

function f() {

Je trouve ça tellement plus clair de passer à la ligne avant !

J'ai voulu changer de "moteur d'indentation", mais rien à faire, la sélection reste toujours sur le "Javascript indentation engine" !

@+

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

Liguoblog