Existe uma maneira de ativar o suporte à sintaxe ES6 / ES7 no vscode?

103

Edição 3: a partir da versão 0.4.0, a sintaxe ES6 pode ser ativada adicionando um jsconfig.jsonarquivo à pasta do projeto com o seguinte conteúdo:

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

Edição 2: você pode votar neste recurso na voz do usuário


Existe uma maneira de "ativar" o ES6 / ES7 no Visual Studio Code?

captura de tela

Editar 1

Tentei a sugestão de @sarvesh - substituiu javascript.validate.targete reiniciou o vscode. Não ajudou.

Jeremy Danyow
fonte
3
Você se importaria de colocá-lo como uma resposta em vez de uma edição em sua pergunta?
Jeroen Vannevel

Respostas:

28

Atualmente, a única maneira de usar os recursos ES6 e ES7 é usar o Typescript .

Por outro lado, aqui você pode ver que há uma solicitação de recurso para ES6 e ES7

mzdv
fonte
1
Atualização: Looks ES6 estará disponível a partir de julho de 2015 - visualstudio.uservoice.com/forums/293070-visual-studio-code/…
ToddSmithSalter
Parece muito bom. Ainda assim, há trabalho a ser feito em geral.
mzdv
2
Estou usando a versão mais recente 0.8.0. Ainda vejo erro de coloração para funções de setas grandes ... por quê?
vanthome
@vanthome você precisa indicar a matriz de arquivos que deseja escrever com es6, verifique o link: code.visualstudio.com/Docs/languages/javascript
TlonXP 09/10/2015
@TionXP você quer dizer a abordagem com jsconfig.json? Bem, eu não tentei isso, mas espero que funcione se eu ativá-lo globalmente. Não quero dizer ao VSCode arquivo por arquivo que desejo usar o ES6.
vanthome de
58

É muito fácil, na raiz do seu projeto, crie um arquivo jsconfig.json e escreva este objeto nele:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}
Oliv
fonte
Funciona muito bem, obrigado! Aparentemente, eles incluíram isso no vscode neste verão: blogs.msdn.com/b/vscode/archive/2015/07/06/vs-code-es6.aspx Portanto, a resposta acima não está mais correta.
Tom
9
adicionar "experimentalDecorators": truepara decoradores es7
Meirion Hughes
E as importações ES6? Os pontos de depuração / interrupção funcionarão? Não parece funcionar com "module": "es2015".
arve0
Isso não funciona para mim. Tenho o problema desse pessoal stackoverflow.com/questions/35110019/…
jack blank
43

Este link ajudou muito. Adicionar o arquivo jsconfig.json ao projeto não ajudou muito, ou melhor, não é a melhor solução. Vá para arquivo> preferências> configurações. No arquivo settings.json, adicione esta linha:

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

Somando as respostas acima ...

Conforme Docs of VS Code ..

Certifique-se de colocar o jsconfig.json na raiz do seu projeto JavaScript e não apenas na raiz do seu espaço de trabalho. Abaixo está um arquivo jsconfig.json que define o destino do JavaScript como ES6 e o ​​atributo exclude exclui a pasta node_modules.

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

Aqui está um exemplo com um atributo de arquivos explícito.

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

O atributo files não pode ser usado em conjunto com o atributo exclude. Se ambos forem especificados, o atributo de arquivos terá precedência.

também tente editar a propriedade "target" em 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"
  ]
}
Inácio André
fonte
O que isso significa: "na raiz do seu projeto JavaScript e não apenas na raiz do seu espaço de trabalho"?
Jared Christensen de
Por que o vs código não pode simplesmente pegar .babelrcetc? Por que toda a configuração duplicada? resmungo
Stijn de Witt
0

Como alternativa, você pode usar Flow em vez de Typescript, que é muito mais fácil de configurar e migrar. Escrevi um pequeno artigo sobre como configurar o Flow com VS Code .

Petr Peller
fonte
0

A partir desta data e de acordo com a ESLint documentos no VSCode Marketplace, incluir um arquivo de configuração .eslintrc na raiz do projeto permite o ES6 linting na extensão ESLint VSCode.

Meu arquivo de configuração .eslintrc se parece com este:

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

Eu instalei o eslint via npm em node_modules e tudo que sei é que com .eslintrc na pasta raiz do projeto ES6 linting funciona e sem ele, não funciona.

Espero que isto ajude...

VanAlbert
fonte