Discussion :

[Beginner.]

Salut,

Connaissez-vous un IDE ou un éditeur qui fasse l'auto-complétion, la détection d'erreurs (linter), le refactoring, le go to definition, references en tenant compte plusieurs fichiers (ceux d'un projet par exemple) ?

Je m'explique : par exemple : si des fonctions et/ou des variables sont définies dans un fichier a.js celles-ci sont prises en compte quand on travaille dans un fichier différent...

Merci.

[SylvainPV]

Salut,

Webstorm de JetBrains fait tout ça, mais il est payant. Je ne sais pas du côté des gratuits.

[Beginner.]

Salut Sylvain et merci, comment vas-tu depuis le temps ?

Ah oui WebStorm, je m'en doutais un peu, il est souvent en avance...

Sais-tu comment il se débrouille dans le cas où certains fichiers sont en fait des modules (de gros fichiers js quoi...) ? Par exemple je travaille sur mon code et j'ai besoin de plusieurs fonctions proposées par certains modules, j'inclus alors ces modules (avec la balise <script> dans mon cas) dans ce cas aurais-je une assistance sur ces fonctions ?

Par assistance je veux dire par exemple a) l'auto-complétion, b) le go to définition, c) les références et d) aussi une "explication" basée par exemple sur une éventuelle JSDoc... ?

---> Pour qu'un IDE fasse cela : il lui faudra parser tous les modules, non ?


----------------------

Est-ce que WebStorm nous préviens lorsque l'on utilise une fonction ou une variable non définie (ni dans un des modules que j'ai inclus ni dans mon code) ? Et je vais un peu plus loin juste pour m'informer : est-ce que dans ce cas il nous prévient en nous disant que la fonction est définie dans tel module et que je dois donc l'intégrer pour l'utiliser (genre comme en Java avec Eclipse où il nous dit d'ajouter tel 'import') ?


Merci.

[SylvainPV]

Ça va merci, bien que je ne peux plus passer aussi souvent qu'avant.

Plusieurs balises script ne font pas de vrais modules, les différents fichiers peuvent être interdépendants mais ce n'est pas explicite, tu te bases sur des variables globales ou des événements. L'idéal est d'utiliser les modules ES6. Ils commencent tout juste à être supportés sur navigateur et il vaut toujours mieux utiliser un module bundler comme rollup/webpack/babel, mais au moins tous les liens entre modules sont définis statiquement et donc il n'y a aucun doute possible pour l'autocomplétion ou le typage statique, le go to definition etc...

C'est avec les modules ES6 (ou TypeScript) que tu auras le meilleur résultat, mais Webstorm peut aussi se débrouiller avec plusieurs fichiers JS chargés depuis plusieurs balises <script>. En fait tous les scripts dans ton dossier projet sont analysés et il essaie de recoller les morceaux en se basant sur les noms des classes/méthodes.

[Beginner.]

Merci.

Ouais alors la "programmation modulaire" j'ai commencé à m'y intéressé mais j'ai du mal, il y a beaucoup de choses, d'outils, je m'y perd pour l'instant, j'ai d'ailleurs ouvert un fil à ce sujet : Travailler sous forme de projet (avec plusieurs fichiers .js) ?

Une des choses qui m'échappent et que je ne parviens pas à déterminer clairement c'est si avec ces outils on peut travailler durant la phase de développement (avec débogage dans le navigateur) ou bien si on les utilise seulement pour la distribution...

Comment exécuter et déboguer notre code dans un navigateur vu que ce dernier ne connait pas import, require()... ?

J'ai essayé un outils qui utilise Babel pour convertir du ES6 en ES5 mais on se retrouve avec des require() donc là pareil le navigateur ne connait pas...

Je ne connais pas Node mais j'ai lu des trucs, apparemment avec Node c'est possible de développer et déboguer des "programmes modulaires" mais dans le navigateur comment font les développeurs ?

J'ai bien vu des librairies qui permettent de charger des modules et leurs dépendances, ils utilisent je crois la balise <script> et/ou des requêtes Ajax ? du coup ça marche dans le navigateur... On automatise ce qu'on fait manuellement en insérant nous même des balises <script>...

D'ailleurs il y a ce chapitre qui en parle : Modularité -- JavaScript Éloquent

[SylvainPV]

Oui pour l'instant ça demande pas mal d'outillage et de configuration mais on espère qu'à l'avenir ça sera plus simple à mettre en place.

Actuellement tu peux déjà sur les dernières versions de Chrome et Safari utiliser une balise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="module" src="toncode.js">

et ensuite utiliser import/export dans le code JS en question.

Mais pour optimiser les perfs et avoir un meilleur support sur tous les navigateurs, il faut passer par un outil qui "met à plat" tous tes modules et compresse le tout en un seul fichier (qu'on appelle bundle). C'est pour ça qu'on parle de module bundlers.

Utiliser ces outils implique des connaissances sur Node.js et NPM, mais ça vaut le coup. Regarde du côté de rollup, c'est le plus simple selon moi.

[Mickael_Istria]

Eclipse IDE aussi sait faire ca. Il est gratuit, open-source, vendor-neutral, tout ca...
Apres, pour etre franc, JS dans Eclipse IDE, bien que ce soit beaucoup ameliore, ce n'est pas non plus fou-fou pour l'instant compare a certains competiteurs.
A mon avis, VSCode est le meilleur rapport qualite-prix pour JS de nos jours.

[Beginner.]

Salut,

@ Mickael_Istria : Merci, oui justement je débute avec VSCode et je regarde aussi Eclipse avec Tern : https://github.com/angelozerr/tern.j...rn-Eclipse-IDE

Actuellement tu peux déjà sur les dernières versions de Chrome et Safari utiliser une balise <script type="module" src="toncode.js"> et ensuite utiliser import/export dans le code JS en question.

Ok merci. Oui j'avais vu ça en effet...

Mais pour optimiser les perfs et avoir un meilleur support sur tous les navigateurs, il faut passer par un outil qui "met à plat" tous tes modules et compresse le tout en un seul fichier (qu'on appelle bundle). C'est pour ça qu'on parle de module bundlers.

Ok mais ça c'est quand on distribue le code ou c'est aussi pendant le développent ?

[SylvainPV]

Ok mais ça c'est quand on distribue le code ou c'est aussi pendant le développent ?

Ça dépend de comment tu configures tes outils. Actuellement on fait souvent la minification uniquement pour distribuer le code de production, parce que ça prend du temps et ça complique le débogage. Mais la mise à plat des modules est systématiquement faite vu le faible support navigateur actuel pour les modules ES. Ça changera peut-être d'ici un an ou deux.