Sublime Text 2 - informations.be

46
Sublime Text 2

Transcript of Sublime Text 2 - informations.be

Page 1: Sublime Text 2 - informations.be

Sublime Text 2

Page 2: Sublime Text 2 - informations.be

Liens

Page 3: Sublime Text 2 - informations.be

Site original

http://www.sublimetext.com/

Page 4: Sublime Text 2 - informations.be

Tutoriel en vidéohttp://courses.tutsplus.com/courses/perfect-workflow-in-sublime-text-2

Page 5: Sublime Text 2 - informations.be

Mode d’emploi officieuxhttp://sublime-text-unofficial-documentation.readthedocs.org/en/sublime-text-2/

Page 6: Sublime Text 2 - informations.be

Mode d’emploi officielhttp://www.sublimetext.com/docs/2/index.html

Page 7: Sublime Text 2 - informations.be

Affichage

Page 8: Sublime Text 2 - informations.be

Afficher/Cacher la barre latérale1. Utiliser la souris :=> Menu View => Side Bar => Show Side Bar OU Hide Side BarOU1’. Utiliser le clavier :PC => CTRL+K puis immédiatement CTRL+B (Manipulation spéciale !)MAC => CMD+K puis immédiatement CMD+B (Manipulation spéciale !)

Page 9: Sublime Text 2 - informations.be

Afficher/Cacher les autres panneauxEssayer les autres panneaux :- Minimap- Tabs- Status bar- Console

1.=> Menu View => (regarder les sous-menus)

Page 10: Sublime Text 2 - informations.be

Afficher/Revenir “Plein Ecran”1. Utiliser la souris :=> Menu View => Enter Full Screen Mode OU1’. Utiliser le clavier :PC => CTRL+ALT+FMAC => CMD+CTRL+F

Page 11: Sublime Text 2 - informations.be

Afficher/Revenir “Distraction Free”1. Utiliser la souris :=> Menu View => Enter Distraction Free Mode OU1’. Utiliser le clavier :PC => ???MAC => CMD+CTRL+MAJ+F

Page 12: Sublime Text 2 - informations.be

Afficher plusieurs fenêtres1. => Menu View => Layout => MACBOOK :- Single (CMD+OPT+MAJ+1)- Columns: 2 (CMD+OPT+MAJ+2)- Columns: 3 (CMD+OPT+MAJ+3)- Columns: 4 (CMD+OPT+MAJ+4)- Rows: 2- Rows: 3- Grid: 4

Page 13: Sublime Text 2 - informations.be

Modifier le look1. Pour le Mac=> Menu Sublime Text => Preferences… => Color Scheme...

Page 14: Sublime Text 2 - informations.be

Projet

Page 15: Sublime Text 2 - informations.be

Ouvrir un dossier1. => Menu File => Open… => Choisir un dossier=> Si la barre latérale n’est pas affichée, l’afficher.=> Observer que le dossier s’affiche dans cette barre latérale

Page 16: Sublime Text 2 - informations.be

Afficher les colonnes ou les rows1. =: Dans la barre=> Cliquer sur un fichier=> Ouvrir une autre colonne ou row=> Cliquer sur un autre fichier

Page 17: Sublime Text 2 - informations.be

Sauver le projet1. => Menu Project => Save Project As… => Donner un nom projet1.sublime-project => Choisir un dossier parent

Page 18: Sublime Text 2 - informations.be

Fermer le projet1. => Menu Project => Close Project

Page 19: Sublime Text 2 - informations.be

Ouvrir un projet1. => Menu Project => Open Project… => Choisir un projet project1.sublime-project

Page 20: Sublime Text 2 - informations.be

Créer un workspace pour un projet1. => Menu Project => New Workspace for Project

Page 21: Sublime Text 2 - informations.be

Sauver un workspace pour un projet1. => Menu Project => Save Workspace As...

Page 22: Sublime Text 2 - informations.be

Edition

Page 23: Sublime Text 2 - informations.be

Fonctions d’éditionPar le menu :1. => Menu Edit => Tester les fonctions offertes

Page 24: Sublime Text 2 - informations.be

Destination (Goto)

Page 25: Sublime Text 2 - informations.be

Fonctions de destination (Goto)Par le menu :1. => Menu Goto => Tester les fonctions offertes

Page 26: Sublime Text 2 - informations.be

Sélection

Page 27: Sublime Text 2 - informations.be

Sélectionner un mot1. Sélectionner avec la souris :=> Double-cliquer sur un motOU1’. Sélectionner avec le clavier :=> Taper sur les Touches fléchées => CTRL+D (pc) ou CMD+D (mac)

Page 28: Sublime Text 2 - informations.be

Afficher les occurrences d’un mot1. Sélectionner un mot :=> Double-cliquer sur un mot=> Observer que, automatiquement, toutes les occurrences du mot sont mises en évidence par un encadrement autour de chacune d’elles.

Page 29: Sublime Text 2 - informations.be

Sélectionner les occurrencesd’un mot1. Sélectionner le mot :=> Double-cliquer sur un mot

2. A la sélection courante, ajouter l’occurrence suivante=> CTRL+D (pc) ou CMD+D (mac)

3. A la sélection courante, retrancher l’occurrence courante=> CTRL+U (pc) ou CMD+U (mac)

Page 30: Sublime Text 2 - informations.be

Sélectionner toutes les occurrencesd’un mot1. Sélectionner toutes les occurrences du mot :=> Placer le curseur sur le mot=> ALT+F3 (Find All) (pc) ou CMD+CTRL+G (mac)

2. Revenir sur le sélection que du mot de départ :=> ESC (pc) ou ESC (mac)

Page 31: Sublime Text 2 - informations.be

Sélectionner les lignes1. Sélectionner une ligne :=> Placer le curseur sur la ligne=> CTRL+L (pc) ou CMD+L (mac)

2. A la sélection courante, ajouter la ligne suivante=> CTRL+L (pc) ou CMD+L (mac)

3. A la sélection courante, retrancher la ligne courante=> CTRL+U (pc) ou CMD+U (mac)

Page 32: Sublime Text 2 - informations.be

Sélectionner les lignesSANS afficher la sélection (spécial !)1. Sélectionner une ligne :=> Placer le curseur sur la ligne=> Observer que le curseur clignote, aucune sélection semble être faite, MAIS la sélection de toute la ligne est IMPLICITE !

2. A la sélection courante, ajouter la ligne suivante=> CTRL+ALT+Flèche Bas (pc) ou CTRL+MAJ+Flèche Bas (mac)

3. A la sélection courante, ajouter la ligne précédente (au-dessus de toute la sélection)=> CTRL+ALT+Flèche Haut (pc) ou CTRL+MAJ+Flèche Haut (mac)

4. A la sélection courante, annuler la série de sélection précédente=> CTRL+U (pc) ou CMD+U (mac)

Page 33: Sublime Text 2 - informations.be

Sélectionner un paragrapheUn paragraphe est un ensemble de lignes contiguës sans aucune ligne vide.

1. Sélectionner un paragraphe :=> Menu Selection => Expand Selection To Paragraph(PAS de raccourci !)

Page 34: Sublime Text 2 - informations.be

Sélectionner un scopeUn scope est un ensemble de codes de niveaux hiérarchiques.Autrement dit, cette sélection permet d’étendre la sélection courante vers un niveau hiérarchique supérieur.

1. Sélectionner un scope :=> Placer le curseur=> CTRL+MAJ+Espace (pc) ou CMD+MAJ+Espace (mac)

2. Sélectionner le scope d’un niveau supérieur :=> CTRL+MAJ+Espace (pc) ou CMD+MAJ+Espace (mac)

Page 35: Sublime Text 2 - informations.be

Sélectionner un code CSS ou JS entre délimiteurs symétriquesLes délimiteurs symétriques sont : ( ) , [ ], { }

1. Sélectionner un code entre délimiteurs (non inclus) :=> Placer le curseur entre les délimiteurs=> CTRL+ALT+M (pc) ou CRTL+MAJ+M (mac)

2. Sélectionner un code entre délimiteurs (inclus) :=> Placer le curseur entre les délimiteurs=> CTRL+ALT+M (pc) ou CRTL+MAJ+M (mac) : 2 fois

Page 36: Sublime Text 2 - informations.be

Sélectionner un code CSS ou JSavec la même indentation contiguë1. Sélectionner un code avec la même indentation contiguë :=> Placer le curseur=> CTRL+MAJ+J (pc) ou CMD+MAJ+J (mac)

Page 37: Sublime Text 2 - informations.be

Sélectionner un code HTMLentre balises1. Sélectionner un code avec entre balises (non incluses) :=> Placer le curseur=> CTRL+MAJ+A (pc) ou CMD+MAJ+A (mac)

2. Sélectionner un code avec entre balises (incluses) :=> Placer le curseur=> CTRL+MAJ+A (pc) ou CMD+MAJ+A (mac) : 2 fois

Page 38: Sublime Text 2 - informations.be

Inverser la sélection1. Sélectionner un code :=> Menu Sélection => Invert selection

Page 39: Sublime Text 2 - informations.be

Autocomplétion

Page 40: Sublime Text 2 - informations.be

Utiliser l’autocomplétionpour écrire les balisesPar exemple, ajouter les balises <h2> d’ouverture et de fermeture :

1. => Taper <h=> Taper CTRL+Espace plusieurs fois pour arriver à <h2> dans la liste=> Taper TAB OU Entrée=> Observer que les balises sont complétées automatiquement par<h2></h2>

Page 41: Sublime Text 2 - informations.be

Utiliser l’autocomplétionpour écrire les balises et les attributs (1)Par exemple, ajouter le code<h2 style=”color: red”>Titre 2</h2> :

1.=> Taper <h2

2.=> Taper Espace=> Taper s=> Taper TAB OU Entrée=> Observer que le code se complète :<h2 style=””>

Page 42: Sublime Text 2 - informations.be

Utiliser l’autocomplétionpour écrire les balises et les attributs (2)3. => Taper sur la flèche 2 fois=> Taper Titre 2=> Taper </=> Observer que le code se complète :<h2 style=”color:red”>Titre 2</h2>

Page 43: Sublime Text 2 - informations.be

Recherche (Find)

Page 44: Sublime Text 2 - informations.be

Fonctions de Recherche/RemplacementPar le menu :1. => Menu Find => Tester les fonctions offertes

Page 45: Sublime Text 2 - informations.be

Outils (Tools)

Page 46: Sublime Text 2 - informations.be

Outils diversPar le menu :1. => Menu Tools => Tester les fonctions offertes- Snippets- Macros