====== Sublime Text 3 ======

http://www.sublimetext.com/

===== Présentation =====

http://www.blogoergosum.com/29872-sublime-text-2-zen-coding-w00t

Pour synchroniser ses paquets => https://packagecontrol.io/docs/syncing

===== Documentation =====

La doc officiel => http://www.sublimetext.com/docs/3/

La doc non officiel => http://docs.sublimetext.info/en/latest/index.html

===== Plugins =====

En 1er vous devez installer le package control => https://sublime.wbond.net/installation#st3

Liste de tous les plugins => http://wbond.net/sublime_packages/community

Liste de 33 plugins => http://aslanbakan.com/en/blog/33-essential-sublime-text-plugins-for-all-developers/

==== AutoFileName ====
> https://packagecontrol.io/packages/AutoFileName
> Lorsque vous devez remplir une propriété représentant un chemin vers un fichier (ex: <img src=, <a href=, <script src= etc...) ce plugins vous propose une liste de dossier et fichier existant, ce qui permet de ne pas chercher et de ne pas faire de faute de frappe dans un nom de fichier.
> en pratique c'est plutot plus envahissant qu'autre chose.

==== Bracket Highlighter ====
> https://github.com/facelessuser/BracketHighlighter
> Rajoute des icones dans la marge de gauche afin de voir la portion de code inclue entre des () {} <tag> etc.. et indique si il manque une fermeture.

==== Valign ====
> https://github.com/jlong64/sublime_valign
> Permet d'aligner verticalement votre code pour plus de lisibilité dans la déclaration de variable, array etc..
> Ajouter cette ligne dans votre config de raccourci car par défaut le raccourci **Ctrl+\** n'est pas possible pour nos clavier azerty.

  { "keys": ["ctrl+alt+a"], "command": "valign" },
  
  
==== Color Picker====
> http://weslly.github.io/ColorPicker/
> Faites **ctrl+shift+c** et une fenêtre vous permettra de choisir une choisir afin de vous donner le code html.

==== Color Highlighter====
> https://github.com/Monnoroch/ColorHighlighter
> Affiche la couleur d'un code couleur HTML lorsque le curseur se positionne sur celui-ci

==== Highlighter====
> https://github.com/bluegray/Highlighter
> Affiche en rouge tous les caractères spéciaux mal placé, ou alors des tab et espace au mauvais endroit pour une indentation parfaite ;)

==== FileDiffs ====
> https://github.com/spape/SublimeFileDiffs
> Permet de comparer 2 fichiers

==== php syntax checker ====
> https://github.com/naomichi-y/php_syntax_checker
> Nous avertit d'une erreur de syntax php lorsque l'on enregistre le fichier

==== inc_dec_value ====
> https://packagecontrol.io/packages/Inc-Dec-Value
> Permet d'incrémenter/décrémenter n'importe quelle valeur avec la roulette ou avec Alt+haut/bas
> Fonctionne avec les codes couleurs, les dates, les true en false (et inversement)
> sur un texte => string => String => STRING
> en pratique, jamais utilisé


==== Javascript and JQuery API Completions ====
> https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions
> Permet d'autocompléter du javascript et du jquery

https://tutsplus.com/lesson/docblockr/

https://tutsplus.com/lesson/emmet/

https://tutsplus.com/lesson/pretty-task-management/

==== Laravel ====

> Blade Snippets
> Laravel Blade Highlighter


==== Increment Selection ====

Très utile quand on fait du copier/coller avec des ID que l'on doit incrémenter à la main, exemple :
<code php>
if($toto='A-1')
  return 'tata';
if($toto='A-1')
  return 'tata';
if($toto='A-1')
  return 'tata';
</code>
On sélectionne le 1, on fait Ctrl+Alt+i et on obtient
<code php>
if($toto='A-1')
  return 'tata';
if($toto='A-2')
  return 'tata';
if($toto='A-3')
  return 'tata';
</code>

+ d'info => https://github.com/yulanggong/IncrementSelection

==== SideBarEnhancements ====
> https://packagecontrol.io/packages/SideBarEnhancements
> Indispensable pour avoir un menu contextuel plus riche lors d'un clic droit sur un fichier/dossier de la sidebar

Le paquet ne semble plus dispo dans les dépôts officiel. Pour le rajouter :
  * Ctrl+Maj+P
  * Package control : Add repository
  * Copier/coller : https://github.com/titoBouzout/SideBarEnhancements/tree/st3
  * Ctrl+Maj+P
  * Package control : Install package
  * Rechercher : SideBarEnhancements

Entre temps il semble être dispo de nouveau.

==== PHP Companion ====
> https://github.com/erichard/SublimePHPCompanion
> Très pratique quand on code avec des namespaces, permet de déclarer une class dans les "Use", de trouver le FQCN d'une classe et d'autre petite bricole



===== Personalisez, customisez Sublime Text =====
==== Thème ====
https://packagecontrol.io/browse/labels/theme

Les thèmes permettent de changer la couleur de l'interface de sublime text ainsi que l'apparence des boutons, onglets etc...

Un plugin permet de switcher facilement entre les thèmes
=> https://packagecontrol.io/packages/Themes%20Menu%20Switcher

J'aime particulièrement le thème **afterglow** qui fait ce que je veux et est paramètrable :)

https://github.com/YabataDesign/afterglow-theme

==== Color Scheme ====
Les **Color Scheme** sont des thèmes uniquement de la partie éditeur de sublime text, ça concerne donc la colorisation syntaxique mais pas la sidebar, les boutons, les tabs contrairement aux **Theme**

Créer votre propre "color scheme" sur le site http://tmtheme-editor.herokuapp.com/
===== Config =====

Voici mon fichier de config personnel. Pour modifier le votre, allez dans le menu **Preferences / Settings - User** et copier/coller le texte ci-dessous.
<file jquery Preferences.sublime-settings>
{
  "always_show_minimap_viewport": true,
  "auto_complete_commit_on_tab": true,
  "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
  "highlight_modified_tabs": true,
  "ignored_packages":
    [
      "Vintage"
    ],
  "tab_size": 4,
  "word_wrap": true,

  "auto_complete_triggers":
  [
    {
      "characters": "<>\"'-_qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP",
      "selector": "text, source, meta, string, punctuation, constant"
    }
  ],
	"line_padding_bottom": 1,
	"line_padding_top": 1,
	"mouse_wheel_switches_tabs": false,
	"overlay_scroll_bars": "enabled",
	"scroll_speed": 0.4,
	"show_encoding": true,
	"show_line_endings": true,
	"sidebar_row_padding_small": true,
	"sidebar_size_12": true,
	"sidebar_size_13": false,
	"sidebar_size_14": false,
	"status_bar_brighter": true,
	"tab_size": 4,
	"tabs_padding_medium": true,
	"tabs_small": true,
	"theme": "Afterglow.sublime-theme",
	"word_wrap": true,
}
</file>

===== Raccourcis clavier =====

> **Ctrl+p**
> Lance une recherche de fichier

> **Ctrl+shift+p**
> Permet de lancer une fonction, d'installer un package etc..

> **Ctrl+r**
> Liste les fonctions du script en cours

> **Ctrl+shift+r**
> Liste les fonctions de plusieurs fichiers

> **Ctrl+;**
> Liste certains mots du scripts



> **Ctrl+d**
>Permet de sélectionner tout le mot qui entour le curseur.
>Lorsque qu'un mot est sélectionné, il permet de sélectionner le prochain mot identique.
>Si vous allez trop loin, utilisez **Ctrl+u** pour annuler la dernière sélection

> **Ctrl+:** ou **Ctrl+shift+:**
>Permet de commenter une ligne ou un bloc de ligne

> **Ctrl+maj+d**
>Permet de dupliquer la ligne

> **Ctrl+maj+k**
>Permet de supprimer la ligne

> **Alt+maj+w**
>Lorsque vous sélectionnez du code, ce raccourci ajoutera une balise <p></p> tout au tour de la sélection

> **Alt+F3**
>Permet de sélectionner le tag de fin si le curseur est positionné sur un tag HTML
===== Raccourcis souris =====

Si vous avez les boutons "précédent/suivant" sur votre souris, cela permet de naviguer dans vos onglets de gauche à droite.

Pour personnaliser l'action de ces boutons, créez le fichier suivant
  ~/.config/sublime-text-3/Packages/User/Default (Linux).sublime-mousemap

et inspirez-vous de ce code qui remplace l'action par défaut par le jump back / forward. Inspirez-vous de la config de key binding pour les autres commandes

<code>
[
	{ "button": "button8", "command": "jump_back" },
	{ "button": "button9", "command": "jump_forward" }
]
</code>

Autre exemple pour faire comme avec Ctrl+tab 
<code>
[
	{ "button": "button8", "command": "next_view_in_stack" },
	{ "button": "button9", "command": "prev_view_in_stack" }
]
</code>
===== Sélection vertical ou en colonne =====

Utiliser la souris pour faire une sélection de texte via un rectangle.


==== OS X ====
Left Mouse Button + Option\\
OR: Middle Mouse Button\\
Add to selection: Command\\
Subtract from selection: Command+Shift\\

==== Windows ====
Right Mouse Button + Shift\\
OR: Middle Mouse Button\\
Add to selection: Ctrl\\
Subtract from selection: Alt\

==== Linux ====
Right Mouse Button + Shift\\
Add to selection: Ctrl\\
Subtract from selection: Alt\\


===== Remplacer du texte =====

==== Expression régulière ====

Sublime Text utilise la norme suivante pour les expressions régulières http://www.boost.org/doc/libs/1_47_0/libs/regex/doc/html/boost_regex/syntax/perl_syntax.html

Dans mon cas, j'avais un fichier html avec des liens qui comportaient des tabulations dans l'attribut href.

  Ex: <a href="  http://edmc73.com  " target="_blank">EDMC73</a>
  
Et bien évidemment, je veux enlever ces tabulations.

Ouvrez la commande **remplacer** ( Ctrl+H )\\
Sélectionnez le 1er icone pour activer les expressions régulières ( regular expression )\\
Entrez ceci dans le champ Find What
  href="[[:space:]]*([^"[:space:]]*)[[:space:]]*"
Et ceci dans le champ Replace With
  href="\1"
  
Explication : Je cherche dans chaque ligne l'élément **href="** suivi par n'importe quel type d'espace (inclu les tabulations) avec **[**[:space:]**]**. L'étoile signifie qu'il peut avoir zero ou plusieurs espace. J'ouvre les parenthèses pour capturer le résultat et l'utiliser ensuite avec **\1**. Ma capture ne contient ni **"** ni espace qu'il y en ait zéro ou plusieurs. Ensuite zéro ou plusieurs espace peuvent apparaitre suivi d'un **"**.

Je remplace tout ça par **href="** le contenu de mes parenthèses avec **\1** et **"**

==== Caractère spéciaux ====
Si le code hexadécimal du caractère spécial est le ''0xe28093'' alors tapez ce qui suit dans le champ de recherche avec l'option regex

  \0xe28093

=== espace invisible ===

Un bug vu dans l'editeur HTML de sharepoint 2013 ajoute des espaces de taille 0 sous la forme ''&#8203;''


Pour les voir dans sublime text, voici l'astuce => https://stackoverflow.com/questions/20356784/delete-u200b-zero-width-space-characters-using-sublime-text-3

  * Soit vous installez le package **highlight-dodgy-chars** dispo dans les packages
  * Soit vous faites un "recherche et remplace" en RegEx avec ''\x{200b}''