Czy istnieje sposób, aby włączyć obsługę składni ES6 / ES7 w Vscode?


103

Edycja 3: Począwszy od wersji 0.4.0, składnię ES6 można włączyć, dodając jsconfig.jsondo folderu projektu plik o następującej zawartości:

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

Edycja 2: Możesz głosować na tę funkcję głosem użytkownika


Czy istnieje sposób na „włączenie” ES6 / ES7 w programie Visual Studio Code?

zrzut ekranu

Edytuj 1

Wypróbowano sugestię @ sarvesh - zastąpiono javascript.validate.targeti ponownie uruchomiono vscode. Nie pomogło.


3
Czy mógłbyś podać to jako odpowiedź, a nie poprawkę w swoim pytaniu?
Jeroen Vannevel

Odpowiedzi:


28

Obecnie jedynym sposobem korzystania z funkcji ES6 i ES7 jest użycie Typescript .

Z drugiej strony tutaj widać, że istnieje żądanie funkcji dla ES6 i ES7


1
Aktualizacja: Looks ES6 będzie dostępny od lipca 2015 r. - visualstudio.uservoice.com/forums/293070-visual-studio-code/…
ToddSmithSalter

Wydaje się całkiem nieźle. Jednak ogólnie rzecz biorąc, jest jeszcze dużo do zrobienia.
mzdv

2
Używam najnowszej wersji. 0.8.0Nadal widzę błąd kolorowania funkcji grubych strzałek ... dlaczego?
vanthome

@vanthome musisz wskazać tablicę plików, którą chcesz pisać za pomocą es6, sprawdź link: code.visualstudio.com/Docs/languages/javascript
TlonXP

@TionXP masz na myśli podejście jsconfig.json? Cóż, nie próbowałem tego, ale spodziewam się, że zadziała, jeśli włączę to globalnie. Nie chcę mówić plik po pliku VSCode, że chcę używać ES6.
vanthome

58

To całkiem proste, w katalogu głównym projektu utwórz plik jsconfig.json i zapisz w nim ten obiekt:

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

Działa świetnie, dzięki! Najwyraźniej umieścili to w vscode tego lata: blogs.msdn.com/b/vscode/archive/2015/07/06/vs-code-es6.aspx Zatem powyższa odpowiedź nie jest już poprawna.
Tom

9
dodaj "experimentalDecorators": truedla dekoratorów es7
Meirion Hughes

A co z importem ES6? Czy punkty debugowania / przerwania będą działać? Wydaje się, że nie działa "module": "es2015".
arve0

To nie działa dla mnie. Mam tego faceta problem stackoverflow.com/questions/35110019/…
pusty jack

43

Ten link bardzo pomógł. Dodanie pliku jsconfig.json do projektu niewiele pomogło lub raczej nie jest najlepszym rozwiązaniem. Przejdź do pliku> preferencje> ustawienia. W pliku settings.json dodaj tę linię:

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

5

Dodawanie do powyższych odpowiedzi ...

Zgodnie z Docs of VS Code.

Upewnij się, że plik jsconfig.json jest umieszczony w katalogu głównym projektu JavaScript, a nie tylko w katalogu głównym obszaru roboczego. Poniżej znajduje się plik jsconfig.json, który definiuje cel JavaScript jako ES6, a atrybut exclude wyklucza folder node_modules.

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

Oto przykład z jawnym atrybutem plików.

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

Atrybut files nie może być używany w połączeniu z atrybutem exclude. Jeśli określono oba, pierwszeństwo ma atrybut files.

spróbuj także edytować właściwość „target” w 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"
  ]
}

Co to oznacza: „w katalogu głównym projektu JavaScript, a nie tylko w katalogu głównym obszaru roboczego”?
Jared Christensen

Dlaczego nie można po prostu odebrać vs kodu .babelrc? Po co ta cała zduplikowana konfiguracja? grumbl
Stijn de Witt



0

Od tego dnia i zgodnie z dokumentacją ESLint na VSCode Marketplace, w tym plik konfiguracyjny .eslintrc w katalogu głównym projektu, umożliwia linting ES6 w rozszerzeniu ESLint VSCode.

Mój plik konfiguracyjny .eslintrc wygląda następująco:

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

Mam zainstalowany eslint przez npm w node_modules i wiem tylko, że z .eslintrc w folderze głównym projektu ES6 działa linting i bez niego nie.

Mam nadzieję że to pomoże...

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.