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:

{
  "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í.

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.

1

Instala Node.js utilizando el administrador de paquetes de su sistema operativo.
2

Instala eslint con el comando npm install -g eslint. Es posible que necesites usar sudo.
3

Instala 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
4

eslint 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
5

Instala 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.

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.

Inicio Guias

Leer otros artículos de Guías

Lea otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.

Cómo estudiar y lidiar con pensamientos negativos

Cómo buscar información técnica

Cómo aprender a usar a ciegas el teclado

Cómo configurar Atom para el desarrollo de JavaScript

¿Qué es el protocolo SSH?

Bootstrap en palabras sencillas: qué es, para qué sirve y cómo funciona el framework