Apakah ada cara untuk mengaktifkan dukungan sintaks ES6 / ES7 di vscode?

103

Edit 3: Mulai versi 0.4.0, sintaks ES6 dapat diaktifkan dengan menambahkan jsconfig.jsonfile ke folder proyek dengan konten berikut:

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

Sunting 2: Anda dapat memilih fitur ini pada suara pengguna

Apakah ada cara untuk "mengaktifkan" ES6 / ES7 di Visual Studio Code?

tangkapan layar

Edit 1

Mencoba saran @ javascript.validate.targetsarvesh- mengesampingkan dan memulai ulang vscode. Tidak membantu.

visual-studio-code Jeremy Danyow
sumber
3
Maukah Anda menjadikannya sebagai jawaban daripada mengedit pertanyaan Anda?
Jeroen Vannevel

Jawaban:

28

Saat ini, satu-satunya cara untuk menggunakan fitur ES6 dan ES7 adalah dengan menggunakan Typecript .

Di sisi lain, di sini Anda dapat melihat bahwa ada permintaan fitur untuk ES6 dan ES7

mzdv
sumber
1
Pembaruan: Looks ES6 akan tersedia mulai Juli 2015 - visualstudio.uservoice.com/forums/293070-visual-studio-code/…
ToddSmithSalter
Sepertinya cukup bagus. Namun, secara umum masih ada pekerjaan yang harus diselesaikan.
mzdv
2
Saya menggunakan versi terbaru. 0.8.0Saya masih melihat warna kesalahan untuk fungsi panah gemuk ... mengapa?
vanthome
@vanthome Anda perlu menunjukkan array file yang ingin Anda tulis dengan es6, periksa tautan: code.visualstudio.com/Docs/languages/javascript
TlonXP
@TionXP yang Anda maksud dengan pendekatan jsconfig.json? Saya tidak mencobanya, tetapi saya berharap ini berhasil jika saya mengaktifkannya secara global. Saya tidak ingin memberi tahu VSCode file-by-file bahwa saya ingin menggunakan ES6.
vanthome
58

Ini cukup mudah, di root proyek Anda buat file jsconfig.json dan tulis objek ini di dalamnya:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}
Oliv
sumber
Bekerja dengan baik, terima kasih! Rupanya mereka memasukkan ini ke dalam vscode musim panas ini: blogs.msdn.com/b/vscode/archive/2015/07/06/vs-code-es6.aspx Jadi jawaban di atas tidak lagi benar.
Tom
9
tambahkan "experimentalDecorators": trueuntuk dekorator es7
Meirion Hughes
Bagaimana dengan impor ES6? Akankah debugging / break point berfungsi? Sepertinya tidak bekerja dengan "module": "es2015".
arve0
Ini tidak berhasil untuk saya. Saya punya masalah orang ini stackoverflow.com/questions/35110019/…
jack blank
43

Tautan ini sangat membantu. Menambahkan file jsconfig.json ke proyek tidak banyak membantu atau lebih tepatnya itu bukan solusi terbaik. Buka file> preferensi> pengaturan. Di file settings.json tambahkan baris ini:

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

Menambah jawaban di atas ...

Sesuai Dokumen VS Code ..

Pastikan Anda menempatkan jsconfig.json di root proyek JavaScript Anda dan bukan hanya di root ruang kerja Anda. Di bawah ini adalah file jsconfig.json yang mendefinisikan target JavaScript menjadi ES6 dan atribut exclude mengecualikan folder node_modules.

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

Berikut adalah contoh dengan atribut file eksplisit.

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

Atribut files tidak dapat digunakan bersama dengan atribut exclude. Jika keduanya ditentukan, atribut files akan diutamakan.

juga coba edit properti "target" di 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"
  ]
}
Ignatius Andrew
sumber
Apa artinya: "di root proyek JavaScript Anda dan bukan hanya di root ruang kerja Anda"?
Jared Christensen
Mengapa VS Code tidak bisa langsung mengambil .babelrcdll? Mengapa semua konfigurasi digandakan? grumbl
Stijn de Witt
0

Alternatifnya, Anda dapat menggunakan Flow alih-alih Typecript, yang lebih mudah disiapkan dan dimigrasi. Saya menulis artikel kecil tentang cara mengatur Flow dengan VS Code .

Petr Peller
sumber
0

Mulai tanggal ini dan menurut dokumen ESLint di VSCode Marketplace, termasuk file konfigurasi .eslintrc di root proyek memungkinkan ES6 linting di ekstensi VSCode ESLint.

File konfigurasi .eslintrc saya terlihat seperti ini:

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

Saya telah menginstal eslint melalui npm di node_modules dan yang saya tahu adalah bahwa dengan .eslintrc di folder root proyek ES6 linting berfungsi dan tanpa itu, tidak.

Semoga ini membantu...

VanAlbert
sumber