
Los editores de código han evolucionado a lo largo de los años. Hace unos años, no existía Visual Studio Code (VS Code). Probablemente estaba usando Sublime Text, Atom, Bracket, etc. Pero con el lanzamiento de VS Code, se ha convertido en el editor de código favorito de la mayoría de los desarrolladores.
¿Por qué VS Code?
A los desarrolladores les encanta porque
- Es personalizable
- Fácil depuración
- Hormiga
- Extensiones
- Integración de Git
- Terminal integrado
- Intellisense
- Tematización y más ...
Ahora que ha visto las ventajas de usar VS Code, este artículo cubrirá la configuración de VS Code y las extensiones necesarias al usar VS Code para una máxima productividad.
Terminal
Puede configurar su terminal para usar iTerm2 y ZSh y tener su terminal VS Code configurado para usar eso.
Después de configurar Zsh, inicie el terminal integrado de VS Code Terminal > New Termi
y ejecute el comando
source ~/.zshrc
o
. ~/.zshrc
para ejecutar el contenido del archivo de configuración .zshrc en el shell.
Fuente
FiraCode se ve genial debido al soporte para ligaduras. Descargue e instale FiraCode, luego agréguelo a su settings.json
archivo.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,
Lanzamiento desde la línea de comando
Lanzar VS Code desde la terminal parece genial. Para hacer esto, presione CMD + SHIFT + P, escriba el comando shell y seleccione Instalar comando de código en la ruta . Luego, navegue a cualquier proyecto desde la terminal y escriba code .
desde el directorio para iniciar el proyecto usando VS Code.
Configuración
Las configuraciones de VS Code que no son específicas de un espacio de trabajo se encuentran dentro de settings.json. Puede configurar VS Code para que se adapte a sus preferencias.
Para iniciar settings.json, presione
CMD + ,
Copie y pegue el código a continuación dentro del archivo settings.json:
{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "editor.wordWrap": "bounded", "editor.trimAutoWhitespace": true, "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.formatOnSave": true, "files.autoSave": "onFocusChange", "emmet.syntaxProfiles": { "javascript": "jsx" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact" ], "javascript.validate.enable": true, "git.enableSmartCommit": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 2, "gitlens.historyExplorer.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "workbench.sideBar.location": "right", "explorer.confirmDelete": false, "javascript.updateImportsOnFileMove.enabled": "always",}
Extensiones
A continuación, se incluyen extensiones útiles que pueden mejorar su experiencia de desarrollador cuando trabaja en una base de código.
Para acceder a estas extensiones,
- Ir a
View -> Extensi
ons - Busque extensiones en el mercado
- Haga clic en Instalar
1. Importación automática
Con esta extensión, no es necesario importar archivos manualmente. Si está trabajando en un proyecto basado en componentes, siga adelante y escriba el nombre del componente y se importará automáticamente.

2. Agregar comentarios de jsdoc
Esto agrega un bloque de comentarios al código. Para usarlo, resalte la primera línea de la función, presione CMD + SHIFT + P
y seleccione Agregar comentarios de documentos.

3. ESDoc MDN
En ciertos escenarios, tendemos a olvidar cómo funciona una cosa en particular. Aquí es donde esta extensión se vuelve útil. No es necesario que inicie su navegador web para conocer la sintaxis. Todo lo que necesitas es escribir
//mdn [object].[method];

4. CSS Peek
Como su nombre lo indica, esto le ayuda a echar un vistazo a las reglas aplicadas por un estilo definido dentro de una base de código y su especificidad. Resulta útil cuando se trabaja con bases de código heredadas.

5. GitLens
GitLens aumenta lo que puede lograr con Git. Te ayuda a hacer mucho más, como explorar sin problemas los repositorios de Git, echar un vistazo a las revisiones de código, la autoría y mucho más.

6. ESLint
Esto integra ESLint en VS Code para filtrar sus códigos. El proyecto en el que está trabajando debe tener ESLint instalado local o globalmente para aprovechar las funciones que ofrece esta extensión.
Para instalar ESLint localmente, ejecute
npm install eslint
o usando globalmente
npm install -g eslint
También necesitaría crear .eslintrc
un archivo de configuración. Si instaló ESLint localmente, ejecute
./node_modules/.bin/eslint --init
o
eslint --init
para instalación global.
7. Depurador para Chrome
Esto le permite depurar su código JavaScript directamente desde el navegador Google Chrome.

8. Google Fonts
Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P
and search for Google fonts to proceed.

9. TODO Highlight
With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.
10. Docker
You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.
Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker
This comes in handy to identify typographical errors within the codebase.
12. Import Cost
Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint
This extension validates your HTML helping you to write standards-compliant code.

14. Peacock
This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.
{ "workbench.colorCustomizations": { "activityBar.background": "#e90b8d", "activityBar.foreground": "#fff", "activityBar.inactiveForeground": "#b5b5b5", }, "peacock.affectedElements": [ "activityBar", ]}
You can also add titleBar
and statusBar
to the affectedElements and add color customizations for them within the colorCustomizations section.
To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.
15. Prettier
Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.
Check out the awesome things you can do with Visual Studio Code here.
Feel free to drop what works for you in the comment section and share this article.
Also, check out my blog for more articles.