comment activer le serveur en direct atom


Réponse 1:

Packages à usage général pour Atom:

  • Atom-like-brackets-editor - voyez où vos accolades «{}», parens «()» commencent et se terminent en ayant simplement votre curseur les toucher.
  • atom-beautify - embellissez HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, TypeScript et SQL dans Atom
  • atom-live-server - lance un serveur http avec une capacité de chargement du foie.
  • browser-plus - vous permet de lancer un navigateur Web dans Atom dans un nouvel onglet
  • clipboard-autocomplete - Obtenez facilement le texte de votre presse-papiers en utilisant 'cp' dans votre edito!
  • file-icons - attribue des icônes d'extension de fichier et des couleurs aux fichiers pour une amélioration visuelle améliorée
  • filesize - affiche la taille actuelle du fichier sur la barre d'état
  • file-watcher - Un observateur de fichier ouvert pour Atom qui vous demandera lorsque le fichier sur le disque a changé.
  • git-clone - rapidement git cloner un dépôt et ouvrir dans une nouvelle fenêtre atom
  • git-plus - vous permet de faire des actions git sans aller au terminal
  • git-time-machine - interagit visuellement avec l'historique de validation git pour un fichier
  • highlight-line - met en évidence la ligne actuelle dans l'éditeur
  • surligné - lorsque vous double-cliquez sur un mot, il met en évidence d'autres occurrences de ce mot dans un fichier. (ce paquet avec minimap-highlight-selected est génial)
  • jumpy - crée des raccourcis clavier dynamiques pour parcourir les fichiers à travers les volets visibles.
  • linter - un linter de base pour Atom. Vous installez d'autres packages linter en plus de cela. Recherchez d'autres packages de linter précédés du mot «linter». Ex: linter-jshint, linter-csslint, linter-jsonlint, linter-ruby, linter-pylint
  • local-history - M'A SAUVÉ TELLEMENT DE FOIS QUAND GIT DIDNT! conserve l'historique de vos modifications apportées aux fichiers de code. Pensez à l'historique des révisions de Google Doc. Vraiment puissant lorsque vous avez oublié de valider quelque chose ou d'utiliser Git.
  • maybs-quit - confirmation modale avant de quitter pour éviter la fermeture accidentelle de l'éditeur avec les touches [CMD-Q].
  • merge-conflits - vous permet de résoudre les conflits git dans Atom
  • minimap - Un aperçu du code source complet (comme Sublime Text). REMARQUE: les autres packages de mini-cartes ci-dessous reposent sur l'installation d'une mini-carte. Ces packages utilisés ensemble constituent une expérience d'édition puissante à mon avis.
  • minimap-cursorline - Affiche la ligne de curseur Atom dans la mini-carte
  • minimap-find-and-replace - affiche les résultats du package find & replace dans la mini-carte
  • minimap-highlight-selected - affiche votre sélection dans la minicarte. ⚠ un package sélectionné en surbrillance est requis.
  • mini-carte-sélection - met en évidence les occurrences du mot actuellement sélectionné dans la mini-carte. C'est un moyen génial de voir combien d'occurrences il y a et où elles résident dans le fichier!
  • minimap-git-diff - affiche les changements de git dans la mini-carte (vert = addition, jaune = changement, rouge = suppression). Idéal pour consulter rapidement les sections que vous avez modifiées dans de gros fichiers!
  • open-in-browser - ajoute "Ouvrir dans le navigateur" à la palette de commandes et au menu de clic d'options
  • open-terminal-here - ajoute "Open Terminal Here" à la palette de commandes et au menu de clic d'options
  • package-manager-commands - désactiver / activer les packages à partir de la palette de commandes (comme Sublime Text).
  • package-settings - ouvre rapidement le volet des paramètres pour un package spécifique (comme Sublime Text)
  • pane-layout-plus - permet de créer plusieurs volets dans l'éditeur (comme du texte sublime)
  • script - vous permet d'exécuter divers fichiers de script à l'intérieur d'Atom. Prend en charge les scripts JavaScript, CoffeeScript, Ruby, Python, Go, Bash et PowerShell. Vous pouvez en ajouter plus!
  • set-syntax - crée des commandes simples de la palette de commandes pour définir la syntaxe du fichier courant (commande de syntaxe définie identique à partir de sublime)
  • swackets - permet de savoir plus facilement à quel point vous êtes imbriqué dans les fonctions, les instructions conditionnelles
  • sync-settings - synchronise les paramètres du package, le keymap et les packages installés
  • tree-view-autoresize - Redimensionne automatiquement l'arborescence lors de l'ouverture / fermeture de dossiers
  • tree-view-git-status - regardez rapidement l'état de votre référentiel Git dans l'arborescence Atom.
  • platformio-ide-terminal- vous permet de lancer plusieurs sessions de terminal depuis l'éditeur Atom (prend en charge d'autres shells tels que zsh etc.)
  • rest-client - un client REST simple pour votre éditeur préféré (pensez à Postman, mais dans votre éditeur)
  • wakatime - Fitbit pour les programmeurs. Obtenez des métriques et des informations automatisées sur votre programmation.

Paquets liés au frontend / Web pour Atom:

  • atom-json-color - couleur JSON avec une couleur par niveau
  • auto-id-class
  • autoclose-html - automatise la fermeture des balises HTML
  • autoprefixer - autoprefixer vos fichiers CSS et SCSS
  • color-picker - fait apparaître un sélecteur de couleurs interactif depuis Atom
  • css-clean - trie et aligne magnifiquement CSS et SASS
  • spécificité css - montre la spécificité des sélecteurs dans un fichier CSS dans Atom
  • docblockr - rend l'écriture de commentaires de code javascript un jeu d'enfant!
  • emmet - fournit des raccourcis pour créer des éléments, ajouter des attributs et des valeurs et plus encore lorsque vous travaillez avec des fichiers HTML et CSS
  • livestyle-atom - outil d'édition bidirectionnel en temps réel pour CSS, LESS et SCSS
  • pigments - affiche les couleurs dans le projet et les fichiers.
  • es6-javascript - extraits de code javascript pour la productivité du développement

Est-ce que tous ces packages ralentissent votre éditeur?

  • Non, je n'ai pas ressenti de ralentissement. Les personnes avec des disques durs rotatifs (HDD) et moins de RAM pourraient le faire, mais si vous avez plus de 4 Go de RAM et un disque dur à semi-conducteurs (SSD), vos vitesses devraient être rapides.
  • Pourquoi utilisez-vous autant de packages?

    • Atom est un éditeur barebones, il appartient à l'utilisateur d'ajouter des fonctionnalités supplémentaires en installant des packages
    • J'utilise en fait tous ces packages. Beaucoup de ces packages apportent des fonctionnalités d'autres éditeurs dans Atom comme Sublime, VScode, etc.
    • Mon éditeur de texte est comme ma voiture, je l'aime bien équipé et prêt à rouler.

    Démo:

    • Vous pouvez voir la plupart des packages d'éditeur Atom que j'ai mentionnés ci-dessus dans la vidéo YouTube que j'ai réalisée: Atom Editor - Présentation et résumé des meilleurs packages
    • Article de blog répertoriant les packages utilisés:

      Éditeur Atom: aperçu et résumé des packages

Réponse 2:

atom-minimap:

sélectionné en surbrillance:

sélection de la minicarte surlignée:

colonne de surbrillance:

Gestionnaire de projet:

atom-embellir:

icônes de fichiers:

pipette à couleurs:

Astuce: certains plugins peuvent vraiment ralentir atom. Si vous sentez que Atom est lent, jetez un œil à Packages-> Timecop pour voir si le plugin ralentit Atom.