ide

Visual Studio Code : synchronisez vos paramètres et extensions avec GitHub Gist

Trucs et astuces Juan Sorroche 2 commentaires

Depuis peu, je découvre avec grand plaisir les joies du télétravail. Par conséquent, je développe désormais sur deux postes de travail : un ordinateur de bureau… au bureau, un ordinateur portable à la maison.

Si Git me permet de synchroniser mes sources et OneDrive mes documents non confidentiels, il me manquait jusqu’alors la synchronisation des paramètres et extensions de mon éditeur Visual Studio Code. Et oui, même si j’utilise principalement PhpStorm au quotidien, Visual Studio Code m’est encore indispensable pour bien des tâches. Or, rien ne m’est plus frustrant que de ne pas retrouver mon environnement de travail tel que je l’ai laissé !

Visual Studio Code Logo
Visual Studio Code

Bien heureusement, j’ai enfin trouvé une solution pour pallier à ce problème : l’extension Settings Sync de Shan Khan. Cet outil, ô combien pratique, me permet donc de synchroniser mon environnement Visual Studio Code sur mes deux postes de travail via mon compte GitHub. Pour plus d’informations, je vous renvoie à la page de présentation de l’extension.

Lire la suite…

Intégrer Cmder à PhpStorm

Programmation Juan Sorroche 9 commentaires

Comme je l’énonçais dans mon billet précédent, je développe actuellement une application avec le framework Symfony 4. Or, Visual Studio Code, malgré toutes ses qualités, manque cruellement du support de Symfony. C’est donc tout naturellement que j’ai commencé à lorgner sur l’IDE le plus reconnu pour le développement PHP et particulièrement avec Symfony : PhpStorm de JetBrains.

J’aime être à l’aise avec mon IDE et je prends toujours un peu de temps pour le configurer. Tout comme je l’avais fait pour Visual Studio Code, j’ai donc intégré Cmder à PhpStorm.

À peu de chose près, la marche à suivre est identique pour ces deux IDE. Si vous souhaitez intégrer Cmder.exe à PhpStorm :

  1. Créez un fichier phpstorm.bat à la racine du répertoire cmder. Dans cet exemple : C:/cmder
  2. Ajoutez ces quelques lignes : 
    @echo off
SET CurrentWorkingDirectory=%CD%
SET CMDER_ROOT=C:\cmder
CALL "%CMDER_ROOT%\vendor\init.bat"
CD /D %CurrentWorkingDirectory%
  3. Dans les paramètres de PhpStorm (Settigns > Tools > Terminal), modifiez le « Shell path » ainsi : 
    "cmd.exe" /k ""C:\cmder\phpstorm.bat""

Et voilà le résultat :

Cmder intégré à PhpStorm

Pour conclure, comme je l’écrivais déjà à la fin de mon billet concernant l’intégration de Cmder à Visual Studio Code :

Non seulement l’interface de Cmder est plus esthétique, mais en plus, elle intègre tous les outils qui me sont nécessaires (bash, git, etc.). Bonus : on visualise directement la branche Git sur laquelle on travaille ! Bref, que du bonheur. ^^

Source :
https://blog.pisyek.com/run-cmder-phpstorm-2017-windows-10/

Visual Studio Code : configurer PHP-CS-Fixer

Programmation Juan Sorroche

Il y a peu, j’ai réinstallé mon poste de travail. Gros boulet que je suis, j’ai oublié de conserver une copie des fichiers de configuration de l’extension php cs fixer de Visual Studio Code. Je profite donc de refaire la configuration pour rédiger ce petit billet qui me servira de mémo à l’avenir. Et qui sait, peut-être que ces quelques lignes pourront être utiles à certains d’entre vous. 😛

 

Visual Studio Code Logo

 

Lire la suite…

Intégrer Cmder à Visual Studio Code

Programmation Juan Sorroche 11 commentaires

Aujourd’hui, petit mémo rapide. 🙂

J’utilise Visual Studio Code depuis presque un an. Cet IDE est vraiment très agréable à utiliser mais malgré tout, je trouve les terminaux intégrés (powershell ou cmd) très inesthétiques et peu pratiques :

Visual Studio Code terminal intégré (cmd)

En parallèle, j’utilise un émulateur de terminal que j’apprécie beaucoup : Cmder. Alors pourquoi ne pas associer les deux ? ^^

Si vous souhaitez intégrer Cmder.exe à Visual Studio Code :

  1. Créez un fichier vscode.bat à la racine du répertoire cmder. Dans cet exemple : C:/cmder
  2. Ajoutez ces quelques lignes : 
    @echo off
SET CurrentWorkingDirectory=%CD%
SET CMDER_ROOT=C:\cmder
CALL "%CMDER_ROOT%\vendor\init.bat"
CD /D %CurrentWorkingDirectory%
  3. Dans les paramètres de Visual Studio Code, ajoutez ces deux lignes : 
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\system32\\cmd.exe",
"terminal.integrated.shellArgs.windows": ["/K", "C:\\cmder\\vscode.bat"]

Et voilà le résultat :

Visual Studio Code avec cmder intégré

Non seulement l’interface de Cmder est plus esthétique, mais en plus, elle intègre tous les outils qui me sont nécessaires (bash, git, etc.). Bonus : on visualise directement la branche Git sur laquelle on travaille ! Bref, que du bonheur. ^^

Sources :
https://github.com/Microsoft/vscode/issues/12006
https://code.visualstudio.om/docs/editor/integrated-terminal

Visual Studio Code : debugger / déboguer une extension ?

Programmation Juan Sorroche

Visual Studio Code Logo

Il y a peu de temps, j’ai mis à jour mon stack de programmation : Wampserver / Node / php-cs-fixer / etc.

Malheureusement, cela ne fut pas sans conséquence : je me suis rapidement rendu compte qu’une extension ne fonctionnait plus correctement dans Visual Studio Code : php cs fixer. J’avais pourtant fait attention à bien remettre en place tous les fichiers de config de php cs fixer lors de ma mise à jour.

J’ai mis quelques heures à trouver la cause du problème donc je vous partage ici une méthode pour déboguer une extension.

 

Lire la suite…

Ma logithèque pour développer en PHP sous Windows

Programmation Juan Sorroche

Suite à la lecture du billet de Nicolas Hachet intitulé « Quels outils pour développer en PHP sous Windows ?« , j’ai eu envie de faire, moi aussi, le tour de mon environnement de développement.

Illustration code source

Stack

WampServer

Je vous l’accorde, rien de bien original. À mes débuts, j’installais Apache, MySQL et PHP l’un après l’autre mais je trouvais ça fastidieux. Surtout qu’à cette époque (début des années 2000), il m’arrivait bien souvent de réinstaller Windows. Par la suite, j’ai découvert EasyPhp que j’ai utilisé pendant un certain temps. Je ne me souviens plus de la raison qui m’a poussé à tester WampServer à l’époque mais en tout cas, je ne suis jamais revenu en arrière. Apache, MySQL et PHP installés et prêts à l’emploi en moins de 10 minutes, que demander de plus ? Simple et efficace.

 

Lire la suite…

En Vrac : OCS, Courrier, Hub de commentaires et Visual Studio Code

En vrac Juan Sorroche

OCS

 

OCS Logos

 

Je suis abonné au bouquet OCS depuis 3 semaines maintenant. Ce qui a motivé mon choix, c’est leur catalogue qui propose (entres autres) The Walking Dead, Game Of Thrones ou encore WestWorld. Cette dernière série est d’ailleurs un véritable coup de cœur pour moi. Pour le moment, je suis vraiment satisfait de ce service.

Cerise sur le gâteau, l’app Windows 10 (Desktop et Mobile) est très bien conçue et complète. Il est même possible de regarder les contenus hors-connexion. ^^ Je peux donc regarder mes séries tranquillement dans le train.

Je ne vous en dit pas plus pour le moment… un billet dédié est en préparation. ^^

 

Lire la suite…

Visual Studio Code : personnalisation et extensions indispensables

Programmation Juan Sorroche 3 commentaires

J’utilise désormais Visual Studio Code (VSCode) au quotidien. Cet IDE est assez complet mais nécessite tout de même quelques extensions pour être confortable dans le cadre de développements PHP.

Visual Studio Code Logo

 

Voici un rapide tour d’horizon des extensions qui me sont aujourd’hui indispensables :

  • Beautify : auto-format le code : Javascript, JSON, CSS, Sass et HTML
  • Better Merge : améliore nettement l’affichage des « merge conflict » (Git) *
  • Close Unmodified : permet de fermer les fichiers n’ayant pas été modifiés (Git)
  • minify : supprime les espaces, les retours chariots des fichiers Javascript, Css et Html. Pour ma part, je ne l’utilise pas pour l’Html
  • php cs fixer : auto-format du code PHP
  • TWIG pack : support du format de fichier TWIG. J’ai hésité à mettre cette extension dans cette liste car elle est relatviement catastrophique. L’auto-format des fichiers Twig est catastrophique, voire inutilisable. Je la garde simplement pour la coloration syntaxique qui, elle aussi, est loin d’être aboutie. Pour le moment, je n’ai pas trouvé d’extension vraiment opérationnelle pour le support de Twig.
  • VS Color Picker : permet de sélectionner une couleur depuis une palette dans les fichiers CSS
  • vscode-icons : ajoute des icônes dans l’explorateur de fichiers

* Note du 03/08/2018 : cette extension ne semble plus disponible dans le Marketplace

Concernant la personnalisation de l’outil, j’avoue ne pas l’avoir beaucoup poussé :

{
"editor.fontSize": 12, // Défini la taille de police
"workbench.colorTheme": "Monokai", // Thème dark Monokai
"workbench.welcome.enabled": false, // Désactive l'écran de bienvenue
"editor.wordWrap": "on", // Active le retour à la ligne du texte
"terminal.integrated.fontSize": 13, // Défini la taille de police du Terminal intégré
"workbench.iconTheme": "vscode-icons", // Affiche des icônes dans l'explorateur de fichiers
"editor.renderControlCharacters": true, // Affiche les caractères de contrôle
"editor.renderWhitespace": "all", // Affiche les espaces dans l'éditeur
"editor.renderIndentGuides": true, // Affiche les guides d'indentation
"minify.minifyExistingOnSave": true, // Minifie les fichiers à l'enregistrement (Minify)
"editor.minimap.enabled": true, // Affiche un "minimap" de l'éditeur
"php-cs-fixer.executablePath": "C:\\wamp\\bin\\php\\php-cs-fixer.phar", // Config. Php CS FIXER
"php-cs-fixer.config": "C:\\wamp\\bin\\php\\vscode.php_cs", // Config. Php CS FIXER
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}${separator}${appName}", // Config. titre fenêtre (Chermin du fichier - projet - Visual Studio Code)
"terminal.external.windowsExec": "C:\\cmder\\Cmder.exe", // Défini le Terminal externe
"files.exclude": { // Fichiers exclus lors des recherches / remplacements
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"**/vendor": true
},
"explorer.openEditors.visible": 20 // Nombre de fichiers affichés dans la liste des éditeurs ouverts
}

 

Si vous avez des conseils pour optimiser VSCode, n’hésitez pas… je suis tout ouïe ^^

Visual Studio Code : bye bye Netbeans ?

Programmation Juan Sorroche 1 commentaire

Il y a quelques semaines, j’ai relancé Visual Studio Code (VSCode) pour voir où en était le développement de cet IDE prometteur. Je l’avais testé d’avril à mai 2015 mais malheureusement, de nombreuses fonctionnalités manquaient alors à l’appel.

Visual Studio Code Logo

 

Cela fait maintenant plus d’un mois que j’utilise VSCode au quotidien et force est de constater qu’il répond désormais à quasiment tous mes besoins.

En mai 2015, je listais les points négatifs de VSCode :

  • Pas d’onglets pour les documents ouverts… la navigation par side-bar n’est pas pratique à l’utilisation : désormais, la navigation se fait soit par side-bar, soit par onglets, soit par les deux. Personnellement, j’utilise cette dernière possibilité.
  • Impossible d’ouvrir plusieurs « Projets » en même temps : malheureusement, il n’est toujours pas possible d’ouvrir plusieurs projets en même temps. Mais je ne perds pas espoir que cette fonctionnalité apparaisse à l’avenir.
  • Pas de fonction « Remove Trailing Space » : cette fonctionnalité est désormais présente
  • Pas de conversion auto des « tab » en « space » : idem
  • La coloration syntaxique est austère à en pleurer : depuis quelque temps déjà, il est possible d’ajouter (voire de concevoir) des thèmes de coloration syntaxique. Pour ma part, j’utilise un thème Monokai et j’en suis totalement satisfait (sauf pour les fichiers Twig, mais ce n’est pas bloquant)
  • Pas de fonctionnalités « History » permettant de faire un « revert » d’un clic : l’intégration des outils git est désormais bien plus ergonomique que dans Netbeans.

Comme vous pouvez le constater, les principaux freins qui m’empêchaient de l’adopter sont aujourd’hui levés.

Cependant, quelques points négatifs subsistent :

  • L’auto-formatage n’est pas géré nativement et passe par des extensions (plugins). Or pour les fichiers Twig par exemple, c’est une catastrophe. Je n’ai pas trouvé d’extension qui auto-format les documents correctement.
  • Pour compléter l’IDE, il est nécessaire d’installer pas mal d’extensions. Or, qui dit extensions, dit développeurs tiers. Malheureusement, certaines d’entre elles ne sont pas correctement maintenues quand d’autres sont à la limite de l’utilisable.
  • Je reviens sur ce point qui pour moi est fondamentale lorsqu’on travaille sur des projets imbriqués : il est aujourd’hui encore impossible d’ouvrir plusieurs projets simultanément. Du coup, il m’arrive encore de devoir ouvrir Netbeans ou Notepad2 pour pouvoir bosser efficacement.

Vous l’aurez compris, je suis plutôt satisfait par Visual Studio Code. D’autant plus que cet éditeur est activement développé et s’améliore mois après mois. Il est d’ailleurs très agréable de suivre son évolution au fil des semaines. J’espère simplement que les quelques points négatifs seront rapidement corrigés. Mais relativisons : quel logiciel peut se targuer d’être parfait ? ^^

Ma logithèque : les indispensables

Divers Juan Sorroche

Comme énoncé dans un de mes précédents billets, j’ai procédé il y a peu à la réinstallation de Windows sur mon Yoga. Je vous propose aujourd’hui un petit tour d’horizon des logiciels composants ma logithèque de base.

Le premier logiciel que j’installe est bien entendu LE navigateur : Firefox !

Ensuite, je passe à l’installation des divers outils composants mon environnement de développement.

Type Sous Windows Sous GNU/Linux
Environnement de développement
  Serveur local Apache (MySQL Php) WampServer LAMP
  Emulateur de Terminal Cmder Yakuake (si KDE)
  Git MySysGit git
  Git dans explorateur de fichiers TortoiseGit RabbitVCS
  Dépendances PHP composer
  IDE Netbeans
  Outil MySQL MySQL Workbench
  Client FTP Filezilla
  BDD sécurisée de mots de passe Keepass

 

Développer, c’est bien, mais il me faut également divers logiciels nécessaires aux travaux « bureautiques ».

Type Sous Windows Sous GNU/Linux
Bureautique
  Suite bureautique Microsoft Office LibreOffice
  Prise de notes OneNote –
  Finances personnelles BankPerfect –
  Gestion des archives 7zip –
  Captures d’écran GreenShot Shutter
  Traitement d’images Gimp (+ Paint.net sous Windows)
  Lecteur audio (travail en musique ^^) Clementine

 

Tous ces outils me sont indispensables que ce soit d’un point de vue professionnel ou personnel. Bien entendu, il s’agit là d’une base. Ma logithèque s’étoffe ensuite au fur et à mesure de mes besoins mais globalement, ce sont là les logiciels que j’utilise le plus au quotidien.