Installer Sublime Text

Sublime Text est un logiciel à contribution volontaire. Il est très utile pour le développement et lorsqu’on lui ajoute des packages, il devient très puissant et notre productivité augmente.

Installation du logiciel

La première étape est d’installer le logiciel. On peut le télécharger sur www.sublimetext.com.

La deuxième étape est d’installer Package Control qui permettra par après d’installer des packages pour mettre Sublime Text sur stéroïdes. Pour installer Package Control, il faut ouvrir la palette de commande (Win/Linux : ctrl+maj+p, MacOS : cmd+maj+p). Et après nous tapons :

Install Package Control

et nous tapons la clé Entrée. Ça va prendre quelques instants.

Installer des packages

Une fois Package Control installé, nous pouvons installer d’autres packages. Voici la liste de packages que nous avons identifiés et qui seront utiles pour le développement frontend (HTML, CSS, JavaScript) :

• AutoFileName : pour aider à naviguer dans le système de fichiers quand nous voulons lier des ressources (p.ex.: attacher un fichier CSS)
• BracketHighlighter : pour voir les correspondances des accolades, parenthèses lorsqu’on les ferme
• ColorHighlighter : pour mettre des couleurs dans le code
• ColorPicker : pour sélectionner une couleur
• Emmet : pour accélérer la rédaction du HTML, ce package est génial et pour apprndre des astuces aller sur Emmet Documentation
• HTML-CSS-JS Prettify : pour reformater CSS, HTML ou JavaScript
• JavaScript Completions : pour avoir des suggestions lorsqu’on tape notre code JavaScript
• jQuery : pour avoir un support jQuery lorsqu’on tape notre code
• View in Browser : pour ajuster le chemin et le voir sur notre serveur Web local au lieu de le voir comme un fichier

Pour installer un package, nous allons dans la palette de commande, et là on active l’installation avec la commande Install Package. Par exemple pour installer AutoFileName, nous ferions :

Install Package

et après, dans la boîte de sélection de package, nous taperions :

AutoFileName

Au fur et à mesure nous tapons, nous avons une liste de suggestions. Nous pouvons choisir l’option qui nous intéresse dans la liste (pas besoin de tout taper).

Il y a plein d’autres packages disponibles, mais leur pertinence dépend de ce que vous faites. Par exemple, voici une liste d’autre plugins intéressants pour ceux qui feraient beaucoup de JavaScript : SublimeLinter, SublimeLinter-jshint, Babel.

Vous pouvez visualiser notre vidéo Installer Sublime Text (et quelques packages) sur YouTube.

Configuration

Lorsque nous travaillons, nous allons souvent organiser nos travaux en projets. Pour la formation, nos projets sont des cours, alors nous créons un projet par cours avec le nom du cours. Dans certains cas, il est important de mettre en place un serveur Web local. C’est important lorsque nous voulons pratiquer les requêtes asynchrones localement ou utiliser les API du HTML5 comme la géolocalisation, les service workers, l’accès à la caméra ou au microphone, etc.¹

Création d’un projet

Pour créer un projet, d’abord faire File > Open Folder vers le dossier du projet, puis faire Project > Save Project As et donner un nom qui a un lien avec votre projet. Pour un accès plus facile, nous recommandons de sauvegarder sur le bureau ou sinon sauvegarder à la racine de votre projet.

Par après, lorsque nous voulons ouvrir un projet à nouveau, nous faisons Project > Open Project et naviguons jusqu’au répertoire où nous avons sauvegardé notre projet et choisissons le fichier avec l’extension .sublime-project. Nous pouvons aussi (plus rapide) faire Project > Open Recent, et choisir le projet dans la liste.

Configuration du package View in Browser

Si vous avez un serveur Web local (p.ex.: sur localhost avec Bitnami) et que vous voulez faire ouvrir les pages sur http://localhost plutôt que sur file:///, il faut aller configurer le projet. La première opération est de changer les paramètres du projet pour attacher au serveur Web. La deuxième configuration (optionnelle) est pour faire en sorte que le navigateur par défaut soit Google Chrome.

Attacher un serveur Web au projet

Supposons que la racine de votre serveur Web soit dans C:\Bitnami\wampstack\apache\htdocs. Pour mettre un serveur Web avec View in Browser, aller dans Project > Edit Project et mettre :

{
    "folders": [
    {
        "path": "C:\\Web"
    }],
    "settings":
    {
        "sublime-view-in-browser":
        {
            "baseUrl": "http://localhost",
            "basePath": "C:\\Bitnami\\wampstack\\apache\\htdocs"
        }
    }
}

Changer le navigateur par défaut

Aller dans Preferences > Package Settings >  View in Browser >  Settings - User. Si le fichier est vide, alors copier tout le contenu de "Settings - Default" dans "Settings - User". Ensuite aller tout en bas du code de configuration et changer le navigateur avec celui désiré, par exemple sur Windows on mettrait :

 {
  "selectedBrowser": "chrome"
 }

et dans mon installation sur MacOS, j’ai plutôt :

 {
  "browser": "chrome"
 }

Une fois cette opération faite, vous pouvez faire Souris de droite -> View in Browser ou sinon le racourci clavier ctrl+alt+v. Pour plus de détails, consulter la page Configuring Browsers pour le package View in Browser ou Sublime Keyboard Shortcut to ‘Open in Browser’.