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

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

1

Jika tidak, Anda dapat menggunakan ESLint untuk menyorot kesalahan ES7 (menggunakan parser babel atau lainnya): VSCode Linter ES6 ES7 Babel linter

— Damien Leroux
sumber

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