Tuto Développement

Installer et Configurer Sublime Text 3 Gratuitement

Dans Google, taper Sublime Text

Assurez vous d’aller sur le site de l’éditeur !

Cliquez sur DOWNLOAD FOR WINDOWS

Installez Sublime Text 3

Après avoir téléchargé sublime text compatible avec votre système d’exploitation. Exécutez le programme.

Sublime Text 3 disponible sans enregistrement préalable

Initialement les premières versions de la 3ème édition n’étaient disponibles que sur enregistrement et il vous en coûtait environ 70$. Depuis peu la dernière de sublime Texte3 peuvent être testés sans devoir s’enregistrergratuitement, et sans limite de durée.

AUTOMATISER SON CODE AVEC EMMET

Emmet est un plugin de Sublime Text permettant de rédiger son code encore plus simplement, sans avoir à écrire la totalité d’une structure HTML mais en l’abrégeant. Son ancêtre ZenCoding sur Notepad++ permettait de faire la même chose mais en beaucoup moins développé. Actuellement, il existe un nombre incalculable de possibilités avec Emmet !

 

 

Prettify : C’est mon extension préférée. D’un simple raccourci clavier (“Ctrl” + “Shift” + “h”) il va indenter, supprimer les espaces inutiles, et réorganiser votre code de manière lisible !

Color Scheme : Couleur de theme en Français permet de personnaliser son environement de travail

ColorPicker : dans une feuille de style, tapez Ctrl + Shift + C Cela fait apparaître une palette de couleur dans laquelle vous pouvez piocher, et ça injecte le code hexadecimal directement dans votre CSS, comme par magie !

ColorHighlighter : Une fois ColorHighlighter correctement installé, vous devez voir la couleur correspondant à un code hexadecimal dans le CSS lorsque vous cliquez sur ce code hexadecimal. Très pratique vu qu’il est assez difficile de connaître par coeur tous les codes hexadecimaux !

Bracket Highlighter: Ce package vous indique quand vous cliquez sur une “div” ou bien sur une balise ouvrante, celle qui va la fermer.

SFTP : le plugin SFTP qui me permet d’enregistrer sur mon serveur mon fichier quand je le sauvegarde (Ctrl + S).

Live Reload : Comme son nom l’indique, rafraîchit automatiquement la page dès que vous sauvegardez un fichier. Vous l’aurez compris, couplé avec SFTP, cela procure un gain de temps considérable. D’une simple sauvegarde (“Ctrl” + “s”) vous verrez vos modifications en temps réel (le mieux est d’avoir deux écrans, un pour coder et un pour voir vos modifications).

Tuto Développement

raccourcis sublime text

les 20 Raccourcis indispensables

Menu Edition

Coder devient plus rapide lorsqu’on utilise les raccourcis suivants :

⌘ + X Delete line

⌘ + ↩ Insert line after

⌘ + ⇧ + ↩ Insert line before

⌘ + L Select line — Repeat to select next lines *

⌘ + D then ⌃ + ⌘ + G ( or Alt + F3) Select word (Repeat to select others occurrences)

Ctrl + M Jump to closing parentheses. Repeat to jump to opening parentheses

Ctrl + ⇧ + M Select all contents of the current parentheses *

⌘ + K Delete from cursor to end of line *

⌘ + ⌫ Delete from cursor to start of line *

⌘ + ⇧ + D Duplicate line(s) *

⌘ + J Join line below to the end of the current line

⌘ + / Comment/un-comment current line

⌘ + ⇧ + V Paste and indent correctly

Navigation

Optez pour une navigation éclaire avec ce qui suit.

⌘ + P Quick-open files by name

⌘ + R Goto symbol Goto word in current file

Ctrl + G Goto line in current file

Rechercher et remplacer

Recherchez de manière rapide et efficace.

⌘ + F Find

⌘ + ⌥ + F

Replace ⌘ + ⇧ + F then ⌘ + E Find in files then insert selected code

Ctrl + ⇧ + G Select all words that matches with current one

Onglets

Naviguez à travers les nombreux onglets ouverts

⌘ + ⇧ + t Open last closed tab

Ctrl + Tab Cycle up through tabs

⇧ + Ctrl + Tab Cycle down through tabs

Bon à savoir

Trier ses variables dans l’ordre alphabétique est une bonne pratique. Pour le faire simplement, sélectionner le bloc texte et appuyer sur F5

Cmd + Maj + P permet d’ouvrir la ligne de commande de Sublime Text 2. Ceci donne accès à des commandes de sauvegarde “Save”, de fermeture de fichier “Close”, de renommage “Rename” etc.

Ctrl + Cmd + P est le raccourcis de changement de projet

Cmd + Click gauche de la souris pour ajouter un nouveau curseur d’édition

 

Voici les plus utiles :

Ctrl+O Ouvrir un fichier
Ctrl+N Nouveau fichier
Ctrl+Shift+N Nouvelle fenêtre
Ctrl+W Fermer un fichier
Ctrl+Shift+W Fermer une fenêtre
Ctrl+Shift+T Rouvrir le dernier fichier fermé
Ctrl+S Sauvegarder
Ctrl+Shift+S Sauvegarder sous
Ctrl+C Copier la ligne ou la sélection
Ctrl+X Couper la ligne ou la sélection
Ctrl+V Coller la ligne ou la sélection
Ctrl+Shift+V Coller et indenter la ligne ou la sélection
Ctrl+Y Rétablir ou répéter
Ctrl+Z Annuler
Ctrl+Shift+D Dupliquer la ou les lignes
Ctrl+ / Commenter
Ctrl+Shift+ / Bloc de commentaire
Ctrl+KU Mettre en majuscule
Ctrl+KL Mettre en minuscule
Ctrl+F Ouvrir le panneau de recherche
Ctrl+H Ouvrir le panneau de remplacement
Ctrl+Shift+P Ouvrir la palette de commandes
Alt+F3 Sélectionner toutes les occurrences
Clic molette Sélection verticale
Ctrl+A Sélectionner tout

Tuto Développement

Creér un bandeau cookies

Suivez étape par étape ce tutoriel pour mettre en place un bandeau sur les cookies sur son site web pour informer et demander le consentement des visiteurs..

Tuto Développement

Apprendre à coder

Fusce non nunc mi. Integer placerat nulla id quam varius dapibus. Nulla sit amet tellus et purus lobortis efficitur. Vivamus tempus posuere ipsum in suscipit. Quisque pulvinar fringilla cursus. Morbi malesuada laoreet dui, vitae consequat arcu vehicula vel. Fusce vel turpis non ante mollis bibendum a ac risus. Morbi ornare ipsum sit amet enim rhoncus, sed eleifend felis tristique. Mauris sed sollicitudin libero. In nec lacus quis erat rhoncus molestie.