Emmet : écrire en HTML+CSS comme un ninja

1. Introduction au cours: Salut, là. Je suis Rich Armstrong. Je suis designer, animateur et codeur. Je codais depuis plus de 10 ans, mais je n'aime pas particulièrement écrire du code. J' écris du code pour faire des choses. Moins je passe de temps à coder, mieux c'est. Donc, cette clause concerne l'utilisation d'Emmet pour accélérer l'écriture HTML et CSS. Si vous mettez en œuvre ce que nous couvrons dans cette classe, vous pourriez économiser des jours ou des semaines chaque année. C' est beaucoup de temps. Nous allons couvrir des choses comme les abréviations HTML et CSS, l'emballage de code, raccourcis clavier, le passage de code, et quelques joyaux cachés bizarres et merveilleux qu'Emmet a à offrir. Emmet travaille dans tous les principaux éditeurs de code et même dans des endroits comme CodePen et JSFiddle, écrire avec Emmet est le niveau suivant. Si les ninjas ont réellement écrit du code, ils utilisent Emmet. Alors, nous allons entrer. 2. // COMMENCER: Salut, je suis super content que tu regardes. J' ai structuré cette classe en courtes vidéos afin que vous puissiez essayer vous-même après chaque vidéo et que vous puissiez facilement trouver et regarder des vidéos à nouveau. La classe est divisée en sections suivantes. Aller, abréviations CSS, raccourcis CSS, abréviations HTML, raccourcis HTML, plus Emmet awesomeness, productivité avec sublime et la dernière section, conclusion. Dans la classe, je vais tout faire dans un texte sublime sur un Mac, mais je vais fournir des raccourcis Windows et des informations si possible. 3. Théorie rapide: Voici la théorie simple d'Emmet. Étape 1, écrire en HTML ou en abréviation CSS. Étape 2, développez l'abréviation en HTML ou CSS entièrement formé. Étape 3, répétez. Faire cela encore et encore vous fera gagner du temps. Alors allons y entrer. 4. Installer Emmet: Nous devons installer Emmet pas l'éditeur de code pour y aller. Alors visitez EMMET. IO/Téléchargez et suivez les instructions des éditeurs de code IDEO. Dans la vidéo suivante, je vais vous montrer comment installer Emmet dans Sublime Text. En outre, Emmet travaille et les éditeurs de code en ligne comme CodePen et JSFiddle si vous voulez tester les points, l'extension des abréviations. 5. Installation d'Emmet dans Sublime: Dans cette vidéo, je vais vous montrer comment installer Emmet dans Sublime Text sur un Mac. Il y a différentes façons de le faire, mais je vais vous montrer une façon vraiment facile. Donc, vous allez aux outils et nous allons installer le contrôle de paquet, ce qui nous permet d'installer des choses à partir d'Internet très facilement. Je vais cliquer sur installer le contrôle du paquet, et après un certain temps, je devrais obtenir une boîte de dialogue de confirmation me disant qu'il est installé. Maintenant, je peux aller aux outils et utiliser mes pastilles de commande, ou je peux appuyer sur la commande shift P, et cela fait apparaître ma palette de commandes. C' est un outil Sublime Text vraiment puissant. Ensuite, je vais taper, installer. Je pourrais taper paquet d'installation de contrôle de paquet, mais je peux simplement taper Installer, puis appuyer sur Entrée ou Entrée. A partir de là, il va apporter une liste de paquets que nous pouvons installer. Je vais taper un Emmet, puis appuyer sur Entrée, et à partir de là il va installer Emmet. Fantastique. Je devrais avoir un peu de soin pour me dire qu'Emmet a été installé. Je peux fermer ça. Merci beaucoup. Maintenant, vérifions si cela fonctionne. Donc, cela change en HTML. Si je tape div et j'appuie sur l'onglet, on y va. Il se dilate. Fantastique. Ça marche. 6. // ABRÉVIATIONS CSS: Laissez-moi vous montrer les bases de l'utilisation d'Emmet pour CSS très rapidement dans cette vidéo. La première chose que je dois faire est de m'assurer que la syntaxe du fichier sur lequel je travaille est en fait CSS. Nous pouvons voir la syntaxe du fichier en bas à droite. Donc, ce fichier est actuellement un texte brut. Je peux cliquer ici pour le changer en CSS. Je peux également le changer en utilisant la Palette de commandes. Donc, je pourrais aller à Outils, Palette de commande ou utiliser un raccourci clavier, Command Shift P, et je pourrais taper la syntaxe ensemble CSS. Nous pourrions faire la même chose pour HTML, définir la syntaxe HTML. Nous pouvons aller définir la syntaxe CSS. Une autre façon est que nous pourrions simplement enregistrer cela, donc Command S, et nous pouvons l'enregistrer sous style.css. Cela devrait automatiquement définir la syntaxe sur CSS. Donc, une fois que nous avons sorti ça du chemin, nous pouvons commencer à écrire du CSS. Maintenant, nous allons juste écrire du CSS pour une balise body et je peux appuyer sur C, et Sublime vient automatiquement avec un tas d'options. Je peux appuyer sur Entrée, et juste comme ça, c'est un peu d'image juste là. Si nous ne voulons pas appuyer sur Entrée, nous pouvons simplement appuyer sur C et Tab, ou nous pourrions appuyer sur C et Control E pour étendre l'abréviation. Ce sont trois façons différentes d'élargir réellement les abréviations. Mais nous pouvons l'utiliser pour n'importe quelle règle que nous voulons. Donc marge, faisons ça. Et le rembourrage ? Faisons ça. Qu' en est-il de l'arrière-plan ? Faisons ça. Plutôt cool, non ? Qu'en est-il du fond ? Qu' en est-il de la frontière ou de la frontière droite ? Et border-top ? Plutôt cool, non ? Et un rayon frontière, Brds ? Rayon de frontière. Super cool, non ? Je veux dire, c'est des trucs puissants et c'est vraiment, vraiment facile à utiliser. Juste comme ça, j'ai déjà un tas de règles pour mon étiquette de corps. 7. Abréviations avec valeurs: Nous connaissons les bases, mais passons à des trucs plus avancés. Pos un robinet, position : absolu, tac, text-align : centre. Qu' en est-il de m12, marge : 12 pixels. Et t100p ? Tap, 100 pour cent C'est des trucs dingues juste là. Et c et ffo, couleur ? Et cr, tap, RVB ? Et l'ARC ? Rvb avec un canal alpha. Maintenant, nous pouvons aller quelque chose comme, 200 tap, 125 tap, 123 tap. Maintenant, vous pouvez mettre sur l'opacité. C' est des trucs vraiment cool, juste là. Et si on voulait faire un boarder bd1 ? Boarder1 pixel ? C'est génial. Qu' en est-il de bd1-s, puis nous mettons sur la valeur de couleur, ffo-tap-un pixel solide avec la couleur. Vérifie ça. C pour la couleur. Ensuite, nous mettons sur la valeur de couleur, donc ffo, qui serait jaune. Ensuite, nous mettons dans l'onglet 0.3. Il met dans la valeur rgba juste là. Je veux dire, si tu ne vois pas comment ça va accélérer ta productivité, je ne sais pas. Qu' en est-il de quelque chose comme m, qui sera marge. Ensuite, nous mettons en 12rem. Et p, et on a mis quelque chose comme 80em. Plutôt cool. Mec, c'est fou. Ce n'est que le début des abréviations CSS. On peut faire des choses folles avec des couleurs, des dégradés, des arrière-plans. Des choses incroyables. 8. Quelle est l'abréviation ?: Comment savoir ce qu'est l'abréviation ? Comment puis-je savoir ce raccourci ? Dois-je tous les apprendre ? Eh bien, ce qui est vraiment cool, c'est qu'il y a une syntaxe appropriée comme pause, deux-points, une position absolue pour et, sublime peut venir avec toutes ces ordures. Je vais juste appuyer sur évasion. Quand j'appuie sur la tabulation ici, position absolue. Maintenant, c'est la bonne façon de le faire, mais nous pouvons aussi faire une pause, comme si, ou peut-être même comme PA, qu'est-ce que cela ferait ? Rembourrage. Ok, mais p ferait aussi du rembourrage. Intéressant. Ce qui se passe vraiment ici, c'est que Emmet utilise cette chose appelée recherche floue, il essaie essentiellement de deviner ou de comprendre ce que vous écrivez, ce que vous cherchez. Si vous ne savez pas ce que c'est, tapez-le, testez-le. Si je voulais faire quelque chose comme un rayon frontière, je serais comme, rayon de bord ou quelque chose comme ça. frontière, ça peut être une bonne. Je ne sais pas. Et les Bdrs, le rayon de la frontière. D' accord. Et le bdr ? Qu'est-ce que le bdr ? Droits aux frontières. C'est intuitif, ce qui est vraiment cool. Parfois, je n'ai aucune idée de ce que j'ai réellement besoin d'écrire, mais je l'écris et le teste. Cependant, si vous en avez vraiment besoin, il y a une feuille de triche en ligne et il y a tout un tas de documentation emmet que vous pouvez regarder, vous pouvez aller regarder. Si vous utilisez quelque chose comme si vous avez affaire à un tas de syntaxe de couleur ou d'arrière-plans ou de dégradés, allez chercher comment faire ça super bien, puis conservez-le dans votre cerveau. Ensuite, vous pouvez l'utiliser comme un pro. 9. Gradients: L' une des choses les plus cool qu'Emmet a à offrir est la syntaxe de gradient. C'est vraiment cool. Vous allez LG pour le gradient linéaire et ne vous laissez pas berner par Sublime. Oui, appuyez sur Évasion, puis sur les crochets, et ils vont fournir la direction. Allons à gauche, et ils vont fournir le point médian, ce qui serait 10%. Tu n'as même pas à le mettre. La première couleur, donc on pourrait dire F zéro, zéro pour rouge et ensuite, noir zéro, zéro, zéro, zéro à la fin. Alors, je vais l'étendre. Whoa. Ça vient d'écrire tout ça pour moi. Merci, Emmet. Tu roches. Mais maintenant, vous vous demandez peut-être : « Eh bien, ça met toutes ces valeurs là pour moi, que se passe-t-il si je veux les changer ? Est-ce que je devrais les changer trois fois ? » Non, regarde ça. Modifions cela en blanc et vous appuyez sur Tab ou Contrôle E pour développer à nouveau, et cela change tout pour vous. Fantastique. Allons à la ligne supérieure et peut-être sortons le 10%, appuyez sur Tab. Voila. Incroyable, non ? 10. Règles multiples: Que se passe-t-il si nous voulons écrire toutes nos règles en même temps ? Pause A. Maintenant, je ne veux pas simplement étendre ceci et en écrire un autre, je veux tout écrire une fois. Nous pouvons aller plus t 0 plus b, 0 plus o, 0 plus r 0 onglet. Il est absolu et est positionné en haut, en bas, à gauche et à droite le tout à zéro. On peut aussi faire quelque chose comme M et on peut dire 12 et plus p, et on peut régler ça à 8 et 12 pour cent, onglet, Voila. Maintenant, je vais reculer jusqu'à ce que j'aie ma ligne de position ici. Si je veux tout cela sur une seule ligne parce que c'est position et toutes ces valeurs se rapportent les unes aux autres, je peux mettre pipe S puis développer, et juste comme ça j'ai toutes ces règles qui se rapportent les unes aux autres sur une ligne. C' est une caractéristique vraiment cool de sublime, l'autre est des photos individuelles, sur lesquelles nous reviendrons plus tard, mais celle-ci est vraiment utile. Dans ce cas, vous avez pipe S et met tout sur une seule ligne. C' est vraiment cool, vous pouvez faire plusieurs règles en même temps et vous pouvez mettre toutes vos règles sur une seule ligne. Super rad. 11. Informations supplémentaires: Disons que nous voulions un peu plus d'informations pour nos règles. Ce que nous pouvons faire est juste de mettre un plus après une abréviation, donc bg+, développez cela, et tout d'un coup vous avez tout ce dont vous avez besoin pour votre règle d'arrière-plan. Ici, nous pourrions écrire quelque chose comme ffo, appuyer sur Tab pour accéder à l'url, et nous pourrions fournir une valeur, appuyer sur Tabs, définir sa position x, donc c'est 12 pixels, Tab à nouveau, et nous pourrions définir 40 pixels et « No Repete ». Fantastique vraiment cool. Qu'en est-il de la frontière ? bg+ bordure de tabulation, il change à 10 pixels, tabulation solide. Qu' en est-il de l'onglet tiret ? Et on peut changer ça en rouge à nouveau. Ou je pense que ça pourrait être jaune. C' est vraiment cool d'avoir plus d'informations dans vos règles que vous avez juste à mettre un plus après eux. Évidemment, certains d'entre eux ne fonctionnent pas. C plus, rien de plus là-bas, mais des choses comme peut-être f+ ce que serait ce ? police. On y va. Vraiment cool, non ? 12. Préfixes du fournisseur: Disons un peu plus sur les préfixes fournisseur. La plupart du temps, les propriétés qui nécessitent des préfixes de fournisseur les appliqueront par Emmet. Donc la transformation TRF, je vais juste appuyer sur évasion ici. Donc vous voyez que ce n'est pas sublime faire ce truc sournois. Tab, regarde tout ça. Fantastique on peut dire, tous taper quand on veut là-bas. Et TRS ? Vous appuyez sur Transition de tabulation, d'accord, ou ce que nous voulons là-bas, annuler, qu'en est-il de l'ombre de texte ? Ombre du texte d'onglet. Donc Emmet ne préfixe pas ça tout seul. Donc, ce que nous voulons faire ici, c'est que nous voulons ajouter un tiret avant la main, puis appuyer sur, développer. Tout comme cela pas de préfixe tout sur les propriétés pour nous. Merci beaucoup. Donc, nous pourrions écrire quelque chose comme les décalages H sont 12 pixels onglet, montants flous. Très bien, vous avez la photo. Alors défaites. Si nous voulions simplement montrer un type de préfixe fournisseur, nous taperons le préfixe fournisseur de W tiret, puis nous pourrions développer, et je voudrais juste ajouter le kit web. Si nous voulions ajouter Opera, nous le ferions comme ça. Vraiment cool. Donc, comme ça, nous pouvons commencer à ajouter des préfixes fournisseur à nos règles. Ce qui est génial, c'est que si vous écrivez Sass ou Less, qui sont compilés en CSS, il n'ajoute pas automatiquement les préfixes du fournisseur. Cela rend la lecture et l'écriture de votre code beaucoup plus facile et votre compilateur devrait gérer les préfixes par eux-mêmes. 13. Abréviations Cool: va y avoir un tas d'abréviations et je ne vais pas vous les montrer toutes. Vous devez choisir ceux que vous voulez apprendre, ceux que vous voulez rechercher, mais il y a un couple que je trouve incroyable. L' un d'eux est la déclaration importante, alors vérifiez ceci. Nous allons P pour le rembourrage 12 pixels et bang. Nous étendons cela et nous obtenons une déclaration importante juste là, ou peut-être nous avons M et nous voulons juste nous assurer que c'est important et ensuite nous pouvons entrer dans la valeur. On peut dire 80 pixels. Plutôt cool, non ? Et si nous voulons faire une échelle de transformation très rapide, T-R, F pour la transformation, puis deux-points et S, et nous appuyons sur la tabulation et juste comme ça, nous pouvons mettre à l'échelle la valeur x et y. Je vais aller 1.2 et je peux appuyer sur tabulation et je peux aller à 1.2, mais c'est la même chose, donc je vais juste tout enlever et on y va. Nous avons une propriété d'échelle de transformation préfixée par le fournisseur. Ensuite est quelque chose que je n'aime pas vraiment faire et qui est de taper une nouvelle famille de polices. On peut aller à F, développer ça et voilà, on a une face de police, mais ce n'est pas super utile. Nous pouvons toujours tabuler entre la famille de polices et l'URL source, mais si je mets plus après cela et ensuite l'étendre, wow, vérifiez cela. J' ai maintenant une déclaration complète sur font-face. Je peux taper la famille de polices, ma famille de polices cool, puis j' appuie sur onglet et je peux changer le nom du fichier maintenant donc ma police et appuyez sur Tab, style de police, poids de police. C' est super cool. Ensuite est quelque chose que je n'aime pas faire beaucoup de, et ce sont mes cadres clés. À K-F, agrandissez. Wow. Regarde ça. Il a juste écrit tout ça pour nous. Je vais appeler cela mes cadres clés fondu appuyez sur l'onglet afin que je puisse changer mon de valeur à zéro pour cent si je le veux, et puis je peux appuyer sur la tabulation et taper dans l'opacité et le mettre à zéro, appuyez sur la tabulation va à deux. Maintenant, je peux régler ça à 100 pour cent si je veux. Je vais ensuite appuyer à nouveau sur l'onglet et taper op et développer cela, puis je vais le définir sur un. Tout comme ça, nous avons toute notre configuration de cadre clé complète. Notre animation de fondu. 14. // RACCOURCIS CSS: Nous avons couvert les abréviations CSS, mais il y a un tas d'autres choses qu'Emmet nous offre, en particulier dans Sublime Text. On va les couvrir ensuite. 15. Numéro d'incrément / de décrément: L' une des grandes choses à propos d'Emet est la fonctionnalité supplémentaire qu'il offre. Disons que nous avons fait un peu de CSS ici, nous avons dit 12 pixels, et je veux juste éditer cela très rapidement. Je vais appuyer sur Alt et utiliser les flèches de mon clavier pour monter ou descendre. Il l'incrémente de 0,1 pixels. Fantastique. Maintenant, si j'appuie sur Commande et Alt et monte et descend, il l'incrémente de 10 pixels, et si j'appuie sur Ctrl vers le haut ou vers le bas, vous verrez que cela ne fonctionne pas. Ce que nous devons faire, c'est que nous devons aller dans les Préférences Système et aller à Contrôle de Mission, et que nous allons changer Mission Control pour désactiver et Application Windows pour éteindre et maintenant, quand nous revenons au texte Sublime et appuyez sur Contrôle vers le haut ou vers le bas, il l'incrémente d'un. Vraiment cool. Nous n'avons pas besoin de taper sur le dessus de notre clavier, nous pouvons simplement utiliser des raccourcis clavier. Cela fonctionne également en HTML. 16. Maths à la volée: Maintenant, en tant que développeurs HTML et CSS, nous devons faire beaucoup de mathématiques, mais parfois notre cerveau obtient donc un attribut pas si bon en mathématiques. Les images sont vraiment cool. Si nous avons quelque chose comme la largeur ou la hauteur, nous pouvons faire quelques calculs à la volée. 100 moins 47, Command Shift Y 53, juste comme ça. Et plus 1 278 ? Je ne sais pas si tu le sais. Déplacement de commandement Y Voila. Qu' en est-il multiplié par deux changement de commande Y Voila. Qu' en est-il de moins 349 ? Commande Shift Y. assez cool. Qu'en est-il de moins 2 000 ? Ça devrait être assez facile. Commande Shift Y, vraiment cool. Vous ajoutez juste des pixels après cela. Vraiment cool. Je fais juste des maths à la volée. 17. Refléter la valeur CSS: Disons que nous avons quelques propriétés préfixées par le fournisseur ici et que nous changeons cela à 0.4, puis nous appuyons sur « Ctrl + E » pour développer et rien ne se passe parce que cela arrive parfois. Qu' est-ce qu'on fait ? Je croyais que c'était pour être productif ? Maintenant, je dois changer quatre lignes de code. Calme-toi. Tout ce que vous avez à appuyer est « Cmd + Shift + R » et il reflète les valeurs. Regarde ça. Voyez que vous pouvez même changer ça en, disons dix. Cmd + Maj + R. Bang. Incroyable. 18. Basculer les commentaires: Donc, nous n'avons pas encore couvert les commentaires. Donc normalement, dans le texte de sous-ligne, vous appuyez sur commande et barre oblique avant. Tout comme ça, votre ligne est commentée, mais parfois les commentaires ne fonctionnent pas si bien. Donc, avec Emmet, ce que nous pouvons faire est d'aller Alt, Shift, barre oblique avant et un jeu de commentaires 2. Souvent, un ensemble commun est meilleur, il est plus intelligent. Donc, juste comme ça, vous pouvez commenter votre code avec Emmet ou vous pouvez simplement utiliser le commentaire de sous-ligne par défaut. 19. Préprocesseurs CSS: Est-ce qu'il émet du travail pour les préprocesseurs comme Less et Sass, La réponse est oui. Si vous ne savez pas ce qu'est un préprocesseur, ne vous inquiétez pas, vous pouvez simplement ignorer cette vidéo. Je vais aller dans une autre classe, un autre tutoriel sur ce que sont les préprocesseurs si vous le savez, vérifiez ceci. Je vais rapidement installer Sass. Je vais aller à ma palette de commandes et je vais dire installer le paquet, rechercher SAS. Il suffit d'installer cela. Fantastique. Je vais ensuite définir ma syntaxe sur SAS, puis je vais styler un élément enfant. Nous pouvons dire, nous allons styler le contrôle UC E. Tout comme ça, nous pouvons utiliser émet pour coiffer nos feuilles de style Sass and Less. 20. // ABRÉVIATIONS HTML: Donc, nous avons couvert l'utilisation d'emmets pour accélérer rapidement l'écriture CSS, maintenant va être la même chose pour HTML. La première chose que je dois faire est de changer la syntaxe de mon fichier. Donc, je peux soit appuyer sur Command Shift P dans Sublime et taper HTML et définir la syntaxe comme ça. Ou je peux cliquer sur le texte brut ici et sélectionner HTML. Ou la dernière façon que je peux faire cela est juste aller commande S. Dans ce dossier, je peux l'enregistrer sous index.html. Tout comme ça, ma syntaxe de set est HTML. Maintenant, l'utilisation d'emmets pour écrire du HTML ressemble beaucoup à l'écriture de CSS. Donc, si je tape p et que je développe p, Control E ou tab, cela crée une balise de paragraphe. Si je fais div et j'appuie sur tabulation, il, l'étend à un div. Si je voulais créer un div avec une classe, je pourrais le faire. une classe, un peu comme CSS. Quand j'élargis cela, il devient un div avec une classe de certaines classes. La même chose avec une carte d'identité, my-cool div, vérifiez ça. Je peux aussi faire la même chose avec une travée. Par exemple. une certaine durée de refroidissement. C'est vraiment, vraiment puissant. Ce qui est aussi vraiment cool, c'est que dans un ul, par exemple, si j'appuie sur entrée et je tape li, ce qui est aussi assez cool. Si je devais taper dans .some-class, cela deviendrait normalement un div, mais parce que c'est à l'intérieur d'un ul, il devient un li. Quand je développe cela, il devient un li avec une classe de quelque classe, super puissant, super cool. C' est juste les bases de l'utilisation d'emmet à l'intérieur de HTML. Il y a encore beaucoup à couvrir, mais c'est assez pour vous exciter. 21. Classes et ID multiples: Tout comme dans nos fichiers CSS, nous pouvons avoir des éléments avec plusieurs classes et un identifiant. Si nous voulions écrire un ul avec un tas de classes sur une classe .red.amazing ul, et nous élargissons cela. Vous verrez qu'il obtient ces trois classes qui lui sont appliquées. Si nous voulons alors créer un div avec un id, avec un tas de classes sur. On pourrait écrire quelque chose comme ça. Nous n'avons pas besoin d'écrire div, mais je vais le faire de toute façon div et je vais mettre des cours dedans. Ensuite, je vais aussi mettre une pièce d'identité dessus. Quelque chose comme l'en-tête. Ok, donc c'est vraiment cool. Sur une ligne, nous avons ajouté un identifiant, nous avons ajouté trois classes différentes, et nous n'avons pas beaucoup écrit. Fantastique. 22. Types de balise: Certains éléments que nous écrivons en HTML ont un attribut appelé type. Donc, vous reconnaissez cela à partir d'une entrée. Donc, si nous devions développer cela, le type sera texte. Maintenant, vous pouvez également avoir un type de case à cocher ou un type de mot de passe, par exemple. Donc, un moyen facile de le faire avec HTML est d'aller entrée, deux-points et mot de passe. Lorsque vous développez cela, vous obtenez le type de mot de passe et il vous donne également un nom et des attributs ID. C'est plutôt cool. Vous pouvez donc taper le nom ici, appuyez sur « Tab », puis tapez l'ID. C' est vraiment très pratique. Vous pouvez également dire entrée, deux-points et case à cocher. Tout comme ça, le type est case à cocher. Il y a un nom et un ID. Fantastique. Vous pouvez également le faire avec une balise, ce qui vous donnera par défaut un HREF également. Mais, si vous deviez taper lien après le deux-points, cela vous donnerait une adresse HTTP ou si vous deviez taper le courrier et l'étendre, nous pouvons maintenant avoir un mail à lier, ce qui est génial si vous voulez cliquer sur un lien et il ouvre un email client. 23. Attributs HTML: Maintenant, qu'en est-il des attributs ? Eh bien, nous avons vu que la balise a lorsqu'elle est développée a l'attribut href, mais qu'en est-il des autres attributs ? Juste avec une balise, qu'en est-il de l'attribut cible ? Un emmet c'est assez facile. Il y a ces accolades carrées que nous pouvons ensuite écrire la cible égale soulignement vide, peu comme nous le faisons en CSS. Lorsque nous élargissons cela, nous obtenons un href et une cible. Parfois, il peut ne pas être aussi rapide, mais c'est certainement la même chose que CSS. Parfois, vous pouvez même copier à partir de votre fichier CSS dans votre fichier HTML. Fantastique. Si nous voulions avoir plusieurs attributs, peut-être comme TD, et à l'intérieur de notre TD, nous avons un colspan, et nous disons que colspan est égal à trois, puis notre rowspan est égal à deux. Alors si on le veut, on pourrait même mettre un titre là-dessus et dire : « Hé, là. » Ensuite, quand nous développons ceci, juste comme ça, nous obtenons tous ces attributs dans un seul élément. Fantastique, vraiment cool, vraiment utile, et beaucoup comme CSS. 24. Enfants, multiplication et numéros incrémentaux: À quel point Emmet nous rend-il vraiment productif ? Je veux dire, si nous voulions écrire 1 000 éléments de liste, comment ferons-nous ça ? Basé sur ce que nous avons appris jusqu'à présent, nous pourrions écrire ul, développer cela, appuyer sur « Enter » li, développer cela, écrire d'abord elem et ensuite nous pourrions aller li, étendre cela. Cela prend encore un peu de temps, je vais supprimer ça. Maintenant regarde ça, ul et puis je vais faire un plus grand que li, puis je vais étendre cela. Tout d'abord, nous écrivons les éléments d'un parent et les éléments enfants. Maintenant, annulons ça et multiplions ça par 10. Wow, regarde ça. Nous avons 10 éléments de liste. Incroyable. On pourrait en créer 100 ou 1000. Maintenant, ce que nous pouvons faire est que nous pouvons dire, elem 1, nous appuyez sur « Tab » maintenant et il va automatiquement au contenu de l'article numéro 2 de la liste. On peut aller elem 2, et ainsi de suite. C' est vraiment cool. Allons juste défaire ça un peu. Maintenant, regarde ça. À l'intérieur de chaque élément de la liste, nous pourrions alors mettre une travée avec une balise d'ancrage. Bam, regarde ça, quel point c'est génial ? Nous pouvons maintenant remplir le href. Si nous devons aller HTTP comme ça et taptaptaptapkaboom.com. Appuyez sur « Tab » ici et va ensuite au contenu de l'un que nous pouvons dire site Web, appuyez sur « A » il va à la prochaine href. C' est incroyable. Retourner cool. Maintenant, c'est même le niveau suivant. Retournons un peu ici. Nous avons maintenant URL, je vais créer 10 éléments d'élément de liste dedans. Mais maintenant, je veux conclure. Donc je vais aller li.some-class.some-, et puis il va mettre un numéro après ça. Quand j'étends ça, regarde ça. Il a juste mis un tas de chiffres pour moi, je n'ai pas besoin de les écrire. Vérifie ça. En utilisant ce signe de dollar, on peut en fait mettre des chiffres. Nous pouvons mettre trois chiffres si nous voulons, ou deux, ou quatre, ou ce que vous voulez, ou nous pourrions même revenir en arrière. Vérifie ça. Au négatif, puis quand nous élargissons cela, il va de haut en bas. Ou on pourrait même dire négatif 5 et donc ça va à 14 à 5. Si nous ne voulions pas partir du premier numéro, nous pourrions supprimer ce négatif et passer de cinq, et quand nous élargissons cela, il passe de cinq à 14. C' est des trucs dingues juste là. Si votre esprit n'est pas soufflé par ça et que vous ne voyez pas comment vous pouvez être plus productif en utilisant Emmet, je ne sais pas ce qui ne va pas chez vous. 25. Voisins et groupes: Nous avons couvert les éléments enfants maintenant qu'en est-il des éléments frères ? Si nous avions un div, et que nous avions « child1" comme ça, comment aurais-je « child2 ? » Si je devais aller « .child2" développer ça. « Child2" serait à l'intérieur de « child1" Je veux que « child2" soit à côté de « child1" Je veux qu'ils soient frères et sœurs. Comment on fait ça ? Eh bien, au lieu d'utiliser le symbole supérieur à, nous utilisons simplement le symbole plus. Donc, quand nous élargissons cela, nous avons « child1" et « child2 ». Mais maintenant que se passe-t-il si « enfant1" a un tas d'éléments à l'intérieur de ça ? Donc peut-être qu'il y a un 'ul' et il y a un 'li' et il y a trois éléments à l'intérieur, et je veux un 'tag 'à l'intérieur de ces trois éléments et j'appuie sur « Tab ». Eh bien, que s'est-il passé ? Je ne veux pas que mon enfant soit répété trois fois, je voulais juste que ce soit un « enfant2 ». Ce que nous devons faire ici, c'est, où ça commence ici, et dire « enfant1 », nous commençons par un crochet, puis juste avant le plus, nous fermons le crochet et nous disons, c'est un groupe. On pourrait mettre un groupe autour de la classe « enfant2", mais on n'a pas besoin de le faire. À la fin de la ligne, nous élargissons ceci, et juste comme ça, nous avons « child1" avec son contenu, ce qui est incroyable et nous avons « child2" sans contenu, qui est exactement ce que nous voulions. Maintenant, nous pouvons commencer à écrire notre HTML, HTTP, puis nous appuyons sur « Tab » et ainsi de suite. Incroyable. 26. Monter: Une autre façon de travailler avec les frères et sœurs et les enfants et la hiérarchie est d'utiliser la méthode de montée en hauteur. Si nous avons un div et à l'intérieur de ce div, nous avons un élément avec une classe de C1. À l'intérieur de cet élément, nous avons un autre élément avec une classe de C2 et à l'intérieur de celui-ci, nous en avons un autre pour la classe de C3. A l'intérieur de celui-ci, nous en avons un autre avec une classe de C4. Quand nous élargissons cela, nous avons une très belle hiérarchie en cours. Mais que se passe-t-il si je ne veux pas que mon élément de classe C4 soit là ? Eh bien, ce que je peux faire ici est au lieu d'utiliser ce symbole plus grand que, je peux utiliser ce petit symbole de caret, sorte que lorsque j'appuie sur développer, vous verrez que l'élément avec une classe de C4 est maintenant assis à côté de la classe de C2. Si je défais cela et que je mets un autre de ceux là-dedans et que je développe, vous verrez que la classe C4 est maintenant assise à C1. C' est essentiellement dire, montons un niveau et montons un niveau, et hé, si nous devons même en faire un autre et étendre cela, ce serait un frère à la balise div initiale. Plutôt cool, non. 27. Texte HTML: La prochaine chose est, qu'en est-il du contenu ? Qu' en est-il du texte ? Si nous devons écrire une balise et développer cela, nous devrions alors écrire la référence h, puis onglet, puis écrire le contenu. Mais il y a une autre façon de le faire. Donc A, nous mettons ces accolades à l'intérieur des accolades, nous disons ensuite le contenu ici, puis nous élargissons cela et le contenu va là. Maintenant, si nous voulons dire du contenu ici, et faisons quelque chose comme ça, multiplié par 10, nous élargissons que le contenu ici est un, jusqu'à 10. C' est incroyable. Tout comme ça, vous pouvez écrire votre contenu à l'intérieur de vos abréviations. Fantastique. 28. Lorem Ipsum: Peut-être que votre travail est de créer ce beau site, mais il n'a pas encore de contenu, qui devrait sonner quelques sonnettes d'alarme parce que comment pouvez-vous vraiment concevoir un site ou développer le site il n'y a pas de contenu ? Mais parfois, vous devez le faire, et parfois c'est vraiment génial de le faire. Mais vous n'avez toujours pas de contenu. Donc, en HTML, comment générons-nous un ipsum Lorem ? Eh bien, ces sites Web et plug-ins et toutes sortes de choses, mais regardez ça. Lorem200, développez voila, tout un tas de Lorem ipsum. Qu' en est-il de Lorem10 ? Juste un peu de Lorem ipsum. Qu' en est-il de lorem2 Control E, Lorem ipsum, juste deux mots. Donc juste comme ça, vous pouvez générer tout un tas de déchets. Cela fonctionne également dans les fichiers CSS, mais je l'utilise principalement à l'intérieur d'un fichier HTML. C' est incroyable. 29. Abréviations inconnues: Jusqu' à présent, il a été pêche, il y a eu très peu d'erreurs, les choses se sont bien passées. Mais que se passe-t-il si vous écrivez une abréviation entière et que vous essayez de l'étendre et que rien ne fonctionne ? Eh bien, essayons ça. Hey, on a cet élément cool avec la classe de « hey » et on veut l'étendre. Donc, nous tapons sur « tab » et il n'est pas en expansion est juste en utilisant l'onglet comme il devrait être utilisé. Donc nous les forçons avec « Control E », et puis nous avons réalisé que, Oh, en fait, ce n'est pas une classe et ça a créé un « hey » éléments qui est un peu gênant. Si les choses ne fonctionnent pas avec l'onglet, il y a de bonnes chances qu'il y ait une erreur. Peut-être avez-vous écrit un attribut un peu étrangement, vous avez raté une citation par exemple, et vous l'développez et rien ne fonctionne ou même votre contrôle ne fonctionne pas. Il y a un problème. Réparez-le. Si vous utilisez quelque chose comme réagir et que vous avez, « SomeCoolComponent », et que vous appuyez sur l'onglet et que ce n'est pas en expansion, c'est bon. Vous appuyez simplement sur « Control E », et comme ça, vous avez vos composants personnalisés. Si vous appuyez sur « Command Shift » et citez comme ça, vous pouvez l'obtenir dans une seule balise. On parlera de ça dans la section suivante. Si vous appuyez à nouveau sur ce raccourci, « Command Shift » et citation, vous pouvez obtenir la balise de fermeture. On y va. C' est ce qui se passe si vous faites des erreurs ou si vous essayez de développer une balise qui n'existe pas en HTML par défaut. 30. Abréviations préférées: Il y a des tonnes d'abréviations que vous pourriez apprendre ou que vous devriez apprendre ou que vous voudrez peut-être apprendre, mais s'il y a quelque chose que vous faites particulièrement souvent, allez la chercher, apprenez-la. Voici le site Web sur lequel vous pouvez trouver toutes les abréviations sur. Cela dit, je vais vous montrer quelques-unes de mes préférées. L' un de mes préférés est un : mail. Lorsque vous l' agrandissez, comme ça, il est écrit « mailto ». Un autre est le lien. Lorsque vous développez, il va juste à « feuille de style ». Mais si vous allez au lien, cliquez sur CSS et vous développez cela, il met votre fichier CSS là tout de suite. La plupart du temps, mes fichiers CSS sont appelés style.css. C' est fantastique. Maintenant, la dernière est quand vous devez écrire votre étiquette de document et votre étiquette de tête et votre balise de corps et tout ce genre de choses, ce qui est vraiment frustrant. Eh bien maintenant, tu écris juste un point d'exclamation parce que ça te met en colère. Je ne sais pas. Ensuite, vous l'agrandissez, et juste comme ça, tout cela est écrit pour vous. Ce sont quelques-unes de mes préférées, j'aimerais savoir ce que sont tes préférées. 31. Nommage BEM: Si vous aimez les conventions de nommage B-E-M ou BEM, vous allez adorer cette fonctionnalité. Si vous n'êtes pas dans les conventions de dénomination BEM ou si vous n'avez aucune idée de ce que c'est, c'est bon, vous pouvez simplement passer directement à travers. Je vais faire un cours dessus plus tard. Mais en utilisant un filtre Emmet, nous pouvons ajouter toutes les classes BEM dont nous avons besoin sans avoir à faire autant de travail. Vérifie ça. Si nous écrivons le contenu point de tiret de bloc soulignent grand et développez cela, alors contrôlez E. Je vais le mettre par défaut. Mais, si nous devions faire le tube BEM et c'est un filtre, contrôlez E. Vérifiez que le bloc de contenu, le bloc de contenu gros. Annulons cela et écrivons en orange soulignement point, puis développez ce bloc de contenu gros, le bloc contenu orange sont maintenant des classes sur cette div. Incroyable. Allons annuler cela et à l'intérieur d'ici, mettons une classe d'avatar donc, soulignons, soulignons l'avatar, puis élargissons tout cela. Alors juste comme ça, cette classe d'avatar a un bloc de tiret de contenu devant elle. Il adhère aux conventions de dénomination BEM. Ce qui est plutôt gentil. C' est à mon avis une double victoire parce que vous écrivez du code qui est vraiment descriptif. Il adhère à une convention et vous l'écrivez rapidement. 32. Assembler le tout: Avec EMMET, vous pouvez écrire un site Web entier en développant une abréviation, mais cela prend souvent beaucoup plus de temps que cela ne vaut la peine. Ne vous laissez pas trop prendre dans l'écriture d'abréviations longues et complexes. Ecrivez-le en morceaux gérables. EMMET est conçu pour être productif et non pour prendre du temps. Si vous pratiquez et que vous pouvez écrire CSS et HTML très rapidement, EMMET ne remplace pas une bonne planification. EMMET combiné avec une bonne planification est le chemin du vrai ninja. Je suis mort sérieux, c'est le chemin. 33. // RACCOURCIS HTML: Développer les abréviations n'est pas tout ce qu'Emmet peut faire, il y a un tas d'autres choses qu'il peut faire pour vous dans vos fichiers HTML. La plupart d'entre eux exigent que vous appreniez un nouveau bouton de raccourci clavier, mais je vous dis que ça en vaut la peine. 34. Balises Balance: Si vous avez beaucoup de hiérarchie en cours ou que votre code est assez complexe, l' une des meilleures choses que vous pouvez faire est d'équilibrer vos balises. Vérifie ça. Je vais appuyer sur « Control J ». Contrôlez J à nouveau, et vous verrez qu'il sélectionne l'ouverture et la balise de fermeture. Lorsque j'appuie à nouveau, il va à la zone de contenu. Si j'appuie sur « Control D », il va continuer à sélectionner vers l'extérieur. Contrôlez D à nouveau, et vous verrez qu'il sélectionne les balises A parent, puis Control D, encore une fois, les balises li parent et ainsi de suite. Vous verrez ici qu'il sélectionne le contenu entre l'ouverture et la balise ul de fermeture. Contrôle D, il sélectionne les tags ul, Contrôle D, même chose, même chose. Quand j'appuie à nouveau sur « Control J », ça me mènera vers l'intérieur jusqu'à ce qu'il arrive au point le plus intérieur. C' est comme ça que vous équilibrez vos accolades. Dans Sublime, vous pouvez y accéder si vous oubliez le raccourci clavier via votre palette de commandes, donc Command Shift P et vous tapez juste en équilibre. On y va. Équilibre vers l'intérieur, solde vers l'extérieur. Il vous donne également vos raccourcis clavier sur le côté droit. Vous pouvez également accéder à Outils et Palettes de commandes si vous ne connaissez pas le raccourci clavier pour cela. C' est un moyen vraiment utile de naviguer dans votre code. C' est rapide, c'est facile, et souvent m'aide à éviter les erreurs confuses et vraiment bizarres. 35. Balise Split Join: Il y a des moments où vous devez fractionner ou joindre une balise. En réaction, par exemple, si vous devez écrire une image puis l'étendre, ce ne serait pas une balise de réaction valide. Donc, ce que vous devriez faire ici, c'est que vous devez soit écrire une image comme ça, ce qui est bizarre, soit vous devriez la fermer sur la balise d'ouverture. Avec Emmet autour, tout ce que vous devez faire est d'appuyer sur Commande, Maj et citation. Tout comme ça, il fournit la balise de fermeture. Si vous le refaites, il se refermera. 36. Sauter au Point d'édition du contenu: Ce petit raccourci est plutôt cool lorsque vous écrivez des expressions Emmet. Si nous devons écrire des entrées, du texte, et ensuite nous devons développer cela, si je voulais sauter à id et puis revenir au nom avant que j'aie écrit quoi que ce soit, j'appuie juste sur Control Alt et à droite, ou à gauche. Ensuite, je peux sauter entre ces deux points d'édition. Vraiment utile. Dès que j'écris quelque chose et que je saute en arrière, je ne peux plus sauter en avant parce que j'ai déjà changé le contenu. 37. Sélectionnez l'article suivant et précédent: Nous avons un tas de contenu et je veux passer rapidement à l'élément suivant. Comment puis-je faire ça ? Nous allons commander Shift et plus grand que. Juste comme ça, on peut sauter entre nos éléments ou si on veut reculer, on va faire moins qu'assez facile, non ? C'est vraiment utile. 38. Supprimer une balise: La façon par défaut de supprimer ces balises, si nous ne voulons plus « li », serait simplement de cliquer dessus, et peut-être déplacer une souris, puis de les supprimer. Mais il y a un moyen plus rapide, « Command » et « Quote », plus de tag. Lorsque vous l'utilisez en conjonction avec d'autres raccourcis, la vie devient simple. 39. Renommer une balise: Donc, nous avons fait un tas de codage, notre site est prêt, mais nous avons fait quelques erreurs, et maintenant nous devons changer certaines balises. Donc, l'une des façons que nous pouvons faire cela, la façon par défaut, est juste d'aller à la balise d'ouverture. Sélectionnez le texte UL, puis modifiez-le en OL. Si nous appuyons sur « Entrée » ici, cela nous donne un résultat indésirable. Donc supprimons cela et ensuite nous pouvons aller jusqu'à la balise de fermeture et taper « OL ». C' est la façon par défaut. Maintenant, regarde comme c'est rapide. Si je vais « Command Shift K », il sélectionne à la fois l'ouverture et la balise de fermeture, et maintenant je peux simplement taper « UL » ou « Div ». Maintenant, regarde ça. Si nous sélectionnons tous ces Li et appuyez sur « Command Shift L », ou nous allons sélections, diviser en lignes, puis nous appuyons sur « Commande » et « Flèche gauche ». Ce qui se passe ici, c'est que nous avons sélectionné toutes les lignes, et maintenant nous pouvons taper sur chaque ligne. Donc, je vais appuyer sur ma « flèche droite », puis à partir de là, je vais appuyer sur « Command Shift K » pour renommer mes balises. Ensuite, je peux juste changer ces deux travées ou les balises A ou tout ce que je veux. Vraiment puissant. 40. Paire assortie Goto: Vous avez peut-être beaucoup de contenu, et lorsque vous faites défiler vers le bas, vous ne savez pas où vous êtes. Même s'il y a des lignes et du texte de sous-ligne ou que certains éditeurs aient un moyen plus clair de distinguer ce qui est une balise de fermeture de votre balise d'ouverture. Un moyen vraiment facile est juste de cliquer quelque part près de cette balise d'ouverture ou de fermeture, puis d'aller Control Shift T, et il va au début de celui-ci, puis Control Shift T, puis, il va à la fin. Contrôle Shift T à nouveau, retour à l'ouverture. Il trouve sa paire. Ce ne serait pas génial si tous les gens pouvaient trouver leur paire exacte dans l'univers juste avec Control Shift T ? 41. Emballer avec une abréviation: Nous avons appris à spécifier le contenu d'une abréviation. Lorsque nous développons ceci, vous verrez que mon contenu 1, est le texte à l'intérieur du dernier enfant de cette abréviation, fantastique. Mais maintenant que se passe-t-il si nous avons déjà le contenu ? Eh bien, nous pourrions juste appuyer sur A et ensuite étendre cela, mais alors le contenu ne serait pas à l'intérieur de cet élément. allons annuler, ce que nous pouvons faire ici, c'est de sélectionner le contenu et ensuite nous allons l'envelopper. Donc, contrôlez W pour envelopper. Hey, on peut mettre une abréviation ici. Donc div ou nous pourrions mettre un nom de classe, ma classe, ou nous pourrions écrire une abréviation entière donc span et à l'intérieur de la travée est ma classe, et à l'intérieur de celle-ci est une balise, vraiment cool. Appuyez sur « Entrée » et voilà. Nous venons d'envelopper notre contenu avec un tas de tags. Il ne doit pas seulement être le contenu seul, nous pourrions envelopper cet élément entier avec une abréviation. Donc, contrôlez W et peut-être que vous voulez juste les écrire ou peut-être div.my-cool-class. Juste comme ça, il le met en retrait pour nous, fantastique. C' est comme ça qu'on s'emballe, je ne vais pas l'emballer pour toi. 42. Basculer le commentaire: Parlons de commentaires. Dans Sublime, si nous appuyons sur « Command » et « Slash », il commente, si nous appuyons à nouveau, il ne commente pas. Dans Emmet, si nous appuyons sur « ALT », « Shift » et « Slash », cela fait exactement la même chose, donc vraiment facile à faire. Mais maintenant, parlons des commentaires de niveau suivant. Si nous avons un tas de divs à l'intérieur des divs, et qu'ils ont tous des noms de classe, diapositive .class-1 et à l'intérieur de .class-2. A l'intérieur de cela est .class-3 et à l'intérieur de cela est .class-4 et nous élargissons cela. On a fait une erreur, là-bas. Nous élargissons cela. Ce qui se passe, c'est que, les balises d'ouverture sont géniales parce qu'elles vous disent quelle classe il est, mais cela ne vous indique jamais quelle classe il est quand il se ferme. Ce que nous pouvons faire ici, c'est utiliser un filtre, vous pipe et vous appuyez sur « C », puis vous l'agrandissez. Ensuite, il met des commentaires, et il vous dit que, « Hey, nous venons de fermer la classe 4, nous venons de fermer la classe 3". Ceci est vraiment utile lorsque vous avez une page vraiment longue comme URL, et à l'intérieur de l'URL, vous avez beaucoup d'éléments de liste. Vérifie ça. Maintenant, vous n'êtes pas vraiment sûr quand vos divs se ferment et quels divs il s'agit, mais maintenant il vous le dit. Plutôt cool. 43. Mettre à jour la taille de l'image: Maintenant, imaginez que nous avons une étiquette d'image et que nous avons cette image de visage riche. Un visage riche, c'est moi qui tire un visage. Ouais, maintenant, j'ai cette petite image de visage riche que je veux mettre là à la place de l'image de visage riche.Donc, nous revenons à notre index.html et nous change de visage riche petit, et maintenant je dois changer ma sagesse, la hauteur des yeux, qui est toujours une telle mission. Comment puis-je savoir à quel point c'est grand, alors je vais vérifier ça. Vous allez juste contrôler Shift I et [inaudible] largeur et hauteur réglées à 300. Il sait à quel point ces images sont grandes. L' utilisation de ce raccourci clavier fonctionne également très bien avec le plugin sublime nom de fichier automatique. Vous devriez vérifier. 44. // AUTRES CHOSES EXCELLENTES D'EMMET: Vous avez vu certains de ce qu'Emmet peut faire dans vos fichiers HTML et CSS, mais il y a peu de choses que vous devriez savoir. Les prochaines vidéos vont vous montrer ces choses. 45. Encoder une image aux données: Ça va te faire exploser l'esprit, ça m'a fait exploser l'esprit. J' ai cette image, elle s'appelle icon.png, une icône incroyable. Maintenant, à l'intérieur de Safari ou d'un autre navigateur, je l'ai ici. Mais, si nous allons au Finder et nous devons supprimer notre icon.png, supprimer, et puis nous devons actualiser, il y aura un problème. Nous retournons à notre Finder, appuyez sur Commande Z, notre icône revient, nous rafraîchissons, Dieu merci, c'est encore là. Si nous allons à Sublime Text maintenant, pour éviter que cela ne se produise, et pour un tas d'autres raisons, si nous ne voulions pas compter sur un fichier réel dans notre système de fichiers ou sur un serveur, ce que nous pourrions faire, c'est que nous pourrions encoder ceci. Plutôt cool. Mais, normalement cela prend un peu de réflexion, vous avez besoin d'un convertisseur ou autre, mais Emmet a ceci trié. Vérifie ça. Contrôlez Maj D, et tout comme ça, il convertit votre image en texte brut. Je sais que c'est un peu long, mais il a ses avantages. Vérifions maintenant ça. On l'enregistre, va dans notre Finder et on l'enlève. Au revoir. Ensuite, nous retournons à Safari, nous rafraîchissons, vérifions ça. On n'a plus besoin d'image, on a tout en texte. C' est cool ? 46. Fusionner des lignes: Parfois, vous avez du contenu sur plusieurs lignes, soit un HTML ou un CSS, et vous voulez qu'ils soient tous sur une seule ligne. Donc, la façon la plus simple de le faire une fois que vous avez vraiment votre contenu est de le sélectionner. Donc, dans ce cas, je vais juste sélectionner tout et puis vous appuyez sur « Commande Shift P » pour mettre vos palettes en place. Vous tapez ensuite fusion ou quelque chose de similaire. Vous appuyez sur « Entrée » et comme ça, tout est en une seule ligne. C' est la même chose avec CSS. Vous avez un tas de règles et vous les sélectionnez, commande shift P, fusion des lignes, juste comme ça, tout est sur une seule ligne. Vraiment utile. Maintenant, l'autre façon de le faire, si vous pouvez faire un peu de réflexion, c'est de l'écrire comme ça. Donc, vous allez ul dot ma liste, li multiplié par trois. Ensuite, vous mettez un tuyau parce que vous voulez le filtrer et que vous voulez qu'il soit une seule ligne. Ensuite, vous l'agrandissez et juste comme ça, tout est en une seule ligne. Alors tu pourras dire : « Hé, là. » Appuyez sur « Tab ». « Comment ça va, appuyez sur « Tab » va ? » Vraiment cool, non ? C'est exactement la même chose avec CSS. 47. La palette de commandes: Si vous êtes comme moi ou la plupart des autres humains, vous êtes probablement oublier ces raccourcis clavier. Heureusement, dans un texte sublime, il est vraiment facile de trouver les raccourcis. Vous allez dans « Outils », « Palettes de commande », ou vous pouvez appuyer sur « Commande Shift P », si vous vous souvenez de ce raccourci, puis d'ici vous pouvez voir ce que font toutes les commandes Emmet, alors Emmet et là nous allons. Toutes les commandes sont là avec tous les raccourcis clavier sur le côté droit. Super, super pratique. 48. Paramètres d'Emmet: Parfois, tu n'aimes pas vraiment ce qu'Emmet fait. Eh bien, je vous encourage à aller vérifier les paramètres. Dans Sublime Text, c'est assez facile, vous allez Sublime Text, Préférences, puis vous allez dans Paramètres de package, Emmet, puis consultez les paramètres par défaut. Ensuite, pour changer l'un d'entre eux, vous devez ouvrir votre propre fichier de paramètres. Nous allons à Paramètres de package, Emmet, puis Settings-User, et puis ce que vous pouvez faire est si vous n'aimez pas quelque chose, vous pouvez simplement copier cela et ensuite mettre sur ces accolades parce que c'est un objet adjacent et puis vous venez de changer cela, enregistrer ça. Vous devrez peut-être redémarrer Sublime Text ou votre éditeur de code avant de commencer à fonctionner. C' est ainsi que vous mettez à jour vos paramètres. Avoir une retraite paramètres par défaut est beaucoup de commentaires ici qui vous disent exactement ce qui se passe. recherches en ligne si vous avez besoin d'aide en essayant de comprendre ce que cela signifie. 49. Filtres: Parlons des filtres. Nous avons vu des filtres en action dans les vidéos d'abréviation HTML et CSS, mais je vais vous montrer comment les faire et quelques exemples. Qu' est-ce qu'un filtre ? Eh bien, faisons un exemple d'abord. Donc, vous avez un div, et vous avez un ul, et vous avez trois objets li à l'intérieur de ça. Lorsque vous développez cela, il les place en plusieurs lignes. Mais si vous ne voulez pas ça, et que vous voulez tout sur une seule ligne, vous mettez un brochet et S. Maintenant, ce brochet est le filtre, et plus haut le filtrer, c' est le S. Alors vous allez contrôler E et étendre ça, et tout serait sur une seule ligne. Fantastique. Maintenant, au lieu de S, vous pourriez écrire du jade, et ça créerait un balisage de jade pour vous, comme ça. Ou vous pouvez écrire haml, et cela va créer un balisage haml pour vous. Vraiment cool. Maintenant, si votre ul avait un cours dedans, ça s'appelle Ma liste. Ce qui est vraiment cool ici, c'est qu'au lieu de haml, nous pourrions écrire c, ce qui signifie que je veux des commentaires. Lorsque nous développons ceci, nous obtenons ces commentaires à la fin de nos éléments avec la classe, et dit, « Hé, nous venons de fermer cette balise. » C' est comme ça que vous utilisez les filtres. Il y en a beaucoup plus. Va les vérifier en ligne. 50. // PRODUCTIVITÉ AVEC SUBLIME: Les prochaines vidéos montrent comment être un peu plus productif dans Sublime Text, mais ce n'est certainement pas tous les moyens. Je vous encourage également à rechercher comment accélérer toutes sortes de tâches, pas seulement dans votre éditeur de code. 51. Sans souris: Maintenant, quand vous tapez, puis utilisez une souris, puis tapez puis utilisez une souris, cela devient vraiment frustrant et ce n'est pas productif. Parfois, vous ne savez même pas où est votre souris, mais vous savez où est votre petit curseur. Peut-on simplement ne pas utiliser la souris du tout. Qu' en est-il du simple fait d'utiliser le clavier ? Je vais vous montrer quelques choses qui vous aideront à utiliser le clavier uniquement. Les raccourcis clavier qu'ils ont vraiment utile de connaître. Je sais que vos esprits explosent probablement avec tous les autres raccourcis clavier que vous devriez connaître, mais ceux-ci sont vraiment utiles, surtout dans Sublime. Le premier que je voudrais vous montrer est l'utilisation de la commande. Si vous appuyez sur « Commande » et à gauche ou à droite, il saute au début ou à la fin de la ligne. Si vous utilisez la commande et vers le haut ou vers le bas, elle passe au début ou à la fin du document. Allons en haut du document appuyez sur « Commande » et à droite, et nous allons à la fin de cette ligne. Maintenant, quand on appuie sur « Down », ça va à la fin de cette ligne. En bas, en bas, en bas, en bas, et ainsi de suite. Maintenant, la commande à gauche va au début de cette ligne et si on monte, monte, monte, et ne reste plus au début de cette ligne, mais c'est bon. Commande gauche, il va au début de cette ligne. Vraiment cool. Maintenant, qu'est-ce qu'Alt fait ? Eh bien, Alt et à droite, il saute au mot suivant. C'est plutôt cool. Parfois, il fait des choses bizarres comme il ne saute pas tout à au mot suivant et peut sauter au personnage suivant s'il y a des caractères spéciaux. Comme cet Alt et à gauche, nous allons juste sauter au début de Li. À gauche, nous sauterons au bout du foin, et ainsi de suite. Que fait le décalage ? Passez dans le droit Aha, il crée une sélection. Vraiment utile si vous voulez copier et coller. Donc, « Commande C » pour copier, puis nouvelle ligne et coller. Maintenant, il y a un moyen beaucoup plus facile de copier et de coller. Nous pouvons appuyer sur « Commande », « Maj » et vers la gauche et il sélectionne toute la ligne. Maintenant, nous pouvons couper cela, donc Commande X et maintenant nous pouvons appuyer sur « Command backspace » pour supprimer toute la ligne et retour arrière et nous y allons. Plus de ligne et nous n'avons pas à appuyer sur « Backspace » 1000 fois. Si vous voulez quelque chose au milieu de supprimer aligner complètement et écrire un peu à peu, vous pouvez appuyer sur « Alt » et « Retour arrière » et il ne supprimera pas les choses morceau par morceau, ce qui est parfois assez cool. Maintenant, si vous voulez sélectionner un mot que vous êtes au milieu de, vous appuyez simplement sur « Commande D » et il sélectionne ce mot et si vous voulez sélectionner la ligne entière, vous appuyez sur « Commande L. » C'est vraiment utile pour sélectionner des lignes entières, des mots entiers. C' est vraiment rapide. Super. Une autre façon de le faire est simplement en appuyant sur « Alt ». Alt à droite et à droite à nouveau. Puis Alt décaler à droite. Ensuite, vous pouvez sélectionner mot à mot au lieu d'essayer de sélectionner un peu à peu. Vous pouvez commencer à voir ce que font les commandes Alt et Shift. Ils sont vraiment, vraiment puissants. Parfois, nous utilisons aussi le contrôle dans certains raccourcis, mais je ne vous montre pas vraiment ce que le contrôle peut faire en ce moment. L' une des choses les plus utiles que je vais vous montrer maintenant est si vous devez sélectionner ces trois lignes puis les copier et nous devons passer à UL hors série, et nous les avons collés, les choses ne sont pas si belles. Lorsque vous le collez à partir d'une autre zone qui a une indentation différente, vous pouvez utiliser « Command Shift V » et il coller en place, vraiment, vraiment utile. Une autre chose est, est-ce que, que se passe-t-il si vous vouliez coller ces choses dans un ordre différent ? Eh bien, montons quelques lignes et copions hey, copions là, et copions comment vous. Ensuite, nous descendons ici et puis revenons en arrière, appuyez à nouveau sur « Tab », puis « Alt command V. » Qu'est-ce que ça fait ? Eh bien, regarde ça. Il conserve l'historique de toutes vos copies. Hey, nous pouvons commencer par la façon dont vous appuyez sur « Entrée  », « Commande Alt V », puis nous pouvons dire là, comment vous y êtes, puis Commandez Alt V et ensuite nous pouvons dire hé, ou nous pourrions même coller tout un tas d'alliés. Vraiment cool. Ce sont des façons sympas de copier et de coller. Maintenant, que se passe-t-il si vous voulez ajouter une ligne rapidement en dessous ou rapidement au-dessus ? « Command Shift Enter » un ci-dessus. « Commande Entrer » un ci-dessous. C' est à peu près la même chose que d'entrer. J' aime vraiment « Command Shift Enter ». L' autre chose qui est vraiment cool est quand vous avez un tas de texte sélectionné, vous appuyez sur « Tab », il va les indenter et si vous appuyez sur « Shift » onglet, il va les annuler. Super utile plutôt que de le faire ligne par ligne. La dernière chose que je veux vous montrer ici, c'est que si vous écrivez un morceau de texte, alors disons que vous venez d'écrire comme href. Vous appuyez sur « Égal », vous n'avez pas besoin d'appuyer sur deux jeux de guillemets. Vous appuyez juste dessus une fois et votre curseur est au milieu de ces deux guillemets. Vraiment utile. Vous pouvez alors écrire quelque chose. Un autre bon exemple de ceci est si je devais sélectionner « Comment », puis j'ai dû appuyer sur « Shift » et citation, et je vais envelopper ce mot avec des guillemets. Ou je l'enroulerais avec des crochets ou avec des crochets. Vraiment, vraiment cool. Ce sont quelques raccourcis que j'utilise dans Sublime. Il y en a une tonne de plus. Si vous voulez vraiment savoir si quelque chose peut être fait pour accélérer le processus, faites quelques recherches. Il sera probablement disponible ou quelqu'un aura créé un plug-in qui vous permettra de le faire. 52. Diviser en lignes: L' une des choses les plus cool que je trouve à propos de Sublime Text est la possibilité de diviser un tas de texte en lignes. Je vais appuyer sur Commande A, les sélectionner tous, puis je vais à Sélection, Split en lignes, mais nous pourrions utiliser le raccourci clavier, donc Command Shift O, et tout d'un coup, nous avons un tas de lignes sélectionné. Si on recommence à espacer ici, on peut écrire un tas de trucs, mais ce n'est pas trop utile. Si j'appuie sur Commande et à gauche, cela va au début de chacune de ces lignes. De là, je peux faire quelque chose comme div et développer. Je peux ensuite sélectionner la balise de fermeture, couper cela, appuyer sur Commande et vers la droite, puis, coller cela. Il le fait pour chaque ligne. C' est vraiment, vraiment puissant. 53. Navigation par onglet: Lorsque vous avez un tas d'onglets ouverts, il est vraiment frustrant d'aller avec votre souris, puis cliquez, puis cliquez sur, puis cliquez sur. Il y a deux façons de faire ça. Il imite vraiment Google Chrome, de sorte que vous pouvez appuyer sur Commande un, deux, trois pour naviguer entre vos différents onglets. Parfois, vous avez tellement d'onglets ouverts que vous ne savez pas quel onglet vous êtes ou sur quel onglet vous voulez aller. Vous pouvez simplement appuyer sur Tab de contrôle et il va tourner entre vos onglets ou Control Alt Tab et il va tourner dans l'autre sens, ou si vous voulez être vraiment intentionnel sur la façon dont vous êtes allé, Commande Alt à droite, Commande Alt à gauche. Il existe trois façons de naviguer entre vos onglets. J' utilise habituellement l'onglet Contrôle, ou si j'ai quelques onglets ouverts, Commande un, deux, trois. Super facile, super simple. 54. Sélecteur d'Emoji: Quand tu écris des choses comme, « Oh mon, j'aime les licornes », tu as juste besoin de mettre un emoji là-dedans, non ? Comment on fait ça ? Sur Mac, c'est vraiment facile. Vous allez Contrôle, Commandement et Espace. Juste comme ça, vous pouvez chercher la licorne, voilà. Ensuite, on a juste mis la licorne là-dedans. Fantastique. Si lorsque vous faites cela, votre écran ressemble à ceci, alors vous appuyez simplement sur ce petit bouton sur le côté droit ici et il devient cette petite pop-up. La prochaine fois que vous l'utilisez, vous allez à Contrôle, Commande et Espace, puis, votre sélecteur d'emoji arrive. Super pratique pour les emojis. Oui. 55. // CONCLUSION: Maintenant tu te sens proche de droite ? Dial matriciel ou un centre de hacker de classe mondiale puisque vous êtes comme M. Hacker, ou M. Near ou Mme Near Trinity, qui que vous pensez être. J' ai un défi pour vous et une question. Le défi est, je veux que vous écriviez un site Web en une seule abréviation et que vous publiez cette expression dans votre galerie de projet. Tout le monde peut copier, coller et agrandir et voilà, ils devraient avoir un site Web. Alors la question est, s'il vous plaît dites-nous, que devrions-nous faire avec tout le temps supplémentaire que vous économiserez une fois que vous commencerez à utiliser Emmet. Ces deux choses que je veux que vous fassiez maintenant. Amuse-toi bien avec eux. C'est la fin du cours. Ils sont cependant beaucoup plus de façons d'accélérer votre productivité, surtout lorsque vous codez et surtout lorsque vous êtes dans un texte sublime. Si vous avez apprécié le cours, veuillez le consulter et le partager avec tous ceux qui, selon vous, en profiteront. Si vous souhaitez rester en contact, consultez mon site Web et suivez-moi sur les réseaux sociaux. Je suis @TAPTAPKABOOM sur la plupart des plates-formes. D' accord. A bientôt. Au revoir.