Le guide du petit moussaillon

Un condensé de raccourcis utiles

Mar 8 · 6 min read

Tables des matières :

1_ Pourquoi des raccourcis ?

2_Workflow

  • éditeur de texte (atom)
  • plugins
  • OS (mac — les raccourcis sont donnés avec un clavier mac. À vous de faire la correspondance entre ctrl et cmd selon votre OS)

3_Raccourcis dans Atom

  • sélection et déplacement
  • syntaxe html avec emmet

4_Terminal

  • iterm
  • quelques exemples de syntaxe
  • list d’alias

5_Dactylographie

  • l’importance de pratiquer l’ art de la frappe clavier (typingclub)

Edit : L’éditeur dont les plugins présentés ci-dessous est « Atom ». La plupart existent pour les autres éditeurs de texte je pense, à vous de les chercher ou bien embarquez vous donc sur Atom !

Les raccourcis quant à eux sont donnés et fonctionnels sous Mac.

1 • Pourquoi utiliser des raccourcis ?

Il y a quelques années de ça, lorsque je démarrais mes études de graphisme, j’ai eu la chance de rencontrer un « transmetteur » qui avait cet intérêt et défendait coûte que coûte l’utilisation et l’apprentissage des raccourcis.

Apprendre dès le début les raccourcis que nous offrent certains plugins ou programme, c’est obtenir de bonnes habitudes et nous offrir un gain de temps et de productivité remarquables sur la durée. Dites vous que c’est plus long de désapprendre de mauvaises habitudes pour de meilleures plutôt que faire un petit effort pour chercher la commande clavier d’une action.

Mais ce n’est pas tout ! Quand vous cherchez un raccourci, quand vous faites l’effort de l’utiliser et de le mémoriser et bien vous faites une sorte de « Hash » dans votre cerveau :

{ “ cmd + a ”=> sélectionne tout le texte }

Il est évident que je ne prend pas en compte VIM qui lui demande un apprentissage et un investissement complet pour sa maîtrise. Une fois rodé un peu plus au dev, je reviendrai vers vous avec un guide du feignant Corsaire qui souhaitait naviguer sur les mers du code en compagnie de son fidèle Vim ;)

Allez c’est parti, je vous embarque dans ce que mon cerveau a pu stocker en matière de raccourcis {…}

2 • Workflow

LES ÉDITEURS DE TEXTE

Je ne m’étale pas trop sur le choix d’un éditeur, il en existe plusieurs dont les 3 principaux sont : Sublime Text 2, Atom et Vs Code.

Dans cet article je parlerai des plugins en me référant à Atom que j’utilise et qui est, selon moi, le plus sympa d’utilisation.

Les packages (atom) :

Indispensable :

emmet

un must des abréviations

PlateformIO_IDE_terminal

un terminal dans atom qui s’ouvre directement dans le dossier sur lequel vous travaillez

Atom_beautify

Indenter votre code correctement en un raccourci

ctrl + alt + B

Secondaire, quoique … :

Color_picker

Ouvre une petite palette pour pipeter ou choisir une couleur
(choix en hex, rgb etc)

cmd + shift + C

Files_icons

Spécifique icone dans Atom pour améliorer la lisibilité des tabs et des fichiers

Rainbow_tab

Se combine parfaitement avec files-icons

3 • Raccourcis dans Atom

SÉLECTION ET DÉPLACEMENTS

(à noter que les raccourcis sont utilisables pas seulement
dans Atom => navigateur etc)

cmd + f

ouvre l’outil de recherche.

Très chouette pour sélectionner un ensemble de
mêmes itérations et les remplacer par exemple.

cmd + shift + /

Passe en commentaire le bloc sélectionné.

Fonctionne dans tous les langages (ruby, html, css etc)

cmd + d

Sélectionnez l’élément à l’endroit du curseur, répétez la commande pour aller sélectionner chaque autre élément suivant équivalent.

Super utile pour changer le nom d’une classe par exemple

shift + arrows (left/right)

Permet d’étendre la sélection

lettre par lettre

shift + alt + arrows (left / right)

Permet d’étendre la sélection

mot par mot

alt + arrows (left/right)

Déplace ton curseur

éléments par éléments

cmd + shift + arrows (up/down) ou cmd + a

Sélectionne tout ton texte.

ctrl + M

Bascule sur le sélecteur qui clos le bloc

Exemple : div de début et sa div de fin

ctrl + cmd + arrows (up/down)

Descendre ou monter la ligne sur laquelle où vous placez le sélecteur

cmd + alt + arrows (left/right)

change de tab dans atom

mais aussi dans ton navigateur préféré (ou ailleurs) !

cmd +ctrl + M

Sélectionne la totalité du bloc

EMMET

Quelques basiques raccourcis avec Emmet

IMPORTANT :

Chaque entrée de syntaxe se voit suivie d’une tabulation pour prendre effet.

Si ça vous plait, n’hésitez pas à check cette
documentation en one page plutôt chouette !

html:5

Génère une entête doctype html 5

Une façon rapide d’écrire des éléments html

On peut faire encore mieux !

Par exemple :

div.container>div.row>div.col-12.d-flex.px-5>ul.card.list-group-item>li.list-items*4

Ca peut allez encore plus loin, pour ça il y la doc ;)

4 • TERMINAL

— quelques tips

En partant du principe qu’avec Thp, tout le monde a installé sur sa machine iterm 2 (pour les utilisateurs Mac), je crois que sous Linux celui connu est Terminator… Etant un utilisateur Mac ce tuto et ses suites de raccourcis se font essentiellement sous keyboard et sofware Mac.

Dans iterm, on peut split les fenêtres comme cela :

cmd + d => split vertical

shift + cmd + d => split horizontal

cmd + alt + arrows => se déplacement de terminal en terminal

Comme vous le savez déjà certainement, zsh permet quelques trucs sympathiques comme l’autocompletion de votre code à coup de tab :

open .

vous ouvre le finder où se trouve votre dossier

atom . yourNameFile

Ouvre votre fichier ou dossier dans Atom

( attention — Atom doit être ouvert au préalable )

ls à la racine d’un dossier,

cmd + click un element (page web, image, code etc)

Ouvre l’élément dans son software

Si l’ élément est un .psd cela l’ouvrira dans Photoshop

ctrl + L

Clean ton terminal

la touche : -

retourne dans le dossier précédant

Pour améliorer ton set up et aller toujours plus vite,
notamment avec les commandes de git :

git_alias config

Pour te rappeler les interactions principales de git et pas tout péter sur un projet collaboratif :

git — petit guide — no-deep-shit

5 • DACTYLOGRAPHIE

Un super lien pour apprendre à taper plus vite, plus mieux !

typing club

Voilà je m’arrête ici.

J’espère que ce petit guide t’aidera à gagner du temps de “cerveau” et qu’il améliorera ta productivité et ton confort personnel si toi aussi tu te lances dans le dévelopement web avec TheHackingProject ou une autre formation.

HISSEZ HO !

à bientôt pour un second guide du feignant Corsaire…

— — — — — — — -Illustrations et article, stéphane stadler —— — — — — —

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade