Share
En moins d'un an, l'éditeur de code de Sublime Text 2, disponible pour Mac, Windows et Linux, est monté en flèche pour devenir l'éditeur de choix pour un grand nombre de développeurs. Comment venir? Eh bien, c'est un éditeur sophistiqué, avec une vitesse ultra rapide, une communauté de plugins incroyablement vibrante, une configuration facile, le mode Vintage (Vim), plusieurs curseurs - la liste s'allonge.
Si vous n'avez pas encore changé d'avis, accordez-moi vingt minutes par loyauté envers votre rédacteur en chef actuel, et je vous convaincrai.!
Veuillez noter que cet article, pour des raisons de commodité et de lisibilité, utilisera exclusivement les liaisons de clavier spécifiques au Mac. Reportez-vous ici pour les versions équivalentes Windows / Linux.
Commençons par la fonctionnalité qui vous étonnera: plusieurs curseurs. Attention: une fois que vous aurez la possibilité d'avoir plusieurs curseurs au bout de vos doigts, vous ne pourrez plus revenir à l'ancienne..
Imaginez que vous deviez changer chaque occurrence du mot, ma méthode, à newMethod. Traditionnellement, vous pouvez effectuer une recherche et un remplacement. Cependant, dans Sublime, c'est beaucoup plus facile. Placez simplement le curseur dans le mot et tapez Contrôle + Commande + g. Avec cette seule touche, vous avez maintenant sélectionné chaque occurrence de ma méthode, et avoir plusieurs curseurs au bout des doigts. Changez le texte et regardez-les tous se mettre à jour! Mâchoire tombante, droite?
Alternativement, vous pouvez appuyer sur Commande + d à plusieurs reprises pour sélectionner progressivement chaque occurrence supplémentaire du mot.
La palette de commandes de Sublime est un don de Dieu pour ceux qui préfèrent toucher le moins possible à la souris (plus à ce sujet prochainement). Cette palette vous permet d'exécuter d'innombrables commandes, telles que la modification du type de syntaxe du document actuel, l'installation de plugins et la recherche d'extraits de code, pour ne citer que quelques exemples..
Par exemple, pour changer la mise en surbrillance de la syntaxe actuelle pour le document actuel, par exemple HTML, en CSS, appuyez sur Commande + Maj + p, et tapez "css". L'option "Définir la syntaxe: CSS" devrait maintenant s'afficher. Appuyez sur Entrée et vous avez terminé! Notez que vous pouvez tirer parti de la recherche floue ici; en tant que tel, vous n'avez pas besoin de taper le mot entier.
Mémorisez cette commande au clavier et utilisez-la souvent.
Créé par Will Bond, Package Control est un puissant gestionnaire de paquets qui vous permet, directement depuis l'éditeur de code, d'installer n'importe quel paquet (ou plugin) que vous puissiez imaginer. Besoin de codage zen? Installez-le en trois secondes. Qu'en est-il de la prise en charge de Prefixr ou de la coloration syntaxique CoffeeScript? Il ne faut que quelques frappes au clavier pour configurer. Plus besoin de chercher sur le Web le bon plugin, puis de chercher où l'installer.
Pour installer Package Control, visitez le site de Will Bond, copiez l'extrait de code fourni, revenez à Sublime Text, appuyez sur Contrôle +'et collez l'extrait puis redémarrez. Vous avez terminé!
Installons le codage Zen. Ouvrez la palette de commandes (Commande + Maj + p) et tapez "installer". Une fois que vous appuyez sur Entrer, Sublime fournira une liste de tous les différents plug-ins disponibles pour être installés. Rechercher Zen pour faire apparaître "Codage Zen", et appuyez sur Entrer pour l'installer. Oui, c'est aussi simple que ça! Pour confirmer que cela a fonctionné, dans un fichier HTML vide, tapez ul> li * 4 + Tab. Tada!
Il est probable que vos lecteurs Mac utilisent actuellement TextMate. Heureusement, Sublime Text offre une prise en charge complète des thèmes TextMate. Cela signifie que, oui, votre jeu de couleurs personnalisé peut être migré vers Sublime Text sans une once de configuration. Il suffit de le déposer dans votre répertoire "Packages" tel quel..
Combien de fois avez-vous téléchargé manuellement, par exemple, HTML5 Boilerplate ou la bibliothèque jQuery? C'est du gaspillage; Ne serait-il pas plus facile si nous pouvions exécuter une frappe rapide et les télécharger instantanément dans le projet actuel? Bien sûr que ce serait! Nettuts + Fetch est la solution.
Installez-le par le biais de Package Control, puis recherchez "Fetch: Manage Remote Files". Cela affichera deux objets pour récupérer des fichiers individuels et des packages, respectivement; deux ont été fournis pour vous.
Pour le tester, créez un nouveau fichier, recherchez "Fetch" dans la palette de commandes, choisissez "Fichier unique -> jQuery" et observez l'ajout immédiat de la dernière version de la bibliothèque. Ensuite, essayez d'installer un paquet entier, et soyez surpris.
Visitez n’importe quelle classe ou liste de fonctions disponibles, tapez Commande + r, et vous serez présenté avec une liste de tous les symboles sur la page. Notez comment nous utilisons le @ symbole pour voir les méthodes.
Par exemple, si vous visualisez une classe PHP, Commande + r listera tous les noms de méthodes. Vous pouvez ensuite utiliser la recherche floue pour passer instantanément à la méthode souhaitée..
Lorsque nous combinons cela avec les capacités de commutation de fichiers instantanée de Sublime, cette commande devient particulièrement utile. Imaginez que vous ayez besoin de modifier style.css, et plus précisément le .boîte classe dans ce fichier; type Commande + p, style @ box, et vous êtes là!
Prefixr est un service Web qui applique automatiquement les préfixes de fournisseur CSS nécessaires à vos feuilles de style, de sorte que vous n'ayez pas à vous souvenir des fournisseurs à utiliser pour une propriété CSS3 donnée. Le plugin Prefixr apporte cette fonctionnalité directement à votre éditeur.!
Une fois que vous avez installé le plug-in via Package Control, sélectionnez le contenu de votre feuille de style et activez-le en tapant Contrôle + Commande + x. Voila! Votre fichier a été mis à jour instantanément. Utilisez la syntaxe officielle et laissez Prefixr comprendre les exigences spécifiques du fournisseur..
Moins vous touchez la souris, mieux c'est. Malheureusement, par défaut, créer un nouveau fichier dans Sublime Text peut prendre un peu plus de temps que nous le souhaiterions. Le plug-in "Advanced New File", qui peut, comme toujours, être installé via Package Control, corrige ce problème..
Une fois installé, tapez Commande + Option + n, et vous verrez un nouveau panneau apparaître en bas.
Ce qui est fantastique avec ce plugin, c'est que vous pouvez également créer des fichiers dans des dossiers qui n'existent pas encore. Peut-être avez-vous besoin de créer un nouveau scripts.js fichier, mais vous n'avez pas encore créé le js annuaire. C'est bon; le plugin saura créer le dossier s'il n'existe pas encore. Il vous suffit de taper le chemin complet vers le nouveau fichier souhaité, et vous êtes prêt à partir.
Créons un nouveau fichier jQuery.js dans un js / libs répertoire qui n'a pas encore été créé; Option + Commande + n, js / libs / jquery.js, enregistrer, Commande + Maj + p, "Fetch", "Fichier unique", "jQuery". En quelques secondes, nous avons créé une arborescence de répertoires et téléchargé la dernière version de la bibliothèque..
S'ils le souhaitent, les utilisateurs de Vim peuvent facilement migrer vers Sublime Text, grâce à son mode Vintage en option. Pour l'activer, éditez le fichier "Préférences par défaut" dans le menu Préférences, faites défiler vers le bas et supprimez l'élément "Vintage" du ignored_packages tableau.
Maintenant, appuyez sur Échapper, et vous êtes en mode commande! Vous constaterez que les raccourcis clavier Vi de Sublime sont assez précis!
Chaque extrait de texte sublime fait référence à un fichier unique et permet de compléter les onglets et de définir les valeurs par défaut. Pour créer un nouvel extrait, choisissez "Outils -> Nouvel extrait". Dans ce nouveau fichier, vous pouvez, dans le
Enregistrez le fichier avec un .extrait sublime extension, et le tester!
Alors que les extraits natifs de Sublime font le travail, pour les extraits volumineux, je préfère tirer parti de GistHub Gists et du contrôle de version..
Commencez par installer le plugin "Gist" via Package Control. Cela nous donnera maintenant une poignée de nouvelles options dans la palette de commandes..
Lorsque vous essayez de créer un nouveau Gist, vous constaterez que vous devez d'abord fournir au plug-in vos informations d'identification GitHub. Je vous recommande de créer un compte spécial spécifiquement pour vos extraits. Une fois cette opération effectuée, définissez les informations d'identification et réessayez. Une fois que vous avez créé quelques extraits, vous pouvez les répertorier à l'aide de la palette de commandes, en choisissant "Gist: Open Gist".
La meilleure partie est que, lorsque vous transpercez des extraits existants via gist.github.com, ils seront automatiquement disponibles dans Sublime Text - avec un contrôle de version gratuit pour vos extraits.!
Le système de compilation de Sublime nous permet d’appliquer des combinaisons de touches, qui peuvent être acheminées vers des programmes externes, tels que CoffeeScript, Sass, Grunt, etc. Cela signifie que, plutôt que de basculer vers le terminal pour exécuter votre commande de construction, vous pouvez accomplir la même chose directement depuis l'éditeur..
Prenons par exemple CoffeeScript, qui est très populaire de nos jours. Commencez par créer un coffeescript.sublime-build fichier dans votre répertoire "Packages /". Ensuite, collez le code suivant dans:
"cmd": ["café", "- c", "$ fichier"], "sélecteur": "source.coffee", "chemin": "/ usr / local / bin /"
Bien qu'il existe plusieurs options à notre disposition, nous allons nous en tenir à ces trois options pour l'instant.. cmd spécifie la commande à exécuter, ainsi que tous les arguments et indicateurs. Dans ce cas, nous exécutons le fichier actuel à l'aide de la commande de compilation CoffeeScript. Deuxièmement, chemin n'est nécessaire que si CoffeeScript n'est pas installé dans votre chemin de base.
Une fois le fichier enregistré, une nouvelle option sera disponible via "Outils -> Construire le système." Choisissez "CoffeeScript" et, maintenant, lorsque vous exécutez la commande "build" avec Commande + b, le fichier CoffeeScript actuel sera compilé!
Addy Osmani a publié un article fantastique sur les capacités de compilation de Sublime Text.
Parfois, nous avons besoin de filtrer toutes les peluches supplémentaires qui entravent notre codage. Utilisez "Mode sans distraction" pour effacer l'écran, à l'exception du code. Cette option est disponible via le menu Affichage. Sélectionnez "Entrer en mode sans distraction", ?? ou utilisez le raccourci clavier Mac, Contrôle + Maj + Commande + F.
L'une des fonctionnalités remarquables de Sublime est sa barre latérale unique qui offre une vue à vol d'oiseau du fichier actuel. Cela peut être extrêmement utile pour les gros fichiers, car cela nous permet de numériser un fichier en quelques secondes, sans avoir à faire défiler la page manuellement.
Vous préférez éditer plusieurs fichiers dans la même fenêtre? Sublime offre une poignée de vues divisées, y compris des lignes et des colonnes. Naviguez vers Affichage -> Mise en page pour afficher les choix disponibles et assurez-vous de mémoriser les commandes du clavier, car vous utiliserez souvent cette fonctionnalité!
Le plugin "Live CSS" est simple mais utile. Il définira automatiquement l’arrière-plan de toute valeur de couleur dans votre feuille de style égal à ce que vous avez spécifié. Certes, c'est un petit avantage, mais néanmoins, cela peut être utile!
Au cours du développement, nous n'avons souvent pas encore le contenu final d'une application Web. Dans ces cas, nous utilisons généralement du texte et des images fictifs. En considérant la fréquence à laquelle nous le faisons, ne serait-il pas judicieux de créer une poignée d'extraits de code de substitution? Eh bien, le plugin placeholder fait la même chose!
Que vous ayez besoin d'une image temporaire, de quelques paragraphes "lorem ipsum" ou même d'une liste de définitions avec du texte factice, ce plugin sera parfait pour le travail..
Une commodité étonnamment rare, trouvée dans Notepad ++, est les guides d'indentation. Parfois, lorsque vous parcourez des fichiers volumineux, il peut être difficile de faire correspondre l'indentation sans un peu d'aide.
Les guides d'indentation de Sublime fournissent des visuels utiles en pointillés pour résoudre ce problème..
Sublime Text est parfois critiqué car il ne propose pas une interface flashy pour la définition des options de configuration. Ironiquement, selon l'auteur, le fait que Sublime affiche littéralement un objet JavaScript modifiable est l'un de ses principaux atouts. Cela permet d'ajuster les réglages de Sublime à vos besoins de la manière la plus simple et la plus humaine possible..
Par exemple, pour désactiver les "Instructions de retrait", ouvrez le fichier de paramètres "Par défaut", recherchez draw_indent_guides (avec Commande + i) et définissez sa valeur sur faux. Facile! Assurez-vous de passer en revue tous les paramètres disponibles..
Si vous vous référez encore manuellement à la barre latérale pour rechercher le fichier souhaité, vous vous trompez. Le changement de fichier instantané de Sublime est incroyable et plus rapide que jamais auparavant dans un éditeur.
Type Commande + p pour afficher une liste de tous les fichiers du projet en cours. Vous pouvez maintenant utiliser la recherche floue pour choisir le fichier vers lequel vous souhaitez basculer. Besoin d'une liste de tous les fichiers JavaScript? Type .js. Vous constaterez que, au fur et à mesure que vous tapez votre recherche, Sublime Text bascule rapidement vers le fichier le plus haut correspondant à votre requête..
C'est la méthode recommandée pour naviguer vers de nouveaux fichiers. La barre latérale est un dernier recours.
Sublime nous donne la possibilité de définir facilement des raccourcis clavier pour déclencher n'importe quelle commande. Bien que de nombreuses liaisons soient déjà intégrées, vous pouvez les modifier si vous le souhaitez..
Pensez à la liaison pour déplacer un fichier dans une autre fenêtre lorsque vous utilisez plusieurs colonnes. Par défaut, il faut appuyer sur Contrôle + Maj + 2; Cependant, cela peut être un peu difficile à retenir. Au lieu de cela remapper ceci à Option + 2.
Bien que nous puissions modifier le fichier de liaisons de clés par défaut, il s'agit d'une mauvaise pratique, car toute mise à jour de Sublime réinitialisera vos personnalisations. Au lieu de cela, il est préférable de modifier le fichier de liaisons de clé utilisateur..
["keys": ["alt + 1"], "commande": "move_to_group", "args": "group": 0, "keys": ["alt + 2"], "commande ":" move_to_group "," args ": " group ": 1, " keys ": [" alt + 3 "]," commande ":" move_to_group "," args ": " group ": 2 , "keys": ["alt + 4"], "command": "move_to_group", "args": "group": 3]
Ne t'inquiète pas si cela semble déroutant, recherchez dans le fichier de liaisons de clés par défaut les paramètres que vous devez modifier, puis copiez-les et collez-les dans votre fichier de liaisons de clés utilisateur, puis mettez à jour les "clés" en conséquence..
Lorsque nous devons rechercher un fichier, nous avons souvent recours à un panneau "Rechercher et remplacer", ce qui prend du temps. Au lieu de cela, appuyez sur Commande + i effectuer une recherche en direct sur le fichier en cours. Vous serez surpris par la rapidité avec laquelle cette méthode est.
Naturellement, Sublime Text prend en charge le pliage de code à plusieurs niveaux. Supposons que vous travaillez sur une feuille de style et que vous souhaitez masquer toutes les propriétés. soit choisissez "Edition -> Pliage à froid -> Plier tout", ou appuyez sur Commande + k + 1.
Agréable! Pour déplier tous les blocs, appuyez sur Commande + k + j.
La mémorisation des raccourcis clavier peut prendre un certain temps, mais cela en vaut la peine.
N'oubliez pas que Sublime Text 2 est en cours de développement. Je vous encourage à utiliser la version de développement, disponible à l’adresse sublimetext.com/dev. Ne t'inquiète pas même si ce sont des versions de développement, vous rencontrerez rarement des bugs.
Le plugin Alignment, de Will Bond, ajustera instantanément votre code pour en faire un code plus beau. Le plus souvent, il est utilisé pour s'assurer que le signe égal, =, pour les affectations variables.
Installé via Package Control, le plugin Alignment peut être activé en sélectionnant un morceau de code applicable et en appuyant sur Contrôle + Maj + a.
En effet, le plugin traduira:
var first = 'Joe'; var last = 'Black'; var job_title = 'Death'; var status = 'En vacances';
Dans:
var first = 'Joe'; var last = 'Black'; var job_title = 'Death'; var status = 'En vacances';
Simple mais utile!
Clairement, Sublime Text 2 renferme de nombreux secrets et astuces, mais cette liste vous permettra de commencer! Si vous souhaitez en savoir plus sur cet éditeur fantastique, consultez notre prochain cours: "Flux de travail parfait dans Sublime Text 2".
Accentsconagua