Le guide du petit moussaillon

Un condensé de raccourcis utiles

Tables des matières :

1_ Pourquoi des raccourcis ?

2_Workflow

3_Raccourcis dans Atom

4_Terminal

5_Dactylographie

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 —— — — — — —

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store