Share
Un éditeur de code est la base de la carrière de tout développeur Web. C'est l'un des aspects de la chaîne d'outils d'un codeur qui est chéri, mais également choisi avec une passion et une détermination extrêmes. Ce ne sera pas un article sur quel éditeur de code est le plus populaire, ni sur ce qui le rend meilleur qu'un autre; le but de cet article sera pour ceux qui ont choisi Atom comme éditeur de code et montrent comment le rendre génial pour le travail quotidien.
Emmet LiveStyle est le premier outil d'édition bidirectionnel en temps réel pour les fichiers CSS, LESS et SCSS.
Le package Atom est disponible ici et ne nécessite aucune configuration particulière: démarrez simplement Atom et Google Chrome et vous êtes prêt pour l'édition en temps réel..
«LiveStyle utilise ses propres implémentations des préprocesseurs LESS et SCSS, écrites en JavaScript pur. Contrairement aux implémentations officielles des préprocesseurs avec des cartes mères, LiveStyle fournit les mappages appropriés source-résultat, les étendues de variable et de mixage, la récupération des erreurs et la compilation partielle. ”
Une de mes fonctionnalités préférées est la «vue à distance» et crée une URL accessible au public pointant vers votre site local. Utilisez cette URL pour prévisualiser sur tout appareil ou navigateur connecté à Internet avec des mises à jour instantanées en temps réel d'Atom et de DevTools..
Pour maîtriser ce package, je suggère fortement de parcourir la documentation et le guide de démarrage pour vous assurer qu'il répond aux besoins de votre contexte spécifique et, bien sûr, que vous vous sentez à l'aise avant de l'utiliser..
Avez-vous déjà voulu utiliser un sélecteur de couleur pendant le codage? N'ayez crainte, Color Picker a le dos. Color Picker lit actuellement les couleurs HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 et VEC4 et peut convertir les formats entre eux..
Ce petit diable inspecte également les variables de couleur Sass et LESS comme un super limier. Ouvrez simplement le sélecteur de couleur avec votre curseur sur la variable de votre choix et il recherchera la définition pour vous. Vous pouvez cliquer sur la définition fournie et aller directement à l'endroit où elle est définie.
Si le choix des couleurs n’est pas votre tasse de thé, essayez peut-être Pigments. Pigments est un package permettant d'afficher les couleurs dans les fichiers de projet. Les pigments vont scanner les fichiers sources dans les répertoires de votre projet à la recherche de couleurs et créer une palette avec tous (assez lisse).
Avec le mouvement de plus en plus demandé dans notre travail, il est agréable d'avoir des outils qui aident dans le processus.
L'éditeur de courbes de Bézier est un changeur de jeu pour les développeurs de mouvements et interactifs à la recherche du combo d'accélération parfait. Choisissez entre une multitude d'options d'accélération affichant leur résultat en direct ou créez les vôtres en faisant glisser les poignées du visualiseur d'accélération..
Souhaitez-vous masquer les fichiers de votre projet qui n'ont pas besoin d'être enregistrés dans votre référentiel ou affichés pendant que vous travaillez? En atome Paquets onglet, recherchez "arborescence" et sous ses paramètres, cochez la case Masquer les noms ignorés supprimer les fichiers globalement ignorés de votre vue arborescente ou les combiner avec Masquer les fichiers ignorés par VCS. Ces fichiers VCS particuliers sont ceux contrôlés par votre .gitignore. Les fichiers globalement ignorés sont ceux tels que .DS_Store, par exemple.
Lorsque des améliorations peuvent être apportées à votre navigation visuelle, je vous suggère de le faire, et c’est pourquoi j’aime les icônes de fichiers..
Ce paquet donne à vos fichiers une jolie petite icône avec de la couleur pour vous aider à trouver votre chemin, et donne en général un aspect délicieux. Il vous donne même la possibilité de personnaliser la taille, les nuances de couleurs, d’échanger des icônes et d’affecter des icônes par extension de fichier..
N'aimez-vous pas sauter entre la ligne de commande et votre éditeur pour effectuer des commits? Ce paquet GitHub est maintenant fourni avec toutes les versions d'Atom 1.18 et ultérieur.
Profitez de la possibilité de créer des branches, d'organiser, de valider, de pousser, d'extraire, de résoudre des conflits et même d'afficher les demandes d'extraction de GitHub directement depuis Atom. Pour ouvrir cette fenêtre, placez votre curseur au point mort de votre éditeur sur le côté droit et recherchez un onglet avec une flèche. Boom!
Je suis un grand fan de celui-ci, car il est très facile de regarder les différences de fichiers. Dans Atom, vous avez accès à votre historique d'un projet Git suivi. en plus tout est visuel.
Git Time Machine permet de regarder à nouveau les différences de fichiers de façon amusante et moins désordonnée que d'essayer d'inspecter via la ligne de commande. Il affiche un tracé visuel des commits dans le fichier actuel sur une période donnée et vous pouvez cliquer sur la timeline ou survoler une marque pour voir tous les commits d'une période donnée. Vous avez la possibilité de restaurer des fichiers complets ou de sélectionner une ligne à la fois. C'est un package vraiment fantastique à inclure dans votre flux de travail Atom.
La recherche d'assistance par navigateur n'a jamais été aussi simple et efficace depuis Atom grâce au package Puis-je utiliser.
Tapez "puis-je utiliser" dans votre palette de commandes (Cmd + Shift + P) Et commencez à taper la propriété ou le terme de recherche dont vous avez besoin pour vous aider dans votre projet. Un moyen très efficace d'utiliser ce service ou d'utiliser un navigateur Web.
Les packages ne sont pas la seule option possible pour rendre Atom plus magique que son installation par défaut. De nombreuses autres options peuvent être trouvées directement dans les paramètres de base pour faire de l'écriture de code une expérience agréable..
Sous Atome Réglages voir, vous pouvez spécifier vos préférences d'emballage.
le Enveloppe souple Cette option permet d’envelopper les lignes trop longues pour tenir dans votre fenêtre actuelle. Si cette option est désactivée, les lignes disparaîtront du côté de votre écran et vous devrez faire défiler la fenêtre horizontalement pour afficher le reste de votre contenu..
L'option «Rechercher et remplacer» a toujours existé dans les éditeurs de code et pour de bonnes raisons. Pour rechercher dans votre fichier actuel, vous pouvez appuyer sur cmd + f, puis tapez votre chaîne de recherche et appuyez sur entrer (ou cmd + g ou la Trouver suivant bouton) plusieurs fois pour parcourir toutes les correspondances de ce fichier.
le Trouver et remplacer Le panneau contient également des boutons permettant de basculer la sensibilité à la casse, d'effectuer une correspondance d'expression régulière et de cibler la recherche sur les sélections. Vous pouvez également rechercher et remplacer tout au long de votre projet si vous appelez le panneau avec cmd + chift + f.
Atom a le commandement atome --portable qui fournit une option de paramètre de ligne de commande pour la définition du mode Portable. J'ai personnellement eu une très mauvaise chance avec cette option et, franchement, les docs sur ce sujet ont encore grand besoin d'une réécriture..
«Le mode Portable est particulièrement utile pour emporter Atom avec tous vos paramètres et packages personnalisés, d’une machine à l’autre. Cela peut consister à conserver Atom sur un lecteur USB ou une plate-forme de stockage dans le cloud qui synchronise les dossiers sur différentes machines, comme Dropbox. "
Ma suggestion est de créer un lien symbolique entre votre ~ / .atom répertoire vers Dropbox (ou un autre service, emplacement, etc.) et appelez-le un jour. C’est ce répertoire qui stocke tous vos paramètres, packages, configurations et tout ce qui rend Atom personnalisé pour votre utilisation. Vous pouvez toujours installer Atom à partir de n’importe quelle machine, comme vous le feriez normalement, sauf que vous utilisez .atome en tant que lien symbolique référencé vers un autre emplacement de votre choix.
Si le mode portable ou l'utilisation de l'astuce de lien symbolique ne vous tente pas, vous pourriez envisager de tenter votre chance avec les paramètres de synchronisation. Ce package Atom synchronisera les paramètres, les cartes clés, les styles utilisateur, le script d'initialisation, les extraits et les packages installés dans les instances Atom..
Si vous souhaitez appliquer une modification de style personnalisée sans créer un thème entier, vous pouvez ajouter vos styles personnalisés à la styles.less déposer dans votre ~ / .atom annuaire.
Pour ouvrir ce fichier dans l'éditeur Atom, sélectionnez Atome> Feuille de style. Le moyen le plus simple de voir quelles classes sont disponibles pour le style est d’inspecter manuellement le DOM avec les outils de développement via commande + option + i de la même manière que pour Chrome.
Je n'ai fait qu'effleurer la surface en ce qui concerne les paquets, les plugins, etc., mais si vous avez d'autres suggestions, commentaires ou réflexions, je vous encourage à laisser un commentaire ci-dessous ainsi que tout lien pertinent en rapport avec cette discussion. Si vous êtes un grand fan de listes que de passer à la caisse, ce dépôt sur GitHub appelé Awesome Atom; Une liste organisée de délicieux packages et ressources Atom. En tant qu'ancien utilisateur de Sublime, je suis entièrement satisfait de mon choix de migrer vers Atom. Ce sera mon éditeur de choix dans un avenir proche. Bonne codage!
Accentsconagua