vscode

autocompletar-do-site.code-snippets

{
  // Referência: https://code.visualstudio.com/docs/editor/userdefinedsnippets , https://stackoverflow.com/questions/61478576/vscode-nest-snippet-choices-and-add-tab-stops-to-choices
  // Place your jocile.github.io workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Imagem": {
    "description": "Inserindo imagem a partir do site.data.images",
    "prefix": "![",
    "body": [
      "![$1]({{site.data.images.$1.link}})",
      "_{{site.data.images.$1.caption}}_"
    ]
  },
  "Referência de bibliografia": {
    "description": "Inserindo referência a partir do site.data.references.apostilas",
    "prefix": "[r",
    "body": "[{{site.data.references.apostilas.${1|senac,redes,informatica|}[${2:1}].name}}]({{site.data.references.apostilas.$1[$2].link}})"
  },
  "Youtube thumbnails": {
    "description": "Inserindo thumbnail link para vídeo do youtube",
    "prefix": "[![",
    "body": "[![${2:alt}](http://img.youtube.com/vi/${1:zheD2o16Lb0}/0.jpg){: w=\"200\" h=\"50\" }](http://www.youtube.com/watch?v=${1:zheD2o16Lb0})"
  },
  "Youtube embed": {
    "description": "Embutindo vídeo do youtube",
    "prefix": "{%y",
    "body": "{% include embed/youtube.html id='${1:zheD2o16Lb0}' %}"
  },
  "Bloco": {
    "description": "Bloco de descaque necessita de > antes do texto",
    "prefix": "{:",
    "body": "{: .prompt-${1|info,tip,warning,danger|} "
    //"body": "{: .prompt-${1:info}${2:tip}${3:warning}${4:danger} "
  },
  "cabecalho": {
    "description": "Template de cabeçalho",
    "scope": "markdown,md",
    "prefix": "---",
    "body": [
      "---",
      "title: \"${TM_FILENAME}\"",
      "author: Prof. Jocilé Serra",
      "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:00:00 -0300",
      "categories: [${1:AULAS}, ${2:_subcat}]",
      "tags: [${3:_tags}, ${4:_tags}]",
      "---\n"
    ]
  },
  "subcategorias": {
    "prefix": "_subcat",
    "body": [
      "${1|INFRAESTRUTURA DE REDES,NOÇÕES DE ROBÓTICA,PLANEJAMENTO DE CARREIRA,PROFISSÃO E FORMAÇÃO|}"
    ]
  },
  "tags": {
    "prefix": "_tags",
    "body": [
      "${1|Senac,informática,infraestrutura,robótica,carreira,profissão|}"
    ]
  },
  "post cloned": {
    "description": "Copia um post em outro",
    "prefix": "{%_postInclude",
    "body": "{% include_relative ${CURRENT_YEAR}-${1:${CURRENT_MONTH}}-${2:${CURRENT_DATE}}-${0:post}.md %"
  },
  "Referência": {
    "description": "Link de referência",
    "prefix": "#r",
    "body": "## Referências"
  },
  "Vídeos de referência": {
    "description": "Tabela de vídeos de referência",
    "prefix": "|v",
    "body": [
      "| Vídeos | descrição |",
      "| ------ | --------- |",
      "| A1     | B1        |",
      "| A2     | B2        |"
    ]
  },
  "Link post": {
    "description": "Link para post",
    "prefix": "[p",
    "body": "[${2:Simulador de redes}]({% post_url 2023-${1:08-09-simulador-de-redes} %})"
  },
  "inserir referencia": {
    "description": "insere referencia biblica",
    "prefix": "{{s",
    "body": "{{site.data.biblia.${1:gen}[${2:4}][${3:25}]}"
  },
  "tooltip": {
    "description": "insere tooltip biblico",
    "prefix": "<a",
    "body": "<a href=\"#\" data-toggle=\"tooltip\" data-original-title=\"{{site.data.biblia.${1:gen}[${2:4}][${3:25}]}}\">${4:Gên} ${2:4}.${3:25}</a"
  }
}

autocomplete.md

Auto complete de código no Vscode

Snippets são pequenos trechos de código pré-definidos que podem ser inseridos rapidamente em seu editor de texto. Eles são uma forma de automação que economiza tempo e ajuda a evitar erros comuns. No Visual Studio Code (VS Code), você pode criar e usar seus próprios snippets personalizados para agilizar o desenvolvimento. Vou explicar como fazer isso:

1. Abra o VS Code.
2. Pressione Ctrl+Shift+P (ou Cmd+Shift+P no macOS) para abrir a paleta de comandos.
3. Digite "Configure User Snippets" e selecione a opção correspondente para abrir o gerenciador de snippets.

Aqui estão os passos detalhados:

1. Abrir o Gerenciador de Snippets:

   • Pressione Ctrl+Shift+P (ou Cmd+Shift+P no macOS).
   • Digite "Configure User Snippets" e selecione a opção correspondente.
   • Escolha a linguagem na qual deseja criar o snippet personalizado ou selecione "Global snippets" para criar um snippet que funcione em qualquer linguagem.

2. Criar um Snippet Personalizado:

   • Após selecionar a linguagem, informe um nome para o arquivo do seu snippet.
   • O arquivo será aberto com um exemplo de snippet vazio.
   • Defina o corpo do snippet com o código que deseja inserir quando o snippet for ativado.
   • Use placeholders como $1, $2, etc., para indicar onde o cursor será posicionado após a inserção do snippet.

3. Exemplo de Snippet:

   • Aqui está um exemplo simples de um snippet chamado "Print to Console":

     {
         "Print to Console": {
             "prefix": "log",
             "body": [
                 "console.log('$1');",
                 "$2"
             ],
             "description": "Prints a message to the console"
         }
     }

     Neste exemplo, o snippet é acionado pelo prefixo "log". Quando ativado, ele insere console.log() e posiciona o cursor nos lugares indicados pelos placeholders.

4. Salvar o Arquivo:

   • Salve o arquivo e seu novo snippet personalizado, na pasta .vscode, que estará pronto para ser usado:

.vscode\nome-do-arquivo.code-snippets

Agora você pode criar seus próprios snippets para agilizar o desenvolvimento no VS Code! 🚀¹²³.

Origem: conversa com o Bing, 02/03/2024 (1) Aprenda a criar seus snippets no VSCode facilmente - Cubos Academy. https://blog.cubos.academy/programacao-snippets-no-vscode/. (2) Como criar seus próprios snippets no Visual Studio Code. https://imasters.com.br/desenvolvimento/como-criar-seus-proprios-snippets-no-visual-studio-code. (3) Snippets in Visual Studio Code. https://code.visualstudio.com/docs/editor/userdefinedsnippets. (4) Code Snippets no Visual Studio Code | by Joel Rodrigues | Medium. https://medium.com/@joelrodrigues/code-snippets-no-visual-studio-code-1acb15cbb58e.