Cómo configurar VSCode para mejorar su productividad

Programación

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 Termiy 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.jsonarchivo.

"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 -> Extensions
  • 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 + Py 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 .eslintrcun 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.