No siguis un mico programador. Usa aquestes extensions de VSCode per convertir-te en un ninja del codi.
Sé el que estàs pensant: “Sóc un veritable desenvolupador front-end, no necessito extensions. Ho faré tot a mà com un veritable home.” T’aplaudeixo, però les extensions de VSCode poden fer la teva vida molt més fàcil. T’ajudaran a escriure millor codi, trobar bugs més ràpid i estalviar temps en tasques repetitives.
Les Millors Extensions de VSCode
- Prettier - Code Formatter
- ESLint
- GitHub Copilot
- GitLens — Git supercharged
- Tailwind CSS IntelliSense
- Auto Rename Tag
- Color Highlight
- Auto Close Tag
- CSS Peek
- Live Server
- ES7+ React/Redux/React-Native snippets
- Better Comments
- Material Icon Theme
- Dracula Official
- Pretty TypeScript Errors
Prettier - Code Formatter
Prettier és un formatador de codi amb opinió que automàticament formatarà el teu codi a un estil consistent. Aquesta extensió és genial per a equips que volen fer complir la consistència, o simplement perquè no hagis de preocupar-te per formatar el teu codi.
Amb més de 34 milions d’instal·lacions, podries dir que és popular.
ESLint
ESLint és un linter configurable per ajudar-te a trobar i corregir problemes en el teu codi JavaScript. Es pot usar tant per a desenvolupament frontend com backend, i és una excel·lent manera de detectar bugs abans que succeïssin. Pot verificar errors com variables no utilitzades, punt i coma faltants, i més.
GitHub Copilot
GitHub Copilot és un programador de parells impulsat per IA que t’ajuda a escriure millor codi, més ràpid. Encara que aquesta és una eina de pagament (actualment $10/mes), pot ser un gran estalvi de temps per als desenvolupadors.
INFO
Si ets un estudiant verificat, professor, o mantenidor d’un repositori popular de codi obert a GitHub, pots obtenir Copilot gratis.
GitLens — Git supercharged
GitLens és una extensió de VSCode que, bé, sobrecarrega les teves funcions de git. Et permet veure qui va editar per última vegada una línia de codi, quan va ser editada per última vegada, i més.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense és una extensió que proporciona autocompletat intel·ligent, ressaltat de sintaxi i linting per a Tailwind CSS.
Si estàs fent servir Tailwind CSS, voldràs aquesta extensió al 100%.
TIP
Si no estàs usant Tailwind CSS, hauries 😊
Auto Rename Tag
Auto Rename Tag és una extensió bastant simple, però un gran estalvi de temps. Si canvies l’obertura d’una etiqueta HTML, automàticament actualitzarà l’etiqueta de tancament. Això assegura que les teves etiquetes sempre coincideixin.
Color Highlight
Color Highlight és una extensió simple que ressaltarà els colors en el teu codi. Això és genial per veure ràpidament a quin color està configurada una variable, o si estàs usant el color correcte en el teu CSS.
Auto Close Tag
Auto Close Tag és una altra extensió simple que pot estalviar-te temps. Tancarà automàticament les etiquetes HTML per tu. Així que quan escriguis <div>, automàticament afegirà el </div> per coincidir.
CSS Peek
CSS Peek és una gran extensió per a desenvolupadors frontend. Et permet veure ràpidament el CSS per a un element HTML donat. Això és genial quan estàs tractant d’esbrinar per què un cert element està estilitzat d’una certa manera.
Live Server
Live Server és una extensió de VSCode que et permet executar un servidor local amb recàrrega en viu. Això és genial quan estàs aprenent inicialment desenvolupament web amb arxius bàsics HTML, CSS i JS, ja que actualitzarà la teva vista prèvia en temps real!
INFO
Si estàs usant un framework, el més probable és que aquesta extensió sigui innecessària. El teu framework tindrà una característica similar incorporada per a la recàrrega en viu.
ES7+ React/Redux/React-Native snippets
ES7+ React/Redux/React-Native snippets és una col·lecció de snippets per a React, Redux i React Native. Si escrius codi React, voldràs aquesta extensió.
Better Comments
Better Comments millora els comentaris del teu codi. Proporciona ressaltat de sintaxi per a diferents tipus de comentaris, com mostra la imatge de sota.
Material Icon Theme
Material Icon Theme proporciona icones per a arxius i carpetes a VSCode. Això fa que sigui més fàcil trobar el que estàs buscant, i fa que la teva finestra de codi es vegi més bonica.
Dracula Official
Dracula Official és un tema fosc per a VSCode. És un dels temes més populars al marketplace, i el meu tema favorit personal.
Si no t’agrada aquest tema en particular, hauries d’escollir un tema diferent per instal·lar a VSCode, ja que poden proporcionar suport addicional per al ressaltat de sintaxi.
Pretty TypeScript Errors
Pretty TypeScript Errors proporciona un missatge d’error més llegible i proporciona un enllaç a la documentació de l’error. M’he enamorat d’aquesta extensió per al desenvolupament de TypeScript.
Extensions Bonus
Aquestes són algunes altres extensions que trobo útils, però no van arribar a la llista de primer nivell.
Astro
Astro és una extensió òbvia si estàs desenvolupant usant Astro. Proporciona ressaltat de sintaxi, snippets de codi i més.
TIP
Astro és el meu meta framework d’elecció per a SSG i SSR, que et permet usar qualsevol framework d’UI que vulguis dins d’ell (React, Vue, Solid, etc). El recomano altament.