Sublime Text 2 - informations.be

Post on 28-Jul-2022

3 views 0 download

Transcript of Sublime Text 2 - informations.be

Sublime Text 2

Liens

Site original

http://www.sublimetext.com/

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

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

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

Affichage

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 !)

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

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

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

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

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

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

Projet

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

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

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

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

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

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

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

Edition

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

Destination (Goto)

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

Sélection

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)

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.

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)

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)

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)

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)

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 !)

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)

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

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)

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

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

Autocomplétion

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>

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=””>

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>

Recherche (Find)

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

Outils (Tools)

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