Cómo configurar VS Code para el desarrollo de JavaScript
Visual Studio Code es un popular editor de código gratuito creado por Microsoft para programadores. VS Code no está relacionado con Visual Studio. VS Code es más rápido que Atom, está en constante desarrollo y se puede ampliar fácilmente con complementos.
- Depurador de código.
- Terminal integrado.
- Herramientas convenientes para trabajar con Git.
- Resaltado de sintaxis para muchos lenguajes populares y formatos de archivo.
- Navegación conveniente.
- Vista previa integrada de Markdown.
- Autocompletado inteligente.
- Administrador de paquetes integrado.
El administrador de paquetes se utiliza para instalar y desinstalar paquetes de extensiones (complementos). Para facilitar el desarrollo de JavaScript tanto en el backend como en el frontend, es necesario instalar varios paquetes.
Para instalar un nuevo paquete, ve al menú desplegable "View" en la pestaña "Extensions" e ingresa el nombre del paquete en el campo de búsqueda, luego haz clic en el botón "Install".
Babel y ES6
VS Code tiene el concepto de "compilación de proyectos". Puedes configurar el editor para que la compilación del proyecto JavaScript convierta el código de ES6 a ES5 legible con Source Maps utilizando Babel.
Agrega una tarea al archivo tasks.json en el directorio .vscode en la raíz de tu proyecto:
Agrega una tarea al archivo tasks.json en el directorio .vscode en la raíz de tu proyecto:
{
"version": "2.0.0",
"type": "shell",
"tasks": [
{
"label": "watch",
"command": "${workspaceRoot}/node_modules/.bin/babel src --out-dir dist -w --source-maps",
"group": "build",
"isBackground": true
}
]
}
Ahora, la combinación de teclas Shift+Ctrl+B (Windows/Linux) o Shift+CMD+B(macOS) iniciará la compilación.
Puedes obtener más información sobre las tareas en el sitio web de VS Code aquí.
Puedes obtener más información sobre las tareas en el sitio web de VS Code aquí.
Estándares de codificacón
Eslint es una utilidad que verifica los estándares de codificación en JavaScript. Es el estándar de facto en el mundo de JS.
Primero, debes instalar eslint en tu sistema y luego instalar la extensión de VS Code que utilizará el linter instalado. Hay diferentes formas de integrar el linter con la extensión. Veremos cómo instalar el linter globalmente en el sistema.
- 1Instala Node.js utilizando el administrador de paquetes de su sistema operativo.
- 2Instala eslint con el comando npm install -g eslint. Es posible que necesites usar sudo.
- 3Instala los complementos que configuran eslint. Sin ellos (por defecto), eslint no realizará ninguna verificación.
npm install -g eslint-config-airbnb-base eslint-plugin-import - 4eslint requiere un archivo de configuración. Cree un archivo .eslintrc.yml en la raíz de su proyecto con el siguiente contenido:
extends:
- 'airbnb-base'
env:
node: true - 5Instala la extensión "linter-eslint" en VS Code.
Autocompletado
VS Code tiene un potente sistema de análisis de código para autocompletar y sugerencias: IntelliSense.
IntelliSense funciona de inmediato, pero para configurar los detalles, debes crear un archivo de configuración jsconfig.json.
IntelliSense funciona de inmediato, pero para configurar los detalles, debes crear un archivo de configuración jsconfig.json.
jsconfig.json
Si colocas un archivo de configuración jsconfig.json en el directorio raíz de tu proyecto de JavaScript, VS Code utilizará esta configuración para trabajar con tu proyecto. Aquí hay un ejemplo de dicho archivo:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Aquí puedes configurar, por ejemplo, qué directorios excluir del sistema de autocompletado IntelliSense. VS Code es compatible con node, webpack, bower, ember y otras herramientas populares. Puedes encontrar la documentación completa sobre jsconfig aquí en el sitio web de VS Code.
Depuración
VS Code tiene un depurador de código integrado. Puede establecer puntos de interrupción y seguir el estado de la aplicación en tiempo real.
Para depurar el código del backend, las funciones integradas son suficientes. Para depurar el código del frontend, debe instalar un complemento para el navegador correspondiente:
Puede obtener más información sobre la depuración en el sitio web de VS Code aquí.
Enlaces
Curso sobre cómo configurar el entorno de trabajo para trabajar en el ecosistema moderno de JavaScript.
Leer otros artículos de Guías
Lea otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.