VSCode simples para aspas duplas substituição automática


98

Quando eu executo um Format Documentcomando em um arquivo Vue Component.vue, o VSCode substitui toda a string entre aspas simples por string entre aspas duplas.

No meu caso específico, essa regra entra em conflito com a configuração de elétron-vue lint que exige aspas simples.

Não tenho extensões mais bonitas instaladas (não prettier.singleQuotena minha configuração)

Como personalizar o VSCode para evitar isso?


Respostas:


130

Não tenho a prettierextensão instalada, mas depois de ler a possível resposta duplicada que adicionei do zero em minha configuração do usuário ( UserSetting.json, Ctrl +, atalho):

"prettier.singleQuote": true

Uma parte um aviso verde ( Unknown configuration setting) as aspas simples não são mais substituídas.

Suspeito que a extensão mais bonita não está visível, mas está embutida na extensão Vetur .


2
Isso não funcionou para mim. Eu tive que usar em seu vetur.format.defaultFormatterOptionslugar. Consulte https://vuejs.github.io/vetur/formatting.html#settings .
user1620220

Após abrir a busca rápida, digite "> configurações do usuário" e clique em "Preferências: Abrir configurações do usuário". Na caixa de pesquisa de suas preferências, digite "mais bonita.singleQuote" e clique na caixa de seleção para aspas simples mais bonitas.
Kody

3
Isso não funcionou para mim, quote_type = singlena [*.myDesiredFileExtension]seção dentro do .editorconfigarquivo, era a solução.
Solitário

75

Bem, como o cara (@ user2982122) mencionado, mas em vez de Arquivo, vá para Código -> Preferências -> Configurações, procure por Citação , selecione Mais bonito e marque as duas caixas

insira a descrição da imagem aqui insira a descrição da imagem aqui


1
Você precisa recarregar essas configurações para que elas tenham efeito? Eu marquei os dois, mas quando salvo meu arquivo .jsx, as aspas duplas não mudam para simples.
J Woodchuck

Isso é estranho, estou usando esta versão: Release 1.14 build 1.14.0-17740
mustapha mekhatria

54

Para projetos que usam .editorconfigarquivo por padrão. O formatador irá ignorar as regras nas configurações e usar as regras em .editorconfig, então você pode:

  • Remova o .editorconfigarquivo e use as configurações do VSCode.
  • Adicione quote_type = singleao .editorconfigarquivo em relação ao seu tipo de arquivo. Você também pode definir o quote_typevalor para doubleou auto.

1
Eu fiz isso e não funcionou, independentemente se instalei editorconfig globalmente ou tentei processar o editorconfig para VS Code. :(
acarlstein

Obrigado, meu aplicativo Angular usa .editorconfigpor padrão (não sabia disso) e sua solução corrigiu meu problema
benshabatnoam

29

Parece que é um bug aberto para este problema: Bug mais bonito

Nenhuma das soluções acima funcionou para mim. A única coisa que funcionou foi adicionar esta linha de código em package.json:

"prettier": {
    "singleQuote": true
  },


11

Solução correta:

Eu adiciono o arquivo .prettierrc.js no meu projeto raiz principal e escrevo

module.exports = {
    singleQuote: true
  };

Eu tentei isso, mas gerou um erro: "ESLint: Falha ao carregar a configuração" defaults / configurations / eslint "para estender." Melhor seria adicionar isso em package.json. Solução
Avjol Sakaj

você colocou seu arquivo .prettierrc.js na raiz do projeto?
Omar Hasan

9

considere .editorconfigsubstituir tudo, use:

[*]
quote_type = single

7

Para iniciantes como eu:

No menu da barra de navegação na parte superior: Selecione Arquivo -> Preferências -> Configurações. Na caixa de texto de pesquisa, digite Citação. Na lista filtrada que aparece abaixo, procure o ícone de engrenagem e, ao lado dele - "Mais bonito". Clique na caixa de seleção para habilitar "Mais bonito: aspas simples"


6

Conforme observado por @attdona, a extensão Vetur inclui mais bonita.

Embora você possa alterar as configurações mais bonitas, de acordo com a resposta aceita, você também pode alterar o formatador para regiões específicas de um componente vue.

Aqui, por exemplo, configurei Vetur para usar o formatador vscode-typescript, pois ele usa aspas simples por padrão:

configurações vscode vetur



6

Experimente uma dessas soluções

  1. No arquivo vscode settings.json, adicione esta entrada "prettier.singleQuote": true
  2. No vscode, se você tiver um .editorconfigarquivo, adicione esta linha sob o símbolo raiz [*]quote_type = single
  3. No vscode se você tiver um .prettierrcarquivo, adicione esta linha
{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

1
segunda opção funcionou, infelizmente as outras respostas nesta página não funcionaram
Mo.

5

Eu tive o mesmo problema no vscode. Basta criar um arquivo .prettierrc em seu diretório raiz e adicionar o seguinte json. Para aspas simples, adicione:

{
  "singleQuote": true
}

Para aspas duplas, adicione:

  {
      "singleQuote": false
  }

5

Só havia solução que funcionou para mim: e apenas para Projetos Angular:

Basta acessar o arquivo ".editorconfig" do seu projeto e colar 'quote_type = single'. Espero que funcione para você também.


3

Eu adicionei o arquivo chamado .prettierrcna minha pasta do projeto. Conteúdo do arquivo:

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

2

Você pode usar isso em settings.json

"javascript.preferences.quoteStyle": "single"


1

Para mim, posso verificar aspas simples no Prettier e também tslint.autoFixOnSave como verdadeiro

insira a descrição da imagem aqui

insira a descrição da imagem aqui


1

Instale uma extensão mais bonita e cole o código abaixo em seu settings.jsonarquivo VSCode

 "prettier.useEditorConfig": false,
 "prettier.singleQuote": true

isso irá ignorar a configuração do arquivo .editorconfig.


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.