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
- Suivez le lien https://packagecontrol.io/installation et copiez la commande, qui ressemblera à ceci :
- Appuyez sur Ctrl - backtick (; `) pour ouvrir la console Sublime Text :
- Collez la commande et appuyez sur Entrée.
- Après avoir exécuté la commande, vous verrez un petit avertissement contextuel :
- Cliquez sur "OK".
- Fermez et redémarrez Sublime Text.
- 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
- Appuyez sur Ctrl-Shift-P sous Windows pour ouvrir le "Panneau de commande".
- 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 :
- 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 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.
À:
Appuyez sur : ;c, puis ;;c (pour chameauCas)
Après: navIDMenuSystemClassNavMenuIsOpen
Si vous êtes un développeur Web utilisant Contrôle du package 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 en utilisant Contrôle des packages : Supprimer le package.
Traduction de l'article " Sublime Texte 3 Plugins pour le Web Développeurs» équipe de projet sympathique
Bonjour, beaucoup de choses ont déjà été écrites sur Sublime Text. Dans mon blog, j'ai parlé de Sublime Text 2. Maintenant, Sublime Text 3 a déjà quitté la version alpha (alpha signifie nouveau et extrêmement pas version stable), et déplacé en version bêta (la version bêta n'est toujours pas stable, mais est déjà destinée aux tests ; après la version bêta, il y a généralement une version officielle). Et j'ai décidé de comprendre complètement Sublime Text 3 (ci-après dénommé ST3).
Si vous envisagez d'installer SublimeText3, c'est celui-là instructions complètes pour toi. Ici, je vais décrire tout ce qui concerne cet éditeur, et il peut vraiment faire beaucoup.
Tout d’abord, j’ai supprimé ST2 et toutes ses traces du système. J'ai également supprimé node.js et npm qui y étaient associés. Puisque j'ai l'intention de reconfigurer la compilation des fichiers less, puis saas, correctement et avec compétence, via sublime. Mais nous en reparlerons plus tard.
Partie 1. Installation et configuration de Sublime Text 3
Téléchargez et installez Sublime Text 3
Si vous ne le savez pas déjà, Less est basé sur JavaScript-CSS préprocesseur. C'est le code qui compile en CSS. Il y a différentes manières compiler less en CSS : Grunt , Guard et Less.app . Cependant, peut-être que vous ne voulez pas ou n'avez pas besoin d'utiliser des outils supplémentaires et que vous souhaitez tout faire correctement dans l'éditeur de code. Ci-dessous, j'ai fourni des instructions qui fonctionneront Utilisateurs Windows(J'ai fait l'installation moi-même, et aussi pour Mac OS.)
- Installation de Node.js
- Installer NPM (installé avec Node.js)
- Installez moins à l’échelle mondiale. Ouverture Console Windows et entrez npm install less -gd
- Installez le plugin Less2Css et SublimeOnSaveBuild
Ouvrez les paramètres ST3 : Préférences → Paramètres - Par défaut, et ajoutez la ligne à la fin :
"lesscCommand": "/usr/local/share/npm/bin/lessc"
Ouvrons n'importe quel fichier .less et essayons de l'assembler. Apportez simplement des modifications au fichier et appuyez sur Ctrl+S.
Si une erreur se produit : Impossible d'interpréter l'argument clean-css… Cela s'est produit parce que le plugin clean-css était séparé et n'était pas inclus dans le package less. Il doit donc être installé séparément. Installons. On va à la console et on écrit :
Npm install -g moins-plugin-clean-css
SASS est un autre préprocesseur pour CSS. Il gagne en popularité et est déjà en avance en termes d'utilisation généralisée.
- Installation de Ruby
- Lancez la console et installez Ruby Gem gem install sass
- Installation du plugin Sass pour Sublime Text
- Installation du plugin Sass Build pour Sublime Text
- Installez le plugin SublimeOnSave pour Sublime Text
(nous avons parlé de ce plugin dans les instructions ci-dessus)
Ajoutons maintenant des paramètres aux paramètres de texte sublime – Par défaut :
( "filename_filter": ".(sass|scss)$", "build_on_save": 1 )
N'oubliez pas non plus d'ouvrir le fichier .sass et de sélectionner le système de construction dans Outils → Système de construction → SASS compressé. Désormais, lors de l'enregistrement du fichier .sass, .css sera compilé.
Jade est un préprocesseur pour l'écriture code HTML, et comme less ou sass pour CSS, cela rend l'écriture plus rapide et plus facile (pour les codeurs expérimentés) balisage HTML. Comment installer et configurer son fonctionnement.
- Node.js doit être installé avec npm (généralement fourni avec node)
- Accédez à la console et installez jade avec la commande npm install jade --global
- Installez le plugin Jade Build dans Sublime Text
- Dans Sublime Text, ouvrez le fichier .jade et sélectionnez le système de construction Jade
- Si vous suivez toutes les instructions de cet article, alors dans les paramètres Sublime, j'ajouterai la ligne sur Save On Build avec l'extension jade et maintenant cela ressemblera à ceci "filename_filter": ".(sass|scss|jade)$" ,
- Installez le plugin Jade dans Sublime
Après ces manipulations, les fichiers jade sont compilés.
S'il n'y a pas de surbrillance de code Jade, allez dans le coin inférieur droit de ST, et il est très probable qu'il indique Texte brut, cliquez sur cette inscription, puis sélectionnez Surbrillance Jade. Maintenant, le rétroéclairage fonctionnera.
Découvrez la liste des essentiels - les 15 plus plugins requis pour Sublime, ce qui simplifiera grandement la vie du développeur.
Contrôle des paquets
Gestionnaire de packages pour Sublime. Sans cela, l'installation et la suppression de packages sont un enfer absolu, vous devez donc d'abord installer Package Control.
Emmet
Emmett serait le numéro un si Sublime disposait d'un gestionnaire de paquets approprié, prêt à l'emploi. Grâce à cela, travailler avec le balisage devient beaucoup plus pratique et plus rapide. Par exemple, html + tab créera cadre fini pour un document html, et div.wrapper + tab se transformera en
Extraits JavaScript et NodeJS
Une collection de raccourcis d'extraits pour JavaScript qui vous aideront à travailler beaucoup plus rapidement. Pourquoi écrire document.querySelector("selector’); quand vous pouvez simplement écrire qs , appuyez sur tab et en finir avec ça !
Nouveau fichier avancé
Avec ce package, vous n'avez pas besoin de grimper dans les arborescences de répertoires et d'utiliser les menus déroulants. Via cmd+alt+n (ctrl+alt+n), une ligne de saisie sera appelée - entrez le chemin, le nom du fichier et appuyez sur Entrée. Prêt!
Git
Ce plugin ajoute la possibilité d'utiliser toutes les fonctions Git nécessaires au développement : ajout, commit, accès aux logs - et tout cela sans quitter Sublime !
GitGutter
Ajoute la possibilité d'afficher l'état du fichier et de suivre les modifications directement dans l'éditeur. Vous pouvez comparer les versions de fichiers de n’importe quelle branche.
Améliorations de la barre latérale
Comme son nom l'indique, ce package ajoutera quelques améliorations à la barre latérale gauche. Par exemple, l'option « Ouvrir dans le navigateur » apparaîtra, la possibilité de faire une duplication et environ 20 fonctions supplémentaires utiles.
Sélecteur de couleurs
Minuscule mais très plugin utile ajoutera la possibilité de sélectionner et de sélectionner une couleur dans une palette circulaire au format hexadécimal. S'ouvre dans une fenêtre séparée et vous permet de sélectionner une couleur à la fois dans la palette et depuis n'importe où sur l'écran.
Espaces réservés
Sublime Text 3 a introduit la possibilité de générer et d'insérer du lorem ipsum, et Placeholder étend légèrement cette fonctionnalité. Vous pouvez y insérer des images de mise en page, des formulaires, des listes et des tableaux.
DocBlockr
DocBlockr facilite la rédaction de descriptions de fonctions. Une ou deux fois, cela créera une zone commentée pour décrire les arguments de la fonction, les valeurs de retour et les types de variables.
SublimeCodeIntel
Cette extension vous aidera à comprendre rapidement l'ancien code. En cliquant sur le nom d'une fonction, vous afficherez un lien qui vous mènera directement à la description de cette fonction.
Réduire
Réduit et crée une version minifiée de celui-ci dans le répertoire du fichier actuel. Fonctionne avec CSS, HTML, JavaScript, JSON et SVG. Il nécessite des bibliothèques node.js externes pour fonctionner, vous devrez donc les installer séparément :
npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo
npm install - g clean - css uglifycss js - embellir html - minifier uglify - js minjson svgo |
Linter Sublime
Capable de vérifier le code pour erreurs de syntaxe, mauvaises pratiques et autres problèmes qui apparaissent souvent. Uniquement pour chaque langue utilisée, vous devrez installer un