Les meilleurs plugins pour Sublime Text. Plugins, leur installation et configuration pour Sublime Text

"D'accord, on dirait que j'ai un blog. Je ne suis pas encore allé aussi loin. Et après?"

Probablement, de nombreux blogueurs se sont posé cette question lorsqu'ils ont pensé à ce que serait leur premier article. Afin de ne pas laisser cette pensée vous remplir complètement la tête, passons aux choses sérieuses.

Sublime : enroulé

Pendant longtemps en développement, j'ai utilisé Webstorm de JetBrains. Il s'agit d'un IDE assez solide avec un grand nombre d'avantages : auto-complétion de code, un terminal multi-fenêtres intégré et un terminal séparé pour exécuter un serveur node.js, de nombreuses intégrations et plugins, des observateurs de fichiers et un tas d'autres des choses utiles. Cependant, ce n'était pas sans inconvénients, et le principal inconvénient pour moi était le manque de performances. Le lancement d'un grand projet a duré près d'une minute, une réindexation constante a entraîné des ralentissements notables - même après toutes sortes de danses avec un tambourin, augmentant la mémoire allouée et éteignant tout et tout.

En conséquence, j'ai décidé de jeter un œil à l'éditeur populaire Sublime Text 3 (ci-après dénommé ST3). Et j'ai beaucoup aimé - qui n'aime pas la découverte quasi instantanée d'un projet, surtout après tout ce qu'il a traversé ? En fin de compte, j'ai décidé de dire au revoir à mon cher, mais très lent Webstorm.

Et puis j'ai jeté un coup d'œil à la quantité et à la qualité des plug-ins ST3, et j'ai réalisé que je ne risquais pas d'avoir de regrets à ce sujet.

Alors, quels plugins puis-je trouver utiles pour un développeur js ?

Terminal
Ce qui me manque vraiment, c'est le terminal intégré dans Webstorm. Ce plugin soulage au moins un peu cette légère angoisse. Avec les paramètres par défaut, ctrl + shift + t ouvre un terminal.

git
Intégration Git. Probablement, vous ne pouvez pas du tout entrer dans le terminal, mais jusqu'à présent, je ne lui fais pas vraiment confiance. Il y a aussi SideBarGit , qui permet de commiter (et pas seulement) directement depuis menu contextuel barre latérale.
visuel

Icônes de l'interface utilisateur Seti pour le texte sublime
Ce qui m'a immédiatement manqué dans ST3 par rapport à Webstorm, ce sont les icônes de fichiers dans la barre latérale. Ils ont l'air bien, il faut moins de temps pour identifier le fichier. Ce n'est pas dans Package Control - vous devrez vous accroupir avec l'installation. Oh, et il n'y a pas encore d'icône pour les fichiers jsx.

Palette de couleurs Oceanic Next
jolie Thème sombre. Nraitsa.

SyncedSidebarBg
Remplace la couleur d'arrière-plan de la barre latérale par la couleur du thème actuel. Un rien, mais agréable, et ne fait pas mal aux yeux.

C'est tout, si je trouve des plugins intéressants et utiles, j'écrirai peut-être un article similaire. À bientôt!

Le bon ensemble de plugins peut améliorer l'efficacité de n'importe quelle application. Si vous êtes un développeur Web travaillant avec Contrôle du paquet Sublime Text 3, nous vous recommandons vivement de lire attentivement les plugins abordés dans cet article :

contrôle des colis ;
HTML embellir ;
Emmet ;
Surligneur de support ;
jQuery ;
conversion de cas.

contrôle des colis

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

Comment installer

Suivez ce lien https://packagecontrol.io/installation et copiez la commande, qui ressemblera à ceci :

Appuyez sur Ctrl - backtick (; `) pour ouvrir la Sublime Text Console :

Collez la commande et appuyez sur Entrée .

Après avoir exécuté la commande, vous verrez une petite fenêtre pop-up d'avertissement :

Cliquez sur OK.
Fermez et redémarrez Sublime Text.
Saisissez la commande Package Control pour afficher toutes les commandes :

Nous utiliserons le contrôle de package de Sublime Text pour le reste des plugins.

HTMLPrettifier

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 à une saisie continue.

Comment installer

Appuyez sur Ctrl-Maj-P dans Windows pour ouvrir la barre de commandes.
Entrez la commande Package Control pour afficher toutes les commandes. Sélectionner Contrôle du package : installer le package. Un menu des plugins disponibles apparaîtra à l'écran :

Entrez HTMLPrettify :

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 auparavant Zen Coding . Il vous permet d'écrire des codes HTML et CSS abrégés. Par exemple, en tapant ce qui suit :

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

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 :

Vérifiez maintenant. Entrez ce qui suit :

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

Et appuyez sur tab . Tu auras:

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 installation avec Installation de Sublime Text Package Control 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 des méthodes jQuery et fournit des extraits de code pour la compléter :

conversion de casse

Vous permet de basculer entre snake_case , camelCase , PascalCase , etc. Après avoir installé le plugin en utilisant le Package Control (tapez " photo » pour accès rapide pour installer le paquet), 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.

Avant:

Appuyez sur : ;;c, puis ;;c (pour affaire de chameau)

Après: navIDMenuSystemClassNavMenuIsOpen

Si vous êtes un développeur Web utilisant Contrôle du paquet Sublime Text 3, je vous conseille d'essayer les plugins listés dans cet article ! Si vous ne les aimez pas, vous pouvez toujours les supprimer avec Contrôle du package : Supprimer le package.

Traduction de l'article" Plugins Sublime Text 3 pour les développeurs Web» équipe de projet conviviale

Bonne journée à tous! j'ai essayé de collecter meilleurs plugins Sublime Text, qui améliore vraiment votre flux de travail. J'ai cherché sur de nombreux sites et voici ce que j'ai fait.

Inspecteur Web

Un outil incroyable pour le débogage est d'avoir un inspecteur de code complet pour Sublime. Fonctionnalités : points d'arrêt pour la mise en œuvre du projet, enregistrés dans les paramètres de l'utilisateur avec des chemins absolus, console, débogueur et points d'arrêt, traces de pile. Tout cela fonctionne avec un bang! Et puis il y a Fireplay. de Mozilla, qui vous permet de vous connecter aux outils de développement de Firefox et à un simple débagger JSHint.

Fourmi

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

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 le terminal. Deuxièmement : il y a une belle balise de saisie semi-automatique, et au lieu de git add-A, il suffit d'écrire add . Troisièmement : il y a des choses comme la validation rapide, où une commande rapide ajoute toutes les modifications et les valide.

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

La saisie semi-automatique classique dans Sublime Text ne fonctionne que sur le fichier en cours. Ouvrir des fichiers dans la fenêtre en cours, ce qui simplifie grandement le processus de développement. Il y a aussi CodeIntel qui incarne les fonctionnalités d'un IDE et apporte "Code Intelligence" à un certain nombre de langages : JavaScript, Mason, XBL, XUL, RHTML, SCS, Python, HTML, Ruby, python3, XML Sass, XSLT, Django, HTML5, Perl, CSS, Twig, moins, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

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

DocBlockr sera un outil efficace pour documenter votre code. Après avoir tapé /** 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 du code, et à partir de différents éditeurs.

Le chemin du fichier de saisie semi-automatique est très pratique. Sans beaucoup de mots.

Habituellement, lorsque nous avons besoin d'une palette de couleurs, nous utilisons Photoshop ou Gimp. Mais le sélecteur de couleurs complet est accessible directement dans l'éditeur - Ctrl/Cmd + Maj + C Et vous êtes génial. GutterColor et ColorHighlighter , qui facilitent la navigation dans les codes couleurs :

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

Liste TODO brillante! Toutes les tâches sont stockées dans des fichiers, il est donc très pratique de lier les tâches au projet correspondant. Possibilité de créer des projets, d'attribuer des balises, de fixer une date. Interface utilisateur et raccourcis compétents.

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

À la fin

Sublime SFTP
CTags - Prise en charge des CTags pour FO Sublime.
SideBarEnhancement - de nombreuses options supplémentaires pour le menu contextuel dans la barre latérale.
ActualVim - Vim in Sublime - deux éditeurs préférés en un.
SublimeLinter - Surligneur intégré pour C/C++, Java, Python, PHP, JS, HTML, CSS, etc.
CSScomb - Formatage d'encodage de style CSS.
FixMyJS , Jsfmt et JsFormat - Formateurs de style de codage JS/JSON.
AStyleFormatter - Codage de formatage de style C/C++/C#/Java.
Extraits de code SVG - Un ensemble d'extraits de code SVG personnalisés.
Inc-Dec-Value - augmente/diminue les nombres, les dates, les valeurs hexadécimales de couleur, etc.

Salut les amis! À la demande générale, mise à jour du guide d'installation rapide de l'éditeur de code Texte sublime 3, en installant les plugins nécessaires à la mise en page et en créant votre propre préréglage pour un démarrage rapide sur un nouveau lieu de travail.

frais

plus

Épinglez-le

Vous connaissez probablement la situation où, sur un nouveau lieu de travail, vous devez installer et configurer rapidement Sublime Text pour travailler sur de nouveaux projets. Habituellement, réglage fin Sublime Text prend beaucoup de temps et le faire à chaque fois n'est pas pratique et prend du temps.

Aujourd'hui, nous allons examiner le plus installation rapide Sublime Text, les plug-ins les plus populaires parmi les concepteurs de mise en page et installez l'un des thèmes d'éditeur les meilleurs et les plus confortables Un thème de matériau sombre.

Par défaut, Sublime Text a l'air plutôt triste :

Vous devez d'abord configurer contrôle des colis. Pour ce faire, appuyez sur le raccourci clavier Ctrl+Maj+P. Dans la fenêtre contextuelle, tapez Install Package Control et sélectionnez l'élément approprié. Après quelques secondes, Package Control sera installé, à propos duquel vous recevrez une notification.

Si vous êtes un utilisateur MacOS, vous devez appuyer sur Cmd + Maj + P sur votre clavier.

Le contrôle de package est requis pour que vous puissiez installer des modules complémentaires et des plugins dans Sublime Text 3 à partir du référentiel de packages.

Installation de plugins dans Sublime Text

Ensuite, vous devez installer les plugins dont vous avez besoin pour travailler. Nous envisagerons d'installer les plugins les plus populaires parmi les concepteurs de mise en page, ce qui simplifie grandement le développement. Vous pouvez également expérimenter d'autres plugins dans le contrôle des packages, peut-être que vous aimerez certains des nombreux autres packages disponibles.

Pour installer des plugins dans Sublime Text via Package Control, vous devez appeler le menu, comme nous l'avons fait précédemment : Ctrl + Maj + P. Entrez ensuite la commande "Installer le package" et sélectionnez le package souhaité dans la liste.

Les plugins les plus populaires pour Sublime Text :

Emmet- accélère l'écriture de code HTML et CSS à la vitesse de la lumière. Leçon d'Emmet ;
NomFichierAuto- complète le code lors de l'écriture de chemins vers des fichiers dans la mise en page ;
essentiel- Permet à Sublime Text d'utiliser le service d'extrait de code GitHub Gist. Leçon essentielle ;
Toupet- plugin pour mettre en évidence la syntaxe Sass dans les fichiers Sass et Scss. Développe Emmet dans les fichiers Sass.

Installation de l'apparence de texte sublime

j'aime beaucoup le thème Un thème de matériau sombre et mettre en surbrillance le code avec le jeu de couleurs approprié. Ce sont les couleurs les plus équilibrées, suffisamment contrastées, mais pas trop nettes pour un travail confortable dans l'éditeur.

Pour installer le jeu de couleurs One Dark, nous devons installer les packages suivants via Package Control :

Un schéma de couleurs sombres - Schéma de couleur pour la mise en évidence du code ;
Un matériau sombre - Thème- Thème de texte sublime de l'interface utilisateur.

Installation manuelle du plugin

Certains plugins ne sont plus mis à jour dans le Package Control ou n'y apparaissent tout simplement pas. Certains de ces plugins sont vitaux lorsque vous travaillez avec du code et doivent être installés manuellement.

Un de ces plugins TamponDéfilement- un plugin étonnant qui, lorsque vous rouvrez le document, place le curseur à l'endroit où vous avez terminé l'édition la dernière fois, réduisant ainsi le temps nécessaire pour trouver la bonne position pour continuer à travailler.

Pour installer BufferScroll manuellement, accédez à la page GitHub du plugin, téléchargez-le et extrayez-le à n'importe quel emplacement pratique sur votre disque. Ensuite, dans Sublime Text, sélectionnez l'élément de menu Préférences > Parcourir les paquets. Le dossier de données utilisateur sur votre lecteur s'ouvrira. Copiez ici le dossier contenant les fichiers Buffer Scroll et redémarrez Sublime Text. Maintenant, le plugin fonctionne.

Peaufiner l'éditeur, prérégler mes paramètres

Passons aux paramètres de Sublime Text.

Le Github Gist a mon préréglage que j'utilise toujours pour commencer le réglageÉditeur de texte sublime sur un nouveau lieu de travail ou après la réinstallation du système. Vous pouvez utiliser ce préréglage dans votre éditeur et le personnaliser selon vos besoins.

Code prédéfini pour les paramètres utilisateur (Preferences.sublime-settings | Preferences > Settings) :

( "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13 , "highlight_line": vrai, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": vrai, "material_theme_compact_panel": vrai , "material_theme_small_statusbar": vrai, "material_theme_small_tab": vrai, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )

Code prédéfini pour les raccourcis clavier personnalisés (Par défaut (Windows). sublime-keymap | Préférences > Raccourcis clavier) :

[( "keys": ["alt+shift+f"], "command": "reindent" ), ]

Maintenant sur sélection et sur clic Alt+Maj+F votre code s'alignera automatiquement sur la hiérarchie d'imbrication d'éléments appropriée.

En plaçant ces extraits dans les fichiers de paramètres appropriés, vous obtiendrez un Sublime Text entièrement prêt à l'emploi et personnalisé ou vous pourrez personnaliser l'éditeur par vous-même. Il y a deux champs dans les paramètres - celui de gauche avec les paramètres par défaut et celui de droite avec les paramètres utilisateur. Dans les paramètres par défaut, vous pouvez voir des conseils pour chaque propriété et les appliquer sur le côté droit en copiant et en définissant votre valeur.

Trouver quelle propriété est responsable de ce qui est assez simple - toutes les propriétés ont des noms intuitifs sur langue Anglaise. Toute propriété d'une grande abondance de paramètres disponibles peut simplement être traduite en russe et comprendre ce que cela signifie.

Afin de sauvegarder tous vos paramètres et de déployer rapidement Sublime Text sur un autre lieu de travail, copiez simplement le dossier
"C:\Users\(votre utilisateur)\AppData\Roaming\Sublime Text 3"
dans un emplacement de réserve caché sur votre disque ou sur une clé USB, puis placez-le avec un autre utilisateur ou sur un autre ordinateur dans le même répertoire sous l'utilisateur.

De plus, à votre discrétion, vous pouvez désactiver la mini-carte à droite et masquer le menu. Cela peut être fait en allant dans Affichage> Masquer la mini-carte et Affichage> Masquer le menu. Vous pouvez afficher le menu en appuyant sur la touche Ctrl de votre clavier.

Il y a quelques années, j'étais fan de TextMate. Suivant les préceptes de Thomas et Hunt, j'ai presque tout fait dans cet éditeur, y compris même la lecture de mana. Tandis que Texte sublime gagne en popularité et, à un moment donné, j'ai décidé de l'essayer. Des choses étranges se produisaient avec TextMate 2 à l'époque - cette version était encore en alpha pendant quelques années et ne semblait pas sortir de là. Plus tard, cependant, TextMate est devenu open source et le développement a été plus actif pendant un certain temps, mais j'étais déjà loin.

Depuis lors, mes intérêts ont un peu changé et j'ai commencé à préférer écrire du code plutôt que d'expérimenter le workflow. Le flux de travail, en conséquence, a glissé dans la direction d'un fonctionnalisme sain. À Ces derniers temps il n'y a pratiquement aucun changement actif là-bas - essentiellement, les mises à jour concernent les extraits et les langues de surbrillance. Le reste, apparemment, me convient parfaitement.

Exécuter Sublime Text depuis la console

Sur Mac OS, vous pouvez ouvrir n'importe quel fichier ou répertoire depuis la console en sublime comme ceci :

ouvrir -a "Sublime Text" . sudo open -a "Sublime Text" /etc/hosts

Pour plus de confort, il est préférable d'utiliser utilitaire console, qui va de pair avec Texte sublime. Il s'installe comme ceci :

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime

De plus, j'ajoute immédiatement quelques lignes à .zshrc :

alias s="sublime" # maintenant vous pouvez taper `s .` au lieu de `sublime .` export EDITOR="subl -w" # ainsi git commit ouvrira sublime au lieu de vi

Thème

Dans presque tous les éditeurs avec lesquels je travaille, j'utilise le thème Birds of Paradise. Sublime n'a pas fait exception, puisqu'il peut importer des thèmes depuis TextMate.

peluchage

Pour le linting JavaScript, j'utilise jshint . Pour le faire fonctionner dans texte sublime 3, j'utilise une combinaison de deux plugins :

SublimeLinter - moteur pour un grand nombre divers linters;
SublimeLinter-jshint - en fait, le linter lui-même.

Mon .jshintrc ressemble à ceci (la plupart du temps j'écris sous nodejs):

( "navigateur": faux, "curly": vrai, "expr": vrai, "indent": faux, "jquery": faux, "laxcomma": vrai, "laxbreak": vrai, "maxcomplexity": 10, " maxdepth": 3, "maxparams": 4, "node": vrai, "trailing": vrai, "quotmark": "single", "strict": vrai, "undef": vrai )

Vous trouverez une description des options.

csscomb

git

Pour intégrer avec git, GitGutter me suffit - ce plugin marque les modifications non encore validées dans le fichier avec les icônes correspondantes dans les marges.

Pour tout le reste, j'utilise la console et les tuyaux. Par exemple, vous pouvez voir le diff d'un commit entier en tapant git diff | s , donc cette intégration minimaliste me suffit.

Emmet

Emmet - un ensemble d'extraits pratiques pour html et css. Ainsi, par exemple, le concis html:5>ul>li.item-$*5>span.title+span.author se transforme en…

document

TodoReview

J'écris souvent des commentaires todo dans le code comme ceci : /* TODO: rewrite to promises */ . TodoReview est capable de trouver tous ces commentaires dans le projet et de les afficher sous forme de liste afin que vous puissiez vous débarrasser systématiquement de la dette technique, et pas seulement une fois de plus tomber accidentellement sur un commentaire laissé.

Améliorations de la barre latérale

SideBarEnhancements apprend à la barre latérale du texte sublime qui n'est pas particulièrement accommodante à interagir de manière adéquate avec les fichiers : copier, coller, supprimer, etc.