¿Hay alguna forma de activar la compatibilidad con la sintaxis de ES6 / ES7 en vscode?

103

Edición 3: a partir de la versión 0.4.0, la sintaxis de ES6 se puede activar agregando un jsconfig.jsonarchivo a la carpeta del proyecto con el siguiente contenido:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

Edición 2: puede votar por esta función en la voz del usuario


¿Hay alguna forma de "activar" ES6 / ES7 en Visual Studio Code?

captura de pantalla

Editar 1

Probé la sugerencia de @ sarvesh: anuló javascript.validate.targety reinició vscode. No ayudó.

Jeremy Danyow
fuente
3
¿Le importaría ponerlo como una respuesta en lugar de una edición de su pregunta?
Jeroen Vannevel

Respuestas:

28

Actualmente, la única forma de utilizar las funciones de ES6 y ES7 es utilizar Typescript .

Por otro lado, aquí puede ver que hay una solicitud de función para ES6 y ES7

mzdv
fuente
1
Actualización: Parece ES6 estará disponible a partir de julio el año 2015 - visualstudio.uservoice.com/forums/293070-visual-studio-code/...
ToddSmithSalter
Parece bastante bueno. Aún así, hay trabajo por hacer en general.
mzdv
2
Estoy usando la última versión 0.8.0. Todavía veo colores de error para las funciones de flecha gruesa ... ¿por qué?
vanthome
@vanthome, debe indicar la matriz de archivos que desea escribir con es6, verifique el enlace: code.visualstudio.com/Docs/languages/javascript
TlonXP
@TionXP, ¿te refieres al enfoque jsconfig.json? Bueno, no lo intenté, pero espero que esto funcione si lo habilito globalmente. No quiero decirle a VSCode archivo por archivo que quiero usar ES6.
vanthome
58

Es bastante fácil, en la raíz de su proyecto, cree un archivo jsconfig.json y escriba este objeto en él:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}
Oliv
fuente
Funciona muy bien, gracias! Aparentemente, incluyeron esto en vscode este verano: blogs.msdn.com/b/vscode/archive/2015/07/06/vs-code-es6.aspx Entonces, la respuesta anterior ya no es correcta.
Tom
9
add "experimentalDecorators": truefor es7 decorators
Meirion Hughes
¿Qué pasa con las importaciones de ES6? ¿Funcionarán los puntos de depuración / interrupción? No parece funcionar con "module": "es2015".
arve0
Esto no funciona para mí Tengo este problema de chicos stackoverflow.com/questions/35110019/…
jack blank
43

Este enlace ayudó mucho. Agregar el archivo jsconfig.json al proyecto no ayudó mucho o, más bien, no es la mejor solución. Vaya a archivo> preferencias> configuración. En el archivo settings.json agregue esta línea:

"jshint.options": { "esversion": 6 }
achola
fuente
5

Agregando a las respuestas anteriores ...

Según los documentos de VS Code.

Asegúrese de colocar jsconfig.json en la raíz de su proyecto de JavaScript y no solo en la raíz de su espacio de trabajo. A continuación se muestra un archivo jsconfig.json que define el destino de JavaScript como ES6 y el atributo de exclusión excluye la carpeta node_modules.

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}

A continuación, se muestra un ejemplo con un atributo de archivos explícito.

{
    "compilerOptions": {
        "target": "ES6"
    },
    "files": [
        "src/app.js"
    ]
}

El atributo de archivos no se puede utilizar junto con el atributo de exclusión. Si se especifican ambos, el atributo de archivos tiene prioridad.

también intente editar la propiedad "target" en tsconfig.json

{
  "compilerOptions": {
    "target": "es5",//es6
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}
Ignacio Andrés
fuente
¿Qué significa esto: "en la raíz de su proyecto JavaScript y no solo en la raíz de su espacio de trabajo"?
Jared Christensen
¿Por qué el código vs no puede simplemente recoger, .babelrcetc.? ¿Por qué toda la configuración duplicada? grumbl
Stijn de Witt
0

Alternativamente, puede usar Flow en lugar de Typecript, que es mucho más fácil de configurar y migrar. Escribí un pequeño artículo sobre cómo configurar Flow con VS Code .

Petr Peller
fuente
0

A partir de esta fecha y de acuerdo con los documentos de ESLint en VSCode Marketplace, incluir un archivo de configuración .eslintrc en la raíz del proyecto habilita ES6 linting en la extensión ESLint VSCode.

Mi archivo de configuración .eslintrc se ve así:

extends:
  - standard
parser: babel-eslint
rules:
  object-curly-spacing: [ error, always ]
  react/prop-types: off
  space-before-function-paren: off

Tengo eslint instalado a través de npm en node_modules y todo lo que sé es que con .eslintrc en la carpeta raíz del proyecto ES6 linting funciona y sin él, no.

Espero que esto ayude...

VanAlbert
fuente