Top Plugins angulaires pour le texte sublime –

Cet article couvre un certain nombre de plugins Angular pour l'éditeur de texte Sublime Text.

Que vous soyez débutant dans le développement Angular (version 2+), et que vous souhaitiez commencer et l'intégrer plus étroitement avec votre code éditeur de choix, ou vous êtes un adepte du développement angulaire et vous essayez votre main avec Sublime Text en tant que nouvel éditeur, l'intégration des deux n'a jamais été aussi facile.

Il y a beaucoup d'options pour les plugins Angular qui peuvent lisse votre chemin en développant des applications angulaires en utilisant Sublime Text. Vous aurez besoin de configurer le gestionnaire de paquets Sublime Text (appelé "Package Control") avant de commencer, et ensuite vous pouvez jeter un coup d'oeil à la liste des plugins ici et voir si vous répondez à vos besoins!

Contrôle de paquet

Afin d'utiliser la plupart des plugins Angular dont il sera question dans cet article, vous devez d'abord configurer le contrôle de paquet dans Sublime Text. C'est un processus assez indolore. La méthode la plus simple consiste à copier-coller un code de configuration.

1. Utilisez le raccourci clavier CTRL + ` ou utilisez le menu Affichage> Afficher la console pour afficher le console intégrée Sublime Text.
2. Collez le bloc de code Python dans la console, qui peut être copié à partir de la page Installation du contrôle du paquet et suivez les instructions.
3. Une fois cela fait, le paquet Les menus de contrôle seront configurés! Maintenant, tout ce que vous avez à faire est de trouver et d'installer vos paquets.

Utiliser le contrôle des paquets est un jeu d'enfant. Vous devrez ouvrir Package Control, sélectionnez le menu install puis choisissez et installez un package:

1. Utilisez le raccourci CMD + Shift + P ( CTRL + Maj + P selon le système d'exploitation) pour ouvrir la palette de commandes.
2. Type install paquet puis appuyez sur Entrez ce qui vous amène à la liste des paquets disponibles
3. Recherchez le paquet par nom, sélectionnez le paquet, puis appuyez sur Entrez pour installer

Angular 2 HTML Package

Le plugin Angular 2 HTML fournit une syntaxe HTML augmentée pour Sublime Text. Vous pourrez utiliser les attributs angulaires sans que la coloration syntaxique soit altérée. En outre, les parties JavaScript de vos pages seront également mises en évidence en tant que JavaScript. Un ajout petit mais incroyablement utile pour les développeurs Angular

Configuration du paquetage Angular 2 HTML

Au moment d'écrire ces lignes, ce plugin n'était pas présent dans Package Control, mais peut être installé manuellement par les étapes suivantes.

Fermez Sublime Text et naviguez via la ligne de commande vers votre dossier Sublime Text 3 "Packages" dans l'installation de votre application. Dans macOS, c'est / Users / {user} / Bibliothèque / Application Support / Sublime Text 3 / Packages .

 git clone https://github.com/princemaple/ngx-html-syntax
 

De plus, vous pouvez faire surligner automatiquement Sublime Text .component Fichiers .html avec Angular 2 HTML Syntaxe:

1. Ouvrez un fichier .component.html .

2. Choisir Afficher> Syntaxe> Ngx HTML .

3. Accédez à Préférences> Paramètres> Syntaxe spécifique . Parce que votre fichier actuel utilise la syntaxe HTML Ngx, il devrait ouvrir le fichier de paramètres spécifiques à la syntaxe pour Ngx HTML. Si c'est le cas, ajoutez une entrée d'extensions dans le panneau des paramètres sur la droite:

    "extensions":
   [
     "component.html"
   ]
    

4. Redémarrez le texte sublime. Maintenant, tous les fichiers .component.html devraient utiliser automatiquement le plugin Ngx Syntax!

Angular 2 Snippets

Angular 2 Snippets est un plugin Sublime Text qui vise à fournir aux utilisateurs avec des extraits et l'achèvement du code pour Angular. Il apporte avec lui la plupart des fonctionnalités d'auto-complétion dont vous auriez besoin pour votre développement angulaire. L'auto-complétion du code est un peu un problème avec de nombreux développeurs, qui pensent que c'est une malédiction autant qu'une bénédiction, mais néanmoins, cela peut être extrêmement utile.

Au moment de la rédaction, les extraits suivants et les catégories d'achèvement étaient disponibles. (Pour une liste à jour, ou pour plus de détails sur les éléments de chaque catégorie, voir le plugin GitHub README .)

Angular Plugins: Catégories de Snippet

• Composant
• Directive
• Service
• Pipe
• RouteConfig
• Itinéraire
• Test

Plugins angulaires: Catégories complétion

• Annotations
• Décorateurs
• Cycle de vie
• Routage
• Directives
• Attributs [19659007] Pipes

Angulaire CLI

Le plugin Angular CLI est fantastique pour tous les développeurs angulaires, permettant aux commandes CLI angulaires d'être exécutées depuis Sublime Text. Une fois installé, les commandes CLI Angular peuvent être trouvées depuis la palette de commandes. L'interface CLI Angular peut être utilisée à diverses fins:

• pour générer des composants, classes, routes, etc.
• pour tester
• pour linturer
• pour démarrer un serveur de développement

… et bien plus

Plugins angulaires: Typescript

TypeScript fournit un calque typé sur JavaScript standard, et est la langue préférée pour de nombreux projets angulaires. Il compile à JavaScript valide, donc la vraie valeur est pour le développeur. Le package TypeScript pour Sublime Text offre une expérience améliorée pour les utilisateurs de TypeScript dans l'éditeur

• Formatage TypeScript pour une ligne, une sélection de code ou un document entier en appuyant sur un raccourci.
• Navigation rapide vers un symbole ou morceau de texte, visualisation facile des erreurs TypeScript.
• La ​​gestion de projet est un jeu d'enfant avec le plugin. Il permet la création de nouveaux projets TypeScript configurés. Il créera aussi automatiquement des "projets inférés" lors de l'édition d'un seul fichier TypeScript, en tirant des fichiers importés pour les rendre disponibles.

Angular Plugins: Linting

Qui n'a pas besoin de liste de code? Lorsque vous travaillez avec Angular et TypeScript, vous voulez que votre éditeur modifie votre code. SublimeLinter-contrib-tslint est un paquet Sublime qui s'interface entre le logiciel tslint et Sublime Text. Pour l'utiliser, vous aurez besoin de deux choses déjà installées:

1. Installer tslint ( npm install -g tslint ).
2. Installer le plugin SublimeLinter 3 via Package Contrôle.
3. Utilisez la SublimeLinter Documentation . (Suivez les étapes "Trouver un exécutable linter" via "Valider votre chemin" pour vous assurer que SublimeLinter puisse voir votre paquet tslint.)
4. Enfin, installez le Sublime Plugin SublimeLinter-contrib-tslint via Package Control

Vous êtes tous ensemble. Maintenant vous avez juste besoin de configurer votre linter. Vous pouvez utiliser les docs tslint pour avoir un aperçu des options de configuration de tslint (que vous voudrez inclure dans un fichier tslint.json dans votre projet). Voir aussi la documentation de SublimeLinter sur la configuration de paramètres spécifiques à un linter

DocBlockr

DocBlockr est un paquet pour Sublime Text qui supporte JavaScript et une variété de saveurs. , y compris TypeScript. Bien que DocBlockr ne soit pas unique à TypeScript ou à Angular, il est certainement utilisable là-bas et offre un service qui ne devrait pas être négligé. DocBlockr est un plugin qui aide les développeurs à écrire des docblocks. Il complète automatiquement la syntaxe pour docblocks afin d'économiser votre temps précieux, et va même jusqu'à généraliser la fonction et les modèles docblock variable ainsi. C'est un moyen fantastique à la fois de gagner du temps et de s'assurer que votre code est documenté de manière uniforme.

Conclusion

J'espère que cet ensemble de plugins vous fournira au moins quelques-uns des plugins angulaires dont vous avez besoin efforts de développement dans Sublime un succès. Avez-vous utilisé l'un des éléments ci-dessus, ou avez-vous des commentaires sur les plugins qui n'ont pas été mentionnés? Tweet @sitepointjs et faites-le nous savoir!

Jeff travaille pour une start-up en tant que rédacteur technique, écrit des contrats et développe des sites web et adore bricoler de nouveaux projets et idées.

En plus d'avoir été collé à un ordinateur pendant une bonne partie de sa journée, Jeff est aussi un mari, un père, un technicien, un intello et un joueur.