Comment installer des plugins sur Sublime Text 3. Les meilleurs plugins pour Sublime Text. Affiner l'éditeur, prédéfinir mes paramètres

Aujourd'hui, j'ai décidé de passer du vieux sublime au Texte sublime 3. Dans cet article, je souhaite enregistrer une liste des plugins que j'utilise et en même temps vous en parler un peu. Par exemple, à propos de ceux qui mettent en valeur les valeurs de couleur :)

Pour installation pratique les plugins doivent être installés avec Package Control. Pour cela, ouvrez la console sous l'éditeur (Ctrl + `) et saisissez la commande suivante :

Importer urllib.request,os,hashlib ; h = "eb2297e1a458f27d836c04bb0cbaf282" + "d0e7a3098092775ccb37ca9d6b2e4b7d" ; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Erreur lors de la validation du téléchargement (obtenu %s au lieu de %s), veuillez essayer l'installation manuelle" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb" ).écrire(par)

Ensuite, nous redémarrons l'éditeur. Je veux noter que nouvelle version démarre encore plus vite que l'ancien. Maintenant, pour installer les plugins, appuyez sur Ctrl + Shift + P et sélectionnez Package Control: Install Package. Là, nous sélectionnons le plugin et appuyons sur Entrée.

Plugins

Emmet

Je pense qu'il n'est pas nécessaire de le présenter. Ceci est un plugin pour rapide taper du HTML et du code CSS.

Histoire locale

Un plugin pratique pour afficher l'historique des modifications de fichiers.

Aide à l'encodage

Affiche l'encodage du fichier dans la ligne d'état et vous permet également d'ouvrir et d'enregistrer des fichiers dans différents encodages.

SublimeCodeIntel

Saisie semi-automatique intelligente, il est possible d'accéder aux définitions lorsque aide Alt+ Cliquez.

SublimeREPL

Interprète diverses langues. Par exemple Python, NodeJS et autres

DocBlockr

Insertion pratique de JSDocs, analyse les paramètres de fonction. Tapez /** avant la fonction et appuyez sur Tab.

Noms de fichiers à saisie semi-automatique très sympas. Peut être utilisé dans n’importe quel attribut, n’importe quelle balise. Pour les images, il indique également la largeur et la hauteur de l'image.

ColorSurligneur + GutterColor

Mise en évidence des valeurs de couleur en CSS. Color Highliter met l’accent sur la signification des couleurs elles-mêmes. Et grâce à GutterColor, des cercles colorés apparaissent sur la gauche (nécessite l'installation d'ImageMagick).
Sélecteur de couleurs - fonctionne par raccourci clavier Ctrl + Maj + C.

Tâches simples

Suivi des tâches. Une simple feuille de tâches avec beau design. Tout est enregistré au format texte.

Édition Markdown

Édition pratique des fichiers markdown, par exemple pour Github.

Améliorations de la barre latérale

Barre latérale améliorée.

AppliquerSyntaxe

Détecteur automatique de type de fichier.

SublimeGit

Intégration GIT complète

Barre latéraleGit

Menu contextuel GIT dans la barre latérale de l'éditeur. Convient à ceux qui n'aiment pas beaucoup la ligne de commande.

GitGutter

Diffs pour guitare. Affiche les changements depuis le dernier commit sur la gauche.

HTML-CSS-JS Joli

Formatage des codes. node.js requis. Raccourci clavier Ctrl + Maj + H.

Valeur Inc-Déc.

Augmentations/diminutions valeurs numériques par Alt + flèche haut/bas. Comme dans les outils de développement Firebug ou Chrome.

FacileMotion

Parcourez rapidement le texte. Pour les fans du Mode Vintage et pas seulement pour eux, c'est recommandé.

AvancéNouveauFichier

Création rapide de fichiers. Ctrl + Alt + N. Si vous utilisez Evernote, il s'ouvrira nouvelle entrée dans Evernote - n'oubliez pas de modifier les raccourcis clavier.

K

Bonjour à tous ! J'ai essayé de rassembler les meilleurs plugins Sublime Text qui peuvent réellement améliorer votre flux de travail. J'ai cherché sur de nombreux sites et voici ce que j'ai fait.

Inspecteur Web

Un outil de débogage incroyable avec un inspecteur de code complet pour Sublime. Fonctionnalités : Points d'arrêt pour la mise en œuvre d'un projet enregistré dans paramètres utilisateur Avec chemins absolus, Console, Débogueur et Stop, Stack Trace. Tout cela fonctionne à merveille ! Et puis il y a Fireplay. de Mozilla, qui vous permet de vous connecter à Outils Firefox développeur et débagger le plus simple JSHint.

Fourmi

L'un des plugins les plus populaires pour les éditeurs. Emmett, ancien Zen Coding est aussi l'un des plus méthodes efficaces augmenter la productivité des développeurs Web. Après avoir appuyé sur la touche Tab, Emmett convertit les raccourcis simples en extraits de code pour HTML et CSS. De plus, je tiens à souligner que Hayaku est une collection de raccourcis pratiques pour tableaux en cascade styles.

Git

L'essence de ce plugin ressort clairement de son nom : la possibilité de travailler avec Git directement dans votre éditeur préféré. Cette façon de travailler avec Git vous fera gagner beaucoup de temps. Premièrement : vous n'avez pas besoin de basculer constamment entre Sublime et Terminal. Deuxièmement : il existe une bonne balise de saisie semi-automatique, et au lieu de git add-A, puis écrivez simplement add . Troisièmement : il existe des choses telles que la validation rapide, dans laquelle une commande rapide ajoute toutes les modifications et les valide.

Si tout ce dont vous avez besoin avec Git est la possibilité de récupérer du contenu à partir de référentiels distants, alors je recommande Nettuts + Fetch.

La saisie semi-automatique classique dans Sublime Text ne fonctionne qu'avec fichier actuel.AllAutocomplete recherche dans tout ouvrir des fichiers V fenêtre actuelle, ce qui simplifie grandement le processus de développement. Il existe également CodeIntel, qui incarne les fonctionnalités d'un IDE et apporte du « Code Intelligence » pour un certain nombre de langages : JavaScript, Mason, XBL, XUL, RHTML, SCS, Python, HTML, Ruby, python3, XML SASS, XSLT, Django, HTML5, Perl, CSS, Twig, less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Peut-être l'un des plugins les plus utiles pour les développeurs. SublimeREPL directement dans l'éditeur lance un interpréteur pour toute la série de langages : Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell.

DocBlockr sera pour vous outil efficace pour documenter le code. Après avoir entré /** et appuyé sur la touche Tab, le plugin analysera automatiquement toute fonction et préparera le modèle correspondant.

Extension géniale pour SublimeText, Vim, Emacs, IDÉE IntelliJ, qui permet aux développeurs de collaborer sur le code et depuis différents éditeurs.

Le chemin de saisie semi-automatique vers les fichiers est très pratique. Sans plus attendre.


Habituellement, quand nous devons palette de couleurs nous sommes habitués à utiliser Photoshop ou Gimp. Mais la sélection complète des couleurs est accessible directement dans l'éditeur - Ctrl/Cmd + Shift + C Et c'est génial. GutterColor et ColorHighlighter, qui facilitent la navigation dans les codes couleurs :

Met en évidence toutes les variables, ce qui simplifie grandement l'orientation dans le code. Particulièrement utile pour les développeurs dyslexiques.

Brillante feuille TODO ! Toutes les tâches sont stockées dans des fichiers, il est donc très pratique d'associer des tâches au projet correspondant. Possibilité de créer des projets, d'attribuer des balises, de fixer des dates. Compétent interface utilisateur et des raccourcis.

Peut être, meilleur plugin pour travailler avec Markdown : coloration syntaxique, abréviations, auto, jeux de couleurs etc. Comme solution alternative vous pouvez essayer MarkdownPreview.

À la fin

  • Sublime SFTP
  • CTags - Prise en charge des CTags pour FO Sublime.
  • SideBarEnhancement - plusieurs fonctionnalités supplémentaires menu contextuel dans la barre latérale.
  • ActualVim - Vim in Sublime - deux éditeurs préférés en un.
  • SublimeLinter - Intégration d'une belle mise en évidence pour C/C++, Java, Python, PHP, JS, HTML, CSS, etc.
  • CSScomb- Style CSS codage de formatage.
  • FixMyJS, Jsfmt et JsFormat - Formateurs de style de codage JS/JSON.
  • AStyleFormatter - Formatage du style de codage C/C++/C#/Java.
  • Fragments SVG - un ensemble de fragments SVG personnalisés.
  • Inc-Dec-Value - augmenter/diminuer le nombre, la date, la couleur valeurs hexadécimales, etc.

Le bon ensemble de plugins peut améliorer les performances de n’importe quelle application. Si vous êtes un développeur Web travaillant avec Sublime Text 3 Package Ccontrol, nous vous recommandons fortement de lire attentivement les plugins évoqués dans cet article :

  • Contrôle des paquets ;
  • HTMLPretify ;
  • Emmet ;
  • Surligneur de support ;
  • jQuery ;
  • Conversion de cas.

Contrôle des paquets

Ce plugin facilite la recherche, l'installation et la mise à jour d'autres packages. Il doit d'abord être installé. Cela facilitera le travail avec tous les autres plugins.

Comment installer

  1. Suivez le lien https://packagecontrol.io/installation et copiez la commande, qui ressemblera à ceci :
  1. Appuyez sur Ctrl - backtick (; `) pour ouvrir la console Sublime Text :


  1. Collez la commande et appuyez sur Entrée.
  1. Après avoir exécuté la commande, vous verrez un petit avertissement contextuel :


  1. Cliquez sur "OK".
  2. Fermez et redémarrez Sublime Text.
  3. Entrez la commande Package Control pour voir toutes les commandes :


Nous utiliserons Package Control Sublime Text pour les plugins restants.

HTMLPretifier

Prend du temps Chaînes HTML, CSS , JavaScript et JSON et les formate afin que vous puissiez les lire au lieu d'essayer de donner un sens à un tas de saisies.

Comment installer

  1. Appuyez sur Ctrl-Shift-P sous Windows pour ouvrir le "Panneau de commande".
  2. Entrez la commande Package Control pour voir toutes les commandes. Sélectionner Contrôle du package : installer le package. Un menu des plugins disponibles apparaîtra à l'écran :


  1. Entrez HTMLPrettify :


  1. Cliquez sur HTML-CSS-JS Prettify. Ce nom est légèrement différent, mais c'est le même plugin.

Emmet

Ce plugin s’appelait autrefois Zen Coding. Il vous permet d'écrire des shortcodes HTML et CSS. Par exemple, en tapant ce qui suit :

#page>div.logo+ul#navigation>li*5>a(Article $)

Et en appuyant sur la touche de tabulation, vous obtiendrez :

Après avoir installé Emmet à l'aide de Sublime Text Package Control, redémarrez Sublime Text.

Pour qu'Emmet fonctionne, vous devez définir la syntaxe du document. Sinon ça ne marchera pas :


Maintenant, vérifiez. Entrez ce qui suit :

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon(Item $)+a(Item $)

Et appuyez sur la tabulation. Vous recevrez :

Il faudra beaucoup de temps pour apprendre toutes les abréviations disponibles. Cela vous permettra d'écrire du code HTML beaucoup plus rapidement.

SupportSurligneur

Le plugin met en évidence les crochets et les balises. Après l'installation à l'aide Installation du contrôle du package Sublime Text Vous pouvez cliquer n'importe où dans le code JavaScript ou HTML et voir les parenthèses ouvrantes et fermantes dans la colonne de gauche :


JQuery

Le plugin jQuery met en évidence la syntaxe correcte de la méthode jQuery et fournit des extraits de code pour la compléter :


Conversion de cas

Vous permet de basculer entre Snake_case , camelCase , PascalCase , etc. Après avoir installé le plugin à l'aide de Package Control (tapez " photo" pour accès rapide pour installer le package), essayer:

Avant : navMenu

Appuyez sur : ;c, puis ;;c

Après : nav_menu

Notez que cela ne fonctionnera pas correctement si vous essayez de convertir une chaîne entière.

À:

Des questions ?

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :