{"id":351008,"date":"2022-04-23T05:37:29","date_gmt":"2022-04-23T05:37:29","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=351008"},"modified":"2022-04-23T05:37:32","modified_gmt":"2022-04-23T05:37:32","slug":"les-10-meilleurs-packs-sublime-text-pour-les-developpeurs-web","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/les-10-meilleurs-packs-sublime-text-pour-les-developpeurs-web\/","title":{"rendered":"Les 10 meilleurs packs Sublime Text pour les d\u00e9veloppeurs Web"},"content":{"rendered":"
\n

Chaque d\u00e9veloppeur Web a son \u00e9diteur de code pr\u00e9f\u00e9r\u00e9. Certains ne jurent que par un environnement de d\u00e9veloppement int\u00e9gr\u00e9 (IDE) tandis que d’autres recherchent simplement la simplicit\u00e9. Si vous pr\u00e9f\u00e9rez ces derniers, vous appr\u00e9cierez peut-\u00eatre les packages Sublime Text<\/a>.<\/p>\n

L’un des aspects les plus attrayants de Sublime Text est qu’il est hautement modulaire. Si vous \u00eates un puriste, vous pouvez utiliser l’\u00e9diteur tel quel. Cependant, divers paquets peuvent faciliter votre travail de d\u00e9veloppement en \u00e9tendant ses fonctionnalit\u00e9s. Dans cet article, nous vous pr\u00e9senterons dix de nos paquets pr\u00e9f\u00e9r\u00e9s !<\/p>\n

Une introduction aux packages de Sublime Text et comment les installer<\/h2>\n

Les packs sont l’\u00e9quivalent pour Sublime Text des modules ou des plugins WordPress. Ce sont des modules compl\u00e9mentaires que vous pouvez installer pour \u00e9tendre les fonctionnalit\u00e9s principales de la plateforme et faciliter votre travail.<\/p>\n

Le concept de paquets d’\u00e9diteurs de code n’est pas nouveau. La plupart des plateformes populaires, telles qu’Atom, proposent \u00e9galement de nombreuses extensions. Cependant, Sublime Text reste une excellente option si vous souhaitez un \u00e9diteur de code l\u00e9ger avec une large s\u00e9lection d’extensions.<\/p>\n

Quant \u00e0 la fa\u00e7on d’installer les paquets Sublime Text, le processus est tr\u00e8s simple. Pour commencer, visitez le d\u00e9p\u00f4t de l’extension que vous souhaitez et t\u00e9l\u00e9chargez-la :<\/p>\n

\"Downloading<\/p>\n

Une fois que vous avez le fichier .zip <\/em>, naviguez jusqu’\u00e0 votre r\u00e9pertoire Sublime Text Packages <\/em>et d\u00e9veloppez-le \u00e0 l’int\u00e9rieur. Au cas o\u00f9 vous ne le trouveriez pas, le r\u00e9pertoire devrait se trouver sous nom d’utilisateur\/appdata\/roaming\/Sublime Text\/Packages<\/em>. La plupart des extensions seront pr\u00eates \u00e0 \u00eatre utilis\u00e9es dans Sublime Text d\u00e8s que vous aurez extrait le dossier, sans que vous ayez \u00e0 red\u00e9marrer l’\u00e9diteur.<\/p>\n

Si vous souhaitez un processus plus rationnel, vous pouvez \u00e9galement utiliser le contr\u00f4le<\/a>officiel des paquets de Sublime Text<\/a>. <\/em>En un mot, cet outil vous permet de parcourir un d\u00e9p\u00f4t de paquets publics et de les installer en utilisant des commandes simples.<\/p>\n

Pour configurer Sublime Text Package Control, naviguez vers Outils > Installer Package Control<\/em>:<\/p>\n

\"Installing<\/p>\n

Une fois que Package Control est configur\u00e9, vous pouvez l’utiliser via la console Sublime Text. Appuyez sur CTRL + ~ <\/em>pour l’ouvrir, puis tapez PACKAGE CONTROL : <\/em>pour voir une liste compl\u00e8te des commandes que vous pouvez utiliser :<\/p>\n

\"Sublime<\/p>\n

Pour installer un nouveau paquet, tapez Package Control : Installer un paquet <\/em>et l’outil ouvrira une liste de tous les paquets publics dans son r\u00e9f\u00e9rentiel :<\/p>\n

\"A<\/p>\n

Vous pouvez parcourir cette liste \u00e0 l’aide de la console. Cependant, avant d’installer quoi que ce soit, vous voudrez probablement en savoir un peu plus sur les paquets disponibles afin de pouvoir choisir les meilleurs pour votre flux de travail.<\/p>\n

les 10 meilleurs packages de Sublime Text pour les d\u00e9veloppeurs Web<\/h2>\n

Il existe des centaines de packs Sublime Text parmi lesquels choisir, et il n’est pas facile de dresser une liste des meilleurs choix. Dans cet esprit, nous avons d\u00e9cid\u00e9 de nous concentrer sur ceux qui peuvent vous aider \u00e0 simplifier votre flux de travail autant que possible. La plupart des options de cette liste sont ind\u00e9pendantes du langage, vous pourrez donc en tirer profit quel que soit le type de d\u00e9veloppement sur lequel vous vous concentrez.<\/p>\n

1. Alignment<\/h3>\n

Alignment<\/a> est un paquet simple qui prend votre code et aligne les caract\u00e8res pour lesquels vous le configurez. Sa fonctionnalit\u00e9 est simple, mais elle rend la lecture du code beaucoup plus agr\u00e9able.<\/p>\n

Une fois que vous avez install\u00e9 le paquet, vous devez configurer les caract\u00e8res qu’il doit aligner. Vous pouvez le faire en ouvrant le fichier Settings – User <\/em>du paquet :<\/p>\n

\"Opening<\/p>\n

Lorsque le fichier s’ouvre, copiez et collez le code suivant \u00e0 l’int\u00e9rieur :<\/p>\n

{\n    \"alignement_chars\" : [\n        \"(\", \" :\"\n    ]\n}\n<\/pre>\n
Cet extrait indique au package d’aligner les caract\u00e8res \u00ab\u00a0(\u00a0\u00bb et \u00a0\u00bb :\u00a0\u00bb dans tout code auquel il est appliqu\u00e9. Pour vous donner un exemple, voici le PHP que vous utiliserez pour mettre en file d’attente les styles d’un th\u00e8me enfant dans WordPress :<\/p>\n
\"WordPress'<\/p>\n
C’est d\u00e9j\u00e0 bien organis\u00e9. Cependant, si vous le mettez en surbrillance et appuyez sur CTRL + Alt + A<\/em>, Alignment appliquera vos nouveaux param\u00e8tres, ce qui donne le r\u00e9sultat suivant :<\/p>\n
\"An<\/p>\n
Les caract\u00e8res que vous voulez aligner d\u00e9pendent de vous. Heureusement, il suffit d’appuyer sur quelques boutons apr\u00e8s avoir configur\u00e9 le paquet pour qu’il soit op\u00e9rationnel.<\/p>\n
2. Emmet<\/h3>\n
Si vous \u00eates un d\u00e9veloppeur frontal ou si vous passez beaucoup de temps \u00e0 travailler avec du HTML et du CSS, Emmet<\/a> est un compl\u00e9ment indispensable \u00e0 votre bo\u00eete \u00e0 outils. Ce paquet vous permet de saisir des expressions ou des \u00ab\u00a0abr\u00e9viations\u00a0\u00bb CSS dynamiques et de les transformer en code complet.<\/p>\n
Imaginons que vous souhaitiez inclure une liste d’\u00e9l\u00e9ments non tri\u00e9s dans une page HTML. Ce code pourrait ressembler \u00e0 quelque chose comme ceci :<\/p>\n
\n
<\/div>\n