Catégories
Start-up et applications

Comment installer Atom sur Windows

Atom est un éditeur de texte gratuit et open source disponible pour plusieurs systèmes d'exploitation, y compris Linux, Mac et Windows. C'est un éditeur de codage à usage général développé par GitHub avec une coloration syntaxique colorée pour différents langages, du JavaScript au HTML en passant par SQL. Il est hautement extensible, avec plus de 8000 packages de styles de plug-ins gratuits disponibles pour le téléchargement et l'installation, la plupart de ces packages ont été créés par des développeurs tiers tandis que d'autres sont proposés par Github et d'autres fournisseurs qui souhaitent qu'Atom fonctionne bien avec leurs produits et plates-formes.

Prêt à l'emploi, il s'intègre à git (la base de la plateforme de contrôle de source de Github). Grâce à d'autres packages téléchargeables, vous pouvez facilement ajouter la prise en charge d'autres systèmes de contrôle de code source. Il existe également une documentation complète sur l'utilisation d'Atom, y compris un livre en ligne, ainsi qu'une documentation pour la création de packages (qui nécessite une connaissance de JavaScript et de CoffeeScript). Il est disponible gratuitement et téléchargeable sur le site Web principal d'Atom. Vous pouvez rechercher des packages complémentaires sur la page officielle des packages.

Dans les coulisses, l'éditeur Atom utilise la plate-forme Electron, qui est essentiellement une version sandbox du navigateur Chrome avec le code node.js; cependant, vous n'avez pas besoin de le savoir pour l'utiliser. Si vous souhaitez consulter le code source ou même contribuer à son développement, vous pouvez tout trouver dans le référentiel GitHub officiel d'Atom.

Notez cependant qu'Atom est strictement un éditeur et doit être traité comme tel. La plupart de la prise en charge du langage est sous forme de coloration syntaxique. Mais si vous recherchez un environnement de développement intégré (IDE) complet qui inclut des capacités de débogage, vous voudrez peut-être chercher ailleurs, comme VS Code ou Eclipse. Notez également qu'il existe des packages d'extension qui fournissent une prise en charge linguistique supplémentaire, y compris le débogage, mais beaucoup de ces packages ne sont plus activement maintenus. Consultez la section ci-dessous sur les packages pour plus d'informations et d'avertissements.

Installation sous Windows

Pour installer Atom sur Windows, rendez-vous sur atom.io, où vous trouverez un bouton de téléchargement jaune. Téléchargez le fichier, probablement appelé AtomSetup-x64.exe, et exécutez-le. Il n'y a pas d'options; le programme d'installation installe simplement Atom pour l'utilisateur actuel, ferme et lance Atom. La première fois qu'Atom s'exécute, il s'ajoute au chemin système de l'utilisateur actuel. De cette façon, vous pouvez lancer Atom à partir de l'invite de commande.

Voici à quoi ressemble Atom lors de son premier lancement; notez qu'il y a une invite en haut indiquant qu'Atom est autorisé à ouvrir certains URI. Nous vous recommandons de cliquer sur Non, Jamais et de cliquer uniquement sur les autres options après avoir lu la documentation concernant cette fonctionnalité. (Nous n'utiliserons pas cette fonctionnalité ici à ProgrammableWeb.)

Maintenant, allez-y et fermez Atom. Dans la section suivante, nous montrons comment l'ouvrir à partir de l'invite de commande.

À quoi ressemble Atom lors de son premier lancement.

Le tester

Vous pouvez maintenant tester votre installation d'Atom. Ouvrez une invite de commande Windows et tapez simplement:

atom .

Le "."dit à Atom de se lancer dans le répertoire courant. Si vous le souhaitez, vous pouvez l'omettre et Atom se lancera dans un répertoire par défaut ou dans le répertoire dans lequel vous l'avez exécuté en dernier. Ou vous pouvez spécifier un chemin complet, par exemple:

atom Usersjeffcdevelop

Atom sera lancé et cette fois ressemblera à ce qui suit:

Atom se lancera et ressemblera maintenant à ceci.

La zone de gauche est une vue arborescente du répertoire de votre projet actuel; vous pouvez cliquer une fois sur les fichiers pour ouvrir un aperçu dans l'éditeur (pendant lequel l'onglet du fichier sur le côté droit sera en italique) et vous pouvez double-cliquer pour ouvrir complètement un fichier à modifier. En mode aperçu, si vous commencez à modifier le fichier, il s'ouvrira complètement. Ou si vous cliquez une fois sur un autre fichier, le fichier précédent que vous prévisualisiez se fermera et cet autre fichier s'ouvrira en mode aperçu. Alors que vous pouvez avoir plusieurs onglets ouverts sur le côté droit pour éditer plusieurs fichiers simultanément, il n'y a qu'un seul onglet pour la prévisualisation. En d'autres termes, vous ne pouvez prévisualiser qu'un seul fichier à la fois.

La partie droite de la fenêtre est la zone d'édition, qui peut être divisée en volets d'éditeur individuels. Chaque volet peut contenir n'importe quel nombre de fichiers, chacun apparaissant sous forme d'onglet en haut. Dans l'image ci-dessus, vous pouvez voir que la zone de l'éditeur est divisée en deux volets. Vous pouvez faire glisser les onglets de l'éditeur entre les volets; si vous les faites tous glisser dans un seul volet, les volets vides se ferment. Vous pouvez fermer les onglets en cliquant sur le X en haut à droite de chaque onglet. (La première fois que vous démarrez Atom, un onglet est une fenêtre demandant le consentement de télémétrie, dans lequel vous pouvez choisir d'envoyer ou non les données de débogage à l'équipe Atom.)

Vous pouvez également réduire le volet de l'arborescence du projet; lorsque vous faites flotter votre souris sur le bord droit de ce volet, le centre du bord droit recevra une icône qui ressemble à ceci:

Lorsque vous faites flotter votre souris sur le bord droit de ce volet, le centre du bord droit reçoit une icône qui ressemble à ceci.

Cliquez sur l'icône et le volet se réduira vers la gauche. Maintenant, lorsque vous faites flotter votre souris sur le bord gauche de la fenêtre Atom, vous verrez la même icône à l'envers; cliquez dessus pour rouvrir le volet. Vous pouvez également déplacer le volet projet vers le côté droit de la fenêtre en faisant glisser son titre vers le milieu du côté droit de la fenêtre Atom. Lorsque vous procédez ainsi, vous pouvez maintenant réduire le volet vers la droite au lieu de la gauche en survolant le bord gauche du volet. Divers packages ajouteront différents volets à Atom, et vous pouvez également les faire glisser et les réduire.

Vous pouvez ouvrir des fenêtres Atom supplémentaires en cliquant sur le menu Fichier -> Ouvrir le dossier. Lorsque vous choisissez un dossier, une toute nouvelle fenêtre d'application Atom s'ouvre.

Personnaliser Atom

Ici à ProgrammableWeb, nous construisons un grand ensemble de didacticiels qui utiliseront tous un ensemble commun de configurations. Pour rendre cela aussi simple que possible, nous allons avoir un répertoire de développement racine dans lequel vous pouvez enregistrer vos projets. En raison du nombre de projets, nous vous suggérons d'ouvrir votre éditeur de code afin qu'il pointe vers le répertoire du projet en cours (quel que soit le projet sur lequel vous travaillez à ce moment-là), plutôt que la racine de tous les projets. Nous allons également utiliser un ensemble standard de configurations et de plugins pour les éditeurs.

Atom propose une vaste gamme d'options. Vous pouvez accéder aux paramètres d'Atom par l'une des méthodes suivantes:

  • Cliquez sur le menu Fichier -> Préférences
  • Appuyez sur Ctrl +,

Vous devriez voir les paramètres ouverts dans la zone de l'éditeur, comme indiqué ici:

Atom propose une vaste gamme d'options.

La page des paramètres se trouve dans la zone de l'éditeur et, en tant que telle, possède un onglet en haut. Pour fermer la page des paramètres, cliquez simplement sur le bouton de fermeture de l'onglet.

Vous pouvez également personnaliser Atom via du code en fournissant un fichier CoffeeScript dans le répertoire .atom situé hors de votre répertoire utilisateur, qui se trouve généralement sous C: Users . Dans ce fichier, vous pouvez fournir un code de démarrage personnalisé et même appeler des packages de personnalisation que vous écrivez vous-même. Ici à ProgrammableWeb, nous n'effectuerons pas de personnalisation via le code, mais vous pouvez en savoir plus ici. Vous pouvez ensuite en savoir plus sur ce que l'équipe Atom appelle "Hacking Atom". Cependant, nous ajouterons des packages fournis par la communauté, dont nous discuterons ci-dessous.

En plus de la page Paramètres, Atom permet d'accéder à de nombreux paramètres via une palette de commandes; une petite fenêtre dans laquelle vous pouvez taper des commandes pour contrôler Atom. Vous pouvez accéder à la palette de commandes en:

  • Cliquez sur le menu Affichage -> Basculer la palette de commandes
  • Appuyez sur Ctrl + Maj + P

La palette de commandes s'ouvre et affiche une petite zone de texte dans laquelle vous pouvez taper, avec une liste de commandes dans une liste déroulante, comme indiqué ci-dessous. La documentation officielle utilise de temps à autre la palette de commandes; nous ne l'utilisons pas beaucoup dans nos configurations initiales.

La palette de commandes s'ouvre et affiche une petite zone de texte dans laquelle vous pouvez taper, avec une liste de commandes dans une liste déroulante, comme indiqué.

Voici quelques paramètres de base que nous recommandons.

Onglets vs espaces. L'indentation des sous-sections de code telles que les éléments internes d'une instruction if-then-else ou d'une boucle do-while est une habitude importante pour faciliter la lisibilité. Pas seulement pour vous, mais pour les autres qui devront peut-être consulter votre code plus tard. Comme les autres éditeurs de code, Atom dispose d'une fonction d'indentation. Bien qu'il s'agisse d'un sujet très controversé, nous allons définir nos indentations sur des espaces au lieu de tabulations pour une raison simple: les espaces fonctionnent mieux pour copier et coller du code de nos pages Web dans les éditeurs. (Vous êtes invités à reformater les onglets par la suite si vous préférez.) Nous allons utiliser quatre espaces pour permettre une lecture plus facile de notre code.

Avertissement concernant la langue: Contrairement à la plupart des autres langages, Python repose sur des niveaux d'indentation et est pointilleux sur la cohérence entre les espaces et les tabulations. Si vous choisissez de convertir un code Python d'espaces en onglets, vous devez vous assurer de le faire pour l'ensemble du fichier. Sinon, vous obtiendrez des erreurs dès que vous exécuterez le programme.

Pour définir l'indentation sur les espaces, ouvrez la page Paramètres et cliquez sur le bouton Éditeur, qui se trouve à gauche de l'onglet Paramètres, deuxième en partant du haut. Dans les paramètres, faites défiler jusqu'en bas et près de là, vous verrez la longueur de l'onglet et le type de tabulation. Définissez la longueur de tabulation sur 4. Définissez le type de tabulation sur Soft (ce qui signifie des espaces; Hard signifie des caractères de tabulation). Voici une capture d'écran:

Pour définir l'indentation sur les espaces, ouvrez la page Paramètres et cliquez sur le bouton Éditeur, qui se trouve à gauche de l'onglet Paramètres, deuxième en partant du haut. Dans les paramètres, faites défiler jusqu'en bas et près de là, vous verrez la longueur de l'onglet et le type de tabulation.

Nous vous encourageons à faire défiler les paramètres disponibles pour configurer l'éditeur à votre guise.

Polices et tailles. Cela dépend de vous, car nous avons tous une vision et des besoins visuels différents. Atom vous permet de choisir les polices et les tailles que vous préférez. Malheureusement, le nom de la famille de polices est un domaine dans lequel Atom n'est pas particulièrement convivial car il utilise la syntaxe HTML / CSS pour les noms de familles de polices. Les familles de polices HTML / CSS sont généralement des listes de noms de polices entourées de guillemets simples (lorsque le nom de police comporte des espaces), avec des virgules entre les noms de police.

Le paramètre s'appelle Famille de polices et se trouve dans la section Editeur des paramètres. Il n'y a pas de liste déroulante ni de sélecteur d'aucune sorte. Il vous suffit de savoir quelles polices sont disponibles sur votre système et vous pouvez les saisir ici. Vous pouvez explorer quelles polices sont installées sur votre système en cliquant sur la barre des tâches et dans la zone de recherche, tapez "police" et choisissez "Paramètres de police" dans les suggestions; la fenêtre Polices s'ouvre et répertorie les polices que vous avez installées sur votre ordinateur.

La taille est plus simple. Sous Taille de la police, tapez simplement la taille de la police souhaitée dans l'éditeur.

Vous pouvez également définir un niveau de zoom à l'aide de raccourcis clavier; ce niveau s'applique uniquement à la zone de l'éditeur. Essayez ceci: avec un fichier ouvert, maintenez la touche Ctrl enfoncée et tapez une touche +, ce qui peut nécessiter d'appuyer sur Maj en fonction de la touche + que vous utilisez. Vous verrez le texte de l'éditeur augmenter à l'intérieur. Inversez-le en appuyant sur Ctrl et sur la touche moins.

Forfaits recommandés

Atom est livré avec un grand nombre d'extensions appelées packages. Au-delà de cela, vous pouvez installer n'importe quel nombre des 8000+ packages créés par l'équipe Atom et la communauté. Vous pouvez voir quels packages vous avez installés en ouvrant Paramètres et en cliquant sur Packages, comme indiqué ici:

Vous pouvez voir quels packages vous avez installés en ouvrant Paramètres et en cliquant sur Packages.

Vous pouvez rechercher et installer de nouveaux packages en ouvrant les paramètres et en cliquant sur le bouton "Installer", comme indiqué ici:

Vous pouvez rechercher et installer de nouveaux packages en ouvrant les paramètres et en cliquant sur le bouton `` Installer ''

Ensuite, vous pouvez rechercher des packages dans la zone de texte en haut. Après la recherche, vous pouvez installer un package en cliquant sur le package "Installer" à côté de son nom. Si un package est déjà installé, le bouton "Installer" sera remplacé par un bouton "Désactiver". Chaque package a un nom unique que vous pouvez rechercher.

La plupart des composants intégrés à Atom sont en fait des packages personnalisés. Par exemple, l'arborescence du projet sur la gauche est un package, et vous pouvez le supprimer et le remplacer par un de la communauté qui peut avoir différentes fonctionnalités que vous préférez. Vous pouvez les trouver en recherchant dans les packages "tree".

Vous pouvez également rechercher des packages sur le site Web principal d'Atom ici. Vous pouvez éventuellement télécharger le code de n'importe quel package et l'installer manuellement; cependant, nous vous recommandons d'installer à partir de l'éditeur lui-même.

Vous trouverez ci-dessous une liste de packages que nous vous recommandons d'utiliser en fonction de vos langues préférées. Pour localiser chaque paquet, recherchez simplement le nom que nous incluons avec chacun, affiché en gras. Notez cependant que de nombreux packages de langue sont inclus par défaut lorsque vous installez Atom en utilisant les processus décrits ci-dessus.

Note importante: Nous avons constaté qu'il existe de nombreux packages qui apparaissent dans les résultats de recherche qui ne sont plus maintenus, et malheureusement l'équipe Atom ne les supprime pas. Soyez prudent avec de tels paquets. Vérifiez toujours l'état d'un package en cliquant sur le lien "Repo" sur la page du package, qui vous mènera généralement à une page GitHub. Regardez le code répertorié sur la page GitHub et notez les dates. Si vous voyez des dates d'il y a quelques jours, c'est un bon signe que le package est conservé. Si les dates remontent à plus de deux ou trois ans, elles ne sont probablement pas maintenues. Vous pouvez également cliquer sur le lien Problèmes sur la page GitHub et voir si les problèmes ne sont pas résolus et si les utilisateurs disent que le package ne fonctionne plus.

Voici une liste de plusieurs langues dans lesquelles des packages sont déjà installés par défaut, ainsi que le nom du package. Vous ne devriez pas avoir besoin de les installer, mais nous les listons ici au cas où. La plupart d'entre eux fournissent une coloration syntaxique de base:

C / C ++: langage-c
C #: langage-csharp
Go: langue-aller
Java: langage-java
JavaScript: langage-javascript
Objectif C: langage-objectif-c
Perl: langue-perl
PHP: langage-php
Python: langage-python
Ruby: language-ruby et language-ruby-on-rails sont tous deux installés par défaut.
Rust: langue-rust-bundled
SQL: langage-sql
TypeScript: langage-typescript (mais voir notre note ci-dessous; nous en recommandons un différent).

Voici quelques notes spéciales sur certaines de ces langues.

C #: Atom fournit la coloration syntaxique de base C # via la valeur par défaut fournie plugin language-csharp. Cependant, si vous êtes un programmeur C # professionnel, nous vous suggérons d'envisager Visual Studio Code pour votre éditeur, car il fournit une excellente intégration avec le runtime C #, y compris le débogage.

Node.js et JavaScript: Par défaut, Atom a une excellente coloration syntaxique JavaScript. La communauté a fourni plusieurs packages node.js; cependant, plusieurs des plus utiles (comme l'intégration avec le débogueur node.js) ne sont pas activement maintenus et certains ne fonctionnent même plus. Par défaut, Atom est livré avec les packages language-javascript et language-json. Nous n'en recommandons pas d'autres.

Manuscrit: La communauté a construit un excellent package TypeScript qui est activement maintenu, avec actuellement plus de 1,7 million de téléchargements. Rechercher les packages pour atom-typographie. Vous pouvez envisager de remplacer celui par défaut, language-typescript, par atom-typescript.

Options: exécution d'Atom à partir du sous-système Windows pour Linux (WSL)

Lorsqu'Atom s'exécute sous Windows, il n'a pas d'accès direct aux fichiers stockés dans vos répertoires WSL. (Cela contraste avec Visual Studio Code, qui a une intégration complète avec WSL.) Par conséquent, vous avez quelques options pour modifier les fichiers dans WSL:

  • Basculer vers Visual Studio Code
  • Utiliser un autre éditeur dans WSL
  • Installer Atom dans WSL

La dernière option, installer Atom dans WSL, fonctionne bien si vous allez travailler strictement dans WSL. Cependant, il vous faut installer un serveur X. (Nous recommandons la version gratuite de MobaXterm, car elle est entièrement intégrée à WSL.) Ensuite, vous devez suivre les instructions pour installer Atom sur Linux tout en travaillant à l'intérieur de WSL.

Après cela, vous pouvez lancer atom depuis le shell bash de WSL en tapant simplement:

atom .

Facultatif: intégration avec Git

Git est de loin le logiciel de contrôle de code source le plus utilisé au moment de la publication de cet article. Nous avons décidé d'utiliser git pour notre contrôle de code source, en conjonction avec le site Web GitHub, qui héberge du code stocké dans git. Vous n'êtes pas obligé d'utiliser git pour utiliser nos exemples; vous pouvez même télécharger les exemples sous forme de fichiers .zip à partir de nos pages de projet GitHub respectives et ne pas utiliser du tout git. Mais si vous choisissez d'utiliser git, vous pouvez facilement soumettre des suggestions d'amélioration de notre code.

Par défaut, Atom est installé avec plusieurs packages qui s'intègrent à Git. Un en particulier s'appelle language-git. Vous n'avez pas besoin d'installer d'outils supplémentaires pour travailler avec Git depuis Atom.

Pour ouvrir le package language-git, appuyez sur Ctrl + 9. Un volet sur la main droite ouvrira la liste de vos fichiers avec des indicateurs des fichiers modifiés et de ce qui a été mis en scène. Lorsque vous cliquez sur un fichier, un "diff" du fichier apparaîtra sur le côté gauche comme indiqué ici:

Lorsque vous cliquez sur un fichier, un

Dans cet exemple, le fichier app.js dans le volet droit est entouré d'un cercle jaune, ce qui signifie qu'il a été modifié mais qu'il se trouve dans la zone non mise en scène. Le fichier package.json a également été modifié, et a donc un cercle jaune, mais a été ajouté à la zone de préparation. (Notez que de nombreux développeurs qui utilisent git en ligne de commande ignorent la zone de préparation et valident leurs fichiers directement, et en tant que tels verront rarement les fichiers dans la zone de préparation.)

Vous pouvez déplacer des fichiers vers la zone de préparation en cliquant avec le bouton droit sur un fichier dans la liste non mise en scène et en choisissant «étape» dans le menu contextuel. Vous pouvez les retirer de la zone de préparation en cliquant avec le bouton droit de la souris sur le fichier dans la zone de préparation et dans la fenêtre contextuelle en choisissant «désinstaller».

Ensuite, lorsque vous êtes prêt à valider les fichiers intermédiaires, remplissez la zone de message avec votre message de validation, puis cliquez sur Commit to master.

Il existe de nombreuses autres tâches git que vous pouvez effectuer dans l'éditeur. Notez, cependant, que nous ne recommandons généralement pas d'utiliser uniquement git depuis Atom. Notre raisonnement est que la plupart des équipes de développeurs utilisent généralement toujours la version en ligne de commande de git, et de nombreuses tâches sont, très franchement, un peu plus intuitives à utiliser en ligne de commande plutôt qu'à l'intérieur d'Atom. Par conséquent, nous adoptons une approche à deux volets de git:

  • Lorsque vous modifiez du code qui se trouve dans un dépôt git, notez les cercles jaunes qui apparaissent à côté de vos fichiers dans la fenêtre git lorsque vous ajoutez et modifiez des fichiers.
  • Lorsque vous avez besoin d'effectuer un travail git (par exemple, créer des branches, ajouter et valider des fichiers), nous vous recommandons d'utiliser la ligne de commande.

Nos futurs projets ici à ProgrammableWeb aura des dépôts librement disponibles sur Github. (Et nous accueillons les demandes d'extraction avec des modifications suggérées; nous en faisons un projet mené par la communauté.)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *