Configure VSCode comme ça ou juste supprime-le !

Setup VSCode : mlv.sh/vscode-config-ou-suppr...
Thumbnail credits : ‪@cocadmin‬ pour l'inspiration
▶ TIMECODES
00:00 - Introduction
00:34 - Installation
02:31 - Configuration
07:09 - Thème
08:45 - Shortcuts
10:24 - Snippets React
13:36 - Outro
▶ VIDÉO
Découvrez comment transformer VSCode en une machine de guerre pour le développement! 🚀 Dans cette vidéo, je vous montre étape par étape comment optimiser votre environnement de travail avec des extensions incontournables, des astuces de pro, et des paramètres cachés pour maximiser votre efficacité.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
💬 Mon Discord communautaire : codelynx.dev/discord
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners

[@diabyalmamyyoussouf739]

Génial merci ! J’ai appris plein de trucs ❤

[@melvynxdev]

Avec plaisir 😊

[@chambaderaphael8946]

Pour une fois que je suis en phase avec toi. Pour les dev vue, je rajouterai Volar. Merci pour ta bonne humeur 🎉

[@melvynxdev]

ah oui, je suis d'accord

[@NadfriJS]

Merci pour l'extension Template String Converter, ça va me faire gagner un temps fou!

[@melvynxdev]

Yeah trop bien !

[@user-is4oq5kj9w]

Merci ça ma aider beaucoup surtout pour corriger les erreurs encore UN GRAND MERCI......................................

[@user-if4hy6dv2q]

Merci pour les snippets! Super pratique

[@melvynxdev]

Avec plaisir 😊

[@YizzyM]

T’es un crack! Je te remercie beaucoup

[@melvynxdev]

Merci à toi aussi

[@aliplaysgtr]

De la bombe! merci

[@melvynxdev]

Yeah !

[@zoraherihasimbola2221]

Merci! c'est super pratique

[@melvynxdev]

Merci à toi

[@0x_conspi]

Lesson in there as always !

[@melvynxdev]

thanks you brother

[@CadavreHOPHOP]

Merci !! Grand fan de ce genre de vidéos de configuration, J'avais suivi avec grand plaisir celle de Grafikart publiée il y a plus d'un an, Un truc top qu'il ajoutait c'était si la police choisie le permet d'utiliser un unique caractère pour =>, pour ==>, pour tous les caractères "composés" ! EnableFontLigatures à true !

[@CadavreHOPHOP]

"editor.fontLigatures": true, // allows le != !== //! marche avec certaines polices pas toutes Marche notamment avec la police JetBrains Mono utilisable via cette ligne : "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace", // change la langue

[@melvynxdev]

Ah oui après c'est très controversé ce truc, il y a des gens qui détestent ça.

[@CadavreHOPHOP]

@@melvynxdev Question de goût uniquement ? Ça ne change rien aux performances ou à quoi que ce soit d'autre que visuel on est d'accord ? Adopté pour ma part, mais effectivement l'idée d'un setup et justement d'en faire ce qui nous plaît personnellement 🙏

[@user-vw4hg7qn7s]

Merci: clair et utile: plus de gaspillage de temps ^^

[@melvynxdev]

ahah merde, on prends un seul chemin ici

[@debouzz4831]

Hello le lien n'est pas dans la description :)

[@melvynxdev]

c'est good

[@Willow_PX]

Top la vidéo, mais possible d'avoir le lien Notion dont tu parles ?

[@Willow_PX]

En fait c'est good et j'ai compris la logique de ce code pour les snippets. C'est des regex donc un enfer, mais j'ai créer un snippet pour des comp avec props dans une interface et avec de la décomposition pour appeler les props : { "component-with-props": { "prefix": "compp", "description": "Create base Typescript component with props depending on the name", "scope": "typescriptreact", "body": [ "", "", "export interface ${1:${TM_FILENAME_BASE/([\\x]+)([-_])([\\w])/${1:/capitalize}${3:/capitalize}/g}}Props {", " $2", "}", "", "export default function ${1:${TM_FILENAME_BASE/([\\x]+)([-_])([\\w])/${1:/capitalize}${3:/capitalize}/g}}({ }: ${1:${TM_FILENAME_BASE/([\\x]+)([-_])([\\w])/${1:/capitalize}${3:/capitalize}/g}}Props) {", " return (", " ", " ${1:${TM_FILENAME_BASE/([\\x]+)([-_])([\\w])/${1:/capitalize}${3:/capitalize}/g}}", " ", " );", "}" ] } }

[@melvynxdev]

Exacte, j'ai ajouté le fichier !

[@Warroy_]

très fan de eslint et indentRainbow, je connaissais pas merci

[@melvynxdev]

merci bcp

[@sysencom]

Merci Template String Converter juste ce dont j'avais besoin

[@melvynxdev]

Ah yes !

[@muscimilieng]

Peut être que toi même ne le fais pas, mais je conseille vivement de mettre la barre latérale à droite, comme ça pas de "shift" de l'éditeur quand on l'ouvre ou la ferme

[@melvynxdev]

Ah oui tu fias ça ?

[@muscimilieng]

@@melvynxdev ça parrait bizarre au début mais on s'y fait très vite et le fait de ne pas avoir l'éditeur qui saute à l'affichage / masquage de la barre c'est un vrai confort

[@moisemuhesi1525]

thanks for sharing

[@melvynxdev]

thanks u too

[@monsieurm2904]

Je m'étais fâché avec le code. Mais depuis que je vois tes astuces, je suis accro à VS code. Par contre, je code en Nuxt, c'est pas grave doc?

[@melvynxdev]

Non tkt

[@erickamdem9982]

Merci Melvin,mais dans le fichier notion il n ya pas la configuration de Snippets React: le fichier qu on doit copier coller comme tu le mentione dans la video

[@melvynxdev]

Je viens d'update le fichier !!

[@NNina-yu1os]

Le fichier est ou?

[@NNina-yu1os]

​@@melvynxdevLe fichier est ou?😢

[@CadavreHOPHOP]

@@melvynxdev Effectivement introuvable, et même sur le net en commancant à écrire la regex je ne trouve pas...

[@maxence7340]

Putain t'es bon! Merci

[@melvynxdev]

merci !

[@jedeonlontchi7104]

Hi ! est-ce que c'est possible d'avoir quelques projets à mettre dans son compte GitHub pour présenter ses compétences au recruteur ?

[@melvynxdev]

Hello, j'ai une autre vidéo à ce sujet kzbin.info/www/bejne/hWi9dnyOqdSNe9E

[@manujedimaster]

Jetbrains le sang

[@breheem]

Totalement les logiciels de Jetbrains éteignent VsCode

[@melvynxdev]

aucun rapport avec JavaScript

[@breheem]

@@melvynxdev C'est à dire ?

[@kherset6126]

Salut Melvinx, je suis ta video pas a pas, mais le raccourci cmd + shift + i pour importer ne fonctionne pas chez moi, est ce qu'il y a une dependance a ajouter ou quelque chose du genre ? Il me faut vraiment ce shortcut, il est complètement dingue ! Encore merci pour les conseils :)

[@melvynxdev]

Hello, tu es sur Windows ? Il faut peut-être utiliser CTRL !

[@kherset6126]

@@melvynxdev Salut, non non je travail sur MacBook Air, c’est pour ça que je ne comprends pas ^^’ tout le reste fonctionne même le shortcut cmd + shift + o

[@loiclecolier1652]

@@kherset6126 Hello, j'ai aussi eu le problème. En fait, addMissingImports ne fonctionne que pour les fichiers TypeScript, et non simplement JavaScript. La seule manière de faire fonctionner cette feature en JS est d'ajouter //@ts-check au début du fichier

[@mamadouyeo6322]

très col

[@melvynxdev]

Yeah !!

[@victoraublive7235]

Je met rarement des commentaires. Mais là je suis obligé pour te remercier pour toute la valeur apportée !

[@melvynxdev]

merci beaucoup ❤️

[@VeroniOnTheFlux]

Tu veux pas utiliser biome à la place de prettier et eslint ? Car biome est 25x plus rapide que ses 2 là combiné

[@melvynxdev]

Je l'utilise pas vraiment et je pense pas qu'utiliser les dernier tools à la mode soit bien pour une vidéo comme ça

[@vitruve3765]

​@@melvynxdevl'hôpital Qui se fout de la charité...

[@juliengrg5837]

@@vitruve3765 En même temps Biome ça pue sa mère

[@mathieuchambaud7049]

Y'a pas le fichier Notion 😅

[@jfr-001]

En effet

[@melvynxdev]

c'est pour plus de commentaire tkt

[@mathieuchambaud7049]

@@melvynxdev je suis mort 🤣🤣🤣

[@LucasBouillon]

Une super vidéo ! Le lien Notion a de nouveau disparu.. Possible de le rajouter ?

[@melvynxdev]

Hello, pourtant c'est vraiment le premier lien

[@jonathanconde2202]

J’ajouterais les vim motions mais c’est une toute autre histoire…

[@melvynxdev]

xDD

[@JackyKiky]

Heu, pas de Live server ? C'est plutôt pratique de pouvoir voir ses modifs en temps réel, non ? M'enfin, peut-être que quand on devient vraiment doué en code on en a plus besoin lol

[@melvynxdev]

Non tu utilises toujours une stack qui fait ça pour toi

[@user-qg7tb2dv6r]

Comment agrandir la hauteur du curseur comme dans sublime text "caret_extra_top" et "caret_extra_bottom"

[@melvynxdev]

stop using sublime text

[@Rajae-lk7nk]

hello merci pour la video mais pas de lien Notion 🤔

[@melvynxdev]

C'est le premier lien dans la déscriptoin ! codelynx.dev/c/vscode

[@djibdjib]

Plus que l'extension Vim ;)

[@melvynxdev]

mdr

[@iht4660]

En plus l'extension Vim de VS Code c'est vraiment un Vim adapté pour les gens pas habitués et franchement ça vaut le coup x)

[@juliengrg5837]

Pas de ligatures ? Sinon c'est cool.

[@melvynxdev]

C'est pas essentiel on va idre

[@juliengrg5837]

@@melvynxdev Question de goûts... Pour ma part je trouve ça infiniment + intéressant que indent rainbow qui n'ajoute, pour moi (et je dis bien "pour moi"), aucun confort, par exemple. ;) Si on m'enlevait les ligatures, je le vivrais très mal. :

[@IbragimArt]

machine

[@melvynxdev]

ahaha

[@Youssef-uw3ez]

tu peux faire avec python

[@melvynxdev]

pas forcément

[@user-ux9td7yi6t]

Ça va trop vite pr moi, étant néophyte j´ai du mal a suivre 😢

[@melvynxdev]

Ah merde désolée, télécharge le fichier pour faire tout petit à petit ❤️

[@samuelbarba9989]

Salut

[@melvynxdev]

ehllo

[@TheSephix57]

Sinon vim c'est mieux

[@melvynxdev]

oklm

[@ThearsenikfromGmail]

Vidéo "putacom" (équivalent putaclick pour commentaire). Trop radical comme titre.

[@melvynxdev]

non tkt

[@hamid.bassam.7]

Hello, très utiles/ludique/cool tes vidéos je t'envois que du courage et te souhaite le meilleur. petite contrib si tu remplace ce que t'as dans le Snippet de composant par ${1:${TM_FILENAME_BASE/(?:^|[-_.])([az])/${1:/upcase}/g}} ya les points aussi comme separateur tu peux l'enlever stv , peace and love

[@mohamedbekheira]

puis-je avoir le lien pour le petit bout de code qu'on met dans le snipets comp !? je trouve pas dans le notion 🥲

[@melvynxdev]

Je viens d'update le fichier !!

[@mohamedbekheira]

Merci! t'es au Top@@melvynxdev

[@samuelbarba9989]

Stp je peux avoir ton numéro WhatsApp ou compte telegram ??? Svp

[@melvynxdev]

Hello, non désolé mais tu peux join mon discord codelynx.dev/discord

[@CadavreHOPHOP]

"editor.lineHeight": 1.2, // default: 1.35, une aération du code

[@melvynxdev]

ah sérieux ? J'ai jamais fais

[@CadavreHOPHOP]

@@melvynxdev ça se tente facilement, j'ai changé suite à ta vidéo d'ailleurs ! J'ai la police JetBrains Mono, les ligatures se font avec elle, j'ai installé celle que tu conseilles mais les ligatures ne s'y font pas chez moi (normalement si), donc je ne l'active pas en fin de compte..

[@CadavreHOPHOP]

J'en profite pour te remercier, c'est top ces vidéos tuto ❣️