Código do Visual Studio - Ajustar configuração de cotação de importação


85

Ao trabalhar em TypeScript no Visual Studio Code, a sugestão de importação em um tipo (acionada por espaço + ponto) irá gerar uma importação usando aspas duplas.

Nosso linter TypeScript verifica se aspas simples são usadas sempre que possível.

Como você pode ver abaixo, a sugestão tem aspas duplas ("@angular / ...") Sugestão de importação com aspas duplas

Como posso ajustar a configuração da importação?


Respostas:


87

No VSCode 1.10, isso (infelizmente) ainda não era possível. Mas é um problema para muitos dos usuários, pelo que parece. O tema VSCode está ciente desse problema e você pode acompanhá-lo para saber quando ele é implementado: https://github.com/Microsoft/TypeScript/issues/13270


Atualização de junho de 2018

Desde VSCode 1.24 (junho de 2018), existe uma opção para isso!

"typescript.preferences.quoteStyle": "single"

Para obter mais informações, consulte:

https://code.visualstudio.com/updates/v1_24#_preferences-for-auto-imports-and-generated-code


22
"typescript.preferences.quoteStyle": "single"
— Niko

7
Isso não parece surtir efeito para mim. Ainda recebo citações duplas de sugestões e fragmentos.
— John Knoop de

O mesmo para mim, mudou em todos os níveis possíveis (usuário, espaço de trabalho, projeto) e ainda tem aspas duplas :(
— Kostanos

Não sei qual idioma vocês dois estão usando, mas existem configurações separadas para javascript e typescript. Eu estava me perguntando a mesma coisa, mas defini a configuração do código javascript e não typecript.
— GhostBytes

53

Você também pode definir a linha abaixo nas configurações de usuário do vscode para ajustar essa configuração.

"prettier.singleQuote": true

3
mais bonita é uma extensão, nem todo mundo a usa
— caub

1
É frustrante que as pessoas presumam que você tem ou queira usar o Prettier. A menos que alguém pergunte "como vou com o mais bonito" - acho que é melhor não responder presumindo que ele o tenha.
— Tsar Bomba

@TsarBomba Você tem razão. Esta configuração requer extensão mais bonita para ajustar a cotação. marketplace.visualstudio.com/…
— abdllhbyrktr

15

Corrigi isso usando a configuração do Editor , abra seu arquivo .editorconfig no diretório raiz do seu projeto (se você não tiver, crie esse arquivo) e adicione esta linha após o [*]

[*]
...
quote_type = single

No wiki você pode ver a lista completa de propriedades.


Votado. Restringe as alterações apenas no projeto em que você está trabalhando e globalmente. Observação adicional: reinicie o VS Code para que as alterações tenham efeito.
— EdSF

Apenas para comentar, no VS Code você pode definir configurações de espaço de trabalho que são específicas para aquele projeto também. Isso permitirá que você use aspas simples / duplas especificamente na importação se quiser usar o outro tipo em outro lugar nos arquivos. A mudança .editorconfig será em todo o projeto.
— Cruril de

12

A partir do VS Code 1.21.1 você precisa editar

/usr/share/code/resources/app/extensions/typescript-basics/snippets/typescript.json

No Windows

/ Applications / Visual Studio Code.app/Contents/Resources/app/extensions/typescript-basics/snippets/typescript.json .

No Windows 10 (vscode versão 1.30. * (Configuração do usuário) posterior)

* C: \ Users \ <yourusername> \ AppData \ Local \ Programs \ Microsoft VS Code \ resources \ app \ extensions \ typescript-basics \ snippets \ typescript.json

Na seção 'Importar módulo externo' desse arquivo, faça com que a propriedade da matriz do corpo seja o valor. "import { $0 } from '${1:module}';"A seção ficará assim:

"Import external module.": {
    "prefix": "import statement",
    "body": [
        "import { $0 } from '${1:module}';"
    ],
    "description": "Import external module."
},

1
Essa solução funcionou para mim. Literalmente tentei de tudo, mas só isso resolveu.
— Sosa de

8

Uma alternativa que oferece suporte a essa configuração é a caixa de ferramentas TypeScript .

É configurável por definição genGetSet.pathStringDelimiter, que já possui a importação de aspas simples como padrão.


2
Obrigado por isso! genGetSet.spacedImportLineTambém vale a pena apontar a configuração para que as novas linhas de importação pareçam em import { Router }....vez do padrãoimport {Router}...
— FLGMwt

1
Tanto a resposta quanto o comentário acima são ótimas informações! Obrigado a vocês dois!
— Kris Boyd

7

Vá para "Arquivo> Preferências> Configurações" e adicione nas configurações do usuário:

"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single"

Funciona para mim, obrigado! BTW, você pode adicionar um link para as configurações padrão que apresentam essas opções: code.visualstudio.com/docs/getstarted/settings . // Preferred quote style to use for quick fixes: 'single' quotes, 'double' quotes, or 'auto' infer quote type from existing imports. Requires using TypeScript 2.9 or newer in the workspace.
— Mosh Feu de


2

Você também pode configurar a linha abaixo nas configurações de usuário do vscode para permitir aspas simples na sequência.

Vá para Preferências> Configurações do usuário

"prettier.singleQuote": true

Isso permitirá aspas simples em String. Caso contrário, se você alterar manualmente todas as aspas duplas para aspas simples, isso reverterá ao salvar. Além disso, adicione

"tslint.autoFixOnSave": true

para corrigir automaticamente enquanto salva.


1

Isso já está implementado (conforme mencionado em outra resposta)! Mas provavelmente você ainda não está usando a versão mais recente do TypeScript.

A solução é simples:

Clique no número da versão do TypeScript (por exemplo 2.3.4) entre "TypeScript" e um pequeno rosto sorridente no canto inferior direito. Em seguida, mude para a versão integrada do Visual Studio Code (2.5.3 neste momento).

Depois disso, o código do Visual Studio inferirá o estilo de cotação de importação observando a primeira instrução de importação . Observe que um pequeno rótulo pop-up ainda exibirá aspas duplas de qualquer maneira.

Relatório de erro

Solicitação pull relevante :

Isso adiciona a capacidade de determinar se deve usar aspas simples ou duplas para novas importações adicionadas por meio de correções de código. Quando uma nova importação é adicionada, verificamos as declarações mais importantes do arquivo de origem em busca de declarações de importação ou exportação existentes com especificadores de módulo. Em seguida, usamos o estilo de citação do primeiro que encontrarmos. Se não houver importações existentes no arquivo, voltaremos a usar aspas duplas.


0

As soluções acima não funcionaram para mim

Portanto, aqui está o meu trabalho ao redor, se você usar vscode,: "tslint.autoFixOnSave"true em seu settings.jsonirá corrigir automaticamente essas cotações de importação quando você salvar o arquivo.


DizUnknown Configuration Setting
— Edgar Quintero
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.