Gibt es eine Möglichkeit, die ES6 / ES7-Syntaxunterstützung in vscode zu aktivieren?


103

Bearbeiten 3: Ab Version 0.4.0 kann die ES6-Syntax aktiviert werden, indem jsconfig.jsondem Projektordner eine Datei mit folgendem Inhalt hinzugefügt wird :

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

Bearbeiten 2: Sie können für diese Funktion auf Benutzerstimme abstimmen


Gibt es eine Möglichkeit, ES6 / ES7 in Visual Studio Code zu "aktivieren"?

Bildschirmfoto

Bearbeiten 1

Versuchte @ sarveshs Vorschlag - überschrieb javascript.validate.targetund startete vscode neu. Hat nicht geholfen.


3
Würde es Ihnen etwas ausmachen, Ihre Frage als Antwort und nicht als Bearbeitung zu verwenden?
Jeroen Vannevel

Antworten:


28

Derzeit besteht die einzige Möglichkeit, ES6- und ES7-Funktionen zu verwenden, in der Verwendung von Typescript .

Auf der anderen Seite können Sie hier sehen, dass es eine Funktionsanforderung für ES6 und ES7 gibt


1
Update: Looks ES6 wird ab Juli 2015 verfügbar sein - visualstudio.uservoice.com/forums/293070-visual-studio-code/…
ToddSmithSalter

Es scheint ziemlich gut zu sein. Dennoch gibt es im Allgemeinen noch viel zu tun.
mzdv

2
Ich verwende die neueste Version. 0.8.0Ich sehe immer noch Fehler beim Färben von Fettpfeilfunktionen. Warum?
Vanthome

@vanthome Sie müssen das Dateiarray angeben, das Sie mit es6 schreiben möchten, überprüfen Sie den Link: code.visualstudio.com/Docs/languages/javascript
TlonXP

@TionXP meinst du den Ansatz mit jsconfig.json? Nun, ich habe das nicht versucht, aber ich erwarte, dass dies funktioniert, wenn ich es global aktiviere. Ich möchte VSCode nicht Datei für Datei mitteilen, dass ich ES6 verwenden möchte.
Vanthome

58

Es ist ganz einfach: Erstellen Sie im Stammverzeichnis Ihres Projekts eine jsconfig.json-Datei und schreiben Sie dieses Objekt hinein:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}

Funktioniert super, danke! Anscheinend haben sie dies diesen Sommer in vscode aufgenommen: blogs.msdn.com/b/vscode/archive/2015/07/06/vs-code-es6.aspx Die obige Antwort ist also nicht mehr korrekt.
Tom

9
"experimentalDecorators": truefür es7 Dekorateure hinzufügen
Meirion Hughes

Was ist mit ES6-Importen? Funktionieren Debugging- / Haltepunkte? Scheint nicht zu funktionieren "module": "es2015".
Arve0

Das funktioniert bei mir nicht. Ich habe dieses Problem. Stackoverflow.com/questions/35110019/…
Jack Blank

43

Dieser Link hat sehr geholfen. Das Hinzufügen der Datei jsconfig.json zum Projekt hat nicht viel geholfen, oder es ist nicht die beste Lösung. Gehen Sie zu Datei> Einstellungen> Einstellungen. Fügen Sie in der Datei settings.json die folgende Zeile hinzu:

"jshint.options": { "esversion": 6 }

5

Hinzufügen zu den obigen Antworten ...

Gemäß Docs of VS Code ..

Stellen Sie sicher, dass Sie die Datei jsconfig.json im Stammverzeichnis Ihres JavaScript-Projekts und nicht nur im Stammverzeichnis Ihres Arbeitsbereichs platzieren. Unten finden Sie eine Datei jsconfig.json, in der das JavaScript-Ziel als ES6 definiert ist und das Attribut exclude den Ordner node_modules ausschließt.

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

Hier ist ein Beispiel mit einem expliziten Dateiattribut.

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

Das Attribut files kann nicht in Verbindung mit dem Attribut exclude verwendet werden. Wenn beide angegeben sind, hat das Attribut files Vorrang.

Versuchen Sie auch, die Eigenschaft "target" in tsconfig.json zu bearbeiten

{
  "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"
  ]
}

Was bedeutet das: "Im Stammverzeichnis Ihres JavaScript-Projekts und nicht nur im Stammverzeichnis Ihres Arbeitsbereichs"?
Jared Christensen

Warum kann vs Code nicht einfach abholen .babelrcusw.? Warum all die duplizierten Konfigurationen? grumbl
Stijn de Witt



0

Ab diesem Datum und gemäß den ESLint- Dokumenten auf dem VSCode-Marktplatz, einschließlich einer .eslintrc-Konfigurationsdatei im Stammverzeichnis des Projekts, wird ES6-Flusen in der ESLint VSCode-Erweiterung aktiviert.

Meine .eslintrc-Konfigurationsdatei sieht folgendermaßen aus:

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

Ich habe eslint über npm in node_modules installiert und alles was ich weiß ist, dass mit .eslintrc im Projektstammordner ES6 Linting funktioniert und ohne es nicht.

Hoffe das hilft...

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.