Configuración de VS Code

Cómo configurar VS Code desde cero para convertirlo en una herramienta perfecta para el desarrollo de JavaScript

Recientemente compré una nueva Mac (una MacBook Air) y tuve que instalar un nuevo VS Code, así que me tomé el tiempo de documentar lo que hice para que mi experiencia de codificación fuera equivalente a mi vieja MacBook Pro, que duró la enorme cantidad de 9 años.

Vea también mi publicación de introducción a VS Code

Esto es lo que hice:

1. Instalé Fira Code y lo configuré como mi familia de fuentes
2. Establecí el tamaño de la pestaña en 2 (esta es mi religión). Espacios. 2 espacios.
3. Agregué **/node_modulesarchivos excluidos para evitar que aparezcan en la lista de archivos.
4. Habilité Formato al pegar y Formato al guardar
5. Ligaduras de fuentes habilitadas
6. Se deshabilitó el minimapa
7. Habilitar el recorte de espacios en blanco finales
8. Instalé el complemento Sublime Text Keymap . Ofrece un cmd-K cmd-Bacceso directo para mostrar u ocultar la barra lateral, cmd-Wcerrar un archivo y más.

A continuación instalé algunos temas. Depende de tus gustos. A mí me gusta alternar entre

• Tema Palenight
• Nostromo
• Ave nocturna
• Ayu

Luego instalé estas extensiones:

• Más bonita
• IntelliSense para nombres de clases CSS
• Intención 4 a 2
• ESLint
• Acción duplicada
• Par de soportes para colorear 2
• Babel ES6/ES7
• Fragmentos de código de ES7 React/ Redux / GraphQL /React-Native
• TODO Resaltar

Este es un buen conjunto para comenzar a trabajar con JavaScript y React.

Este es mi JSON de configuración de usuario después de configurar todo según mi gusto y necesidades:Te recomendamos Significado de los nombres

{ "editor.fontFamily": "Fira Code", "editor.tabSize": 2, "editor.wordWrap": "bounded", "files.exclude": { "**/node_modules": true }, "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.minimap.enabled": false, "workbench.colorTheme": "Tomorrow Night Blue", "files.trimTrailingWhitespace": true, "workbench.activityBar.visible": false, "window.zoomLevel": 2, "editor.cursorBlinking": "smooth", "editor.fontLigatures": true, "prettier.jsxBracketSameLine": true, "prettier.jsxSingleQuote": true, "prettier.singleQuote": true, "prettier.semi": false, "[markdown]": { "editor.renderWhitespace": "all", "editor.acceptSuggestionOnEnter": "off", "editor.parameterHints.enabled": false, "editor.quickSuggestions": false, "editor.snippetSuggestions": "none", }}

La [markdown]sección agrega una configuración específica de Markdown. En este caso, deshabilito todas las ventanas emergentes que me distraen mientras escribo y que, de otro modo, son útiles al codificar.

Eso es todo.

¡Consulta también la configuración de VS Code para el desarrollo de React !

¡Feliz codificación!

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Configuración de VS Code

Cómo configurar VS Code desde cero para convertirlo en una herramienta perfecta para el desarrollo de JavaScript

programar

es

2025-01-17

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente