Migrer de Dreamweaver à Sublime Text 3

Posté par: Jean-Philippe PICARAT

J’ai débuté dans le monde de la création de site internet à l’aide du logiciel Adobe Dreamweaver. A l’époque , c’était le top, qui permettait un mode design a l’aide d’un éditeur WYSIWYG et petit à petit j’ai utilisé l’éditeur de code.
L’éditeur de code de Dreamweaver est plutôt bien fait. L’auto-complétion, le nettoyage de code, le transfert FTP automatique sont des fonctions dont je ne pourrais plus me passer.
Néanmoins, je souhaite passer sur un éditeur plus léger, 100% code, plus moderne. J’ai donc fait ma petite veille pour trouver le perle rare.

Mon choix s’est arrêté a Sublime Text 3. Cet éditeur, très basique, permet d’ajouter des fonctionnalité a l’aide de plug-in. Une forte communauté est mobilisé pour améliorer et adapter le logiciel, ce qui m’a permit d’effectuer une transition douce de Dreamweaver ver Sublime Text 3 sans trop de difficultés. J’ai créer une procédure simple pour installer et configurer ST3 avec 3 fonctions indispensable.

  • Transfert FTP automatique
  • import des site depuis FileZilla
  • Prévisualisation dans le navigateur depuis ST3.

 

 

  1. Installer Sublime text 3 depuis le site internet http://www.sublimetext.com/3
  2. Installer le plugin « Package control » qui permet d’ajouter facilement des extensions à Sublime text 3.
    1. Aller sur le site de Package control : https://sublime.wbond.net/installation#st3
    2. Copier le texte prévu et retourner dans ST3.
    3. Aller dans le menu view -> Show console et coller le texte.
    4. Relancer SB3 puis faire un CTRL+SHIFT+P pour tester.
  3. Installer le plugin SFTP (qui permet le transfert FTP directement sur le site)
    1. Dans ST3 faire un CTRL+SHIFT+P, puis taper « Package control install Package » + enter
    2. Taper « SFTP » + enter
    3. Lorsque le package est installé, vous pouvez aller dans la « Sidebar » (à gauche)
      1. Clic droit sur le dossier racine du projet, et un menu FTP/SFTP Apparaît.
      2. aller dans « Edit Remote Mapping » pour ouvrir la configuration FTP de votre projet
  • Un document JSON est créé dans le dossier du projet contenant toutes ces infos.
  1. Installer le plugin « Filezilla SFTP import » pour importer votre config FTP Filezilla directement dans ST3 (ce qui évite de tout retaper et retrouver ses mots de passe …)
    1. Dans ST3 faire un CTRL+SHIFT+P, puis taper « Package control install Package » + enter
    2. Taper « Filezilla SFTP import » + enter
    3. Une fois le plugin installé, aller dans « Tools » et cliquer sur « sublimezilla ».
    4. Un champ va s’ouvrir en bas de l’interface de ST3 qui propose un chemin vers le fichier contenant les sites Filezilla.
    5. Modifier le chemin ou valider
    6. Une boite de dialogue va s’ouvrir pour sélectionner un site FTP. Choisissez en un.
    7. Un nouvel onglet va s’ouvrir avec un fichier « sftp-config.json » déjà pré-configuré. Il suffit alors de le modifier à sa guise puis de le sauvegarder dans le dossier du projet correspondant.
  2. Installer le plugin « SideBarEnhancements » qui va permettre de prévisualiser ses page dans un navigateur depuis un serveur donné. (touches F12 et ALT+F12) (https://github.com/titoBouzout/SideBarEnhancements )
    1. Dans ST3 faire un CTRL+SHIFT+P, puis taper « Package control install Package » + enter
    2. Taper « SideBarEnhancements » + enter
    3. Lorsque le package est installé, vous pouvez aller dans la « Sidebar ».
      1. Click droit sur le dossier racine du projet puis click sur « Project / edit Projects Preview URLs»
      2. Sur le modèle ci-dessous, créez 2 liens « url_testing » et « url_production » qui pourront être accessible via les touches respectives F12 et ALT+F12.
 {
    "S:/www/domain.tld":{
        "url_testing":"http://testing",
        "url_production":"http://domain.tld"
    },
    "C:/Users/luna/some/domain2.tld":{
        "url_testing":"http://testing1",
        "url_production":"http://productiontld2"
    }
}

 

 

 

Article précédent

Convertir une vidéo à l'aide de WinFF

Lorsqu'on cherche un convertisseur de vidéo sur google, c'est la foire. Des milliers de résultats, ... Read more

Article suivant

Statistiques d'utilisation des CMS, WordPress en tête !

Je ne peux m’empêcher de partager cet article sur les stats d'utilisation des CMS. WordPress ... Read more

Commentaires

comments