![\"https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif\"](\"https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif\")
Falaaaa jovem!
\nEstou sumidinha um tempo, mas to voltando aqui hoje para compartilhar uma coisa com você que eu aprendi na última semana. Como criar e publicar uma extensão no vscode!
\nNesses últimos dias decidi me aventurar e vou te contar o que aprendi e como você pode criar sua própria extensão.
\n
No marketplace da microsoft você encontra milhares de extensões que tem o principal objetivo ajudar e melhorar a sua produtividade enquanto você codifica.
\nEm uma certa situação no trabalho precisei criar uma extensão que gerasse alguns arquivos em automático para que aumentasse a produtividade do time de desenvolvimento.
\nAlgo simples e objetivo, traz benefícios como:
\n![\"https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif\"](\"https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif\")
Bom vamos criar uma extensão que gere um arquivo index, testes e estilos(com styled components). Vou utilizar como base o projeto que desenvolvi sobre testes no react, você pode ler o artigo completo de Como criar testes no front-end em ReactJs.
\nMas antes de criar sua extensão você precisa estar com vscode , node, git e ter um projeto react rodando com styled components. Na documentação do vscode você tem algumas funções detalhadas caso precise se informar de alguma função especifica.
\nNossa extensão vai gerar os seguintes códigos automáticos:
\nindex.js
import React from \"react\"\nimport { Container } from \"./styled\"\n\nexport default function NameComponent() {\n return (\n <Container>\n <strong>Hello stranger, NameComponent!</strong>\n </Container>\n )\n}styled.js
import styled from \"styled-components\"\n\nexport const Container = styled.div`\n text-align: center;\n`test.js
import React from \"react\"\nimport { mount } from \"enzyme\"\nimport NameComponent from \"./\"\n\nit(\"Should mount component\", () => {\n const wrap = mount(<NameComponent />)\n expect(wrap.find(\"strong\").at(0).text()).toEqual(\n \"Hello stranger, NameComponent!\"\n )\n})Uma observação importante!
\nO nome NameComponent, vai ser de fato o nome do componente que você quer gerar!
\nCom vscode aberto você vai precisar instalar o Yeoman um gerador de projetos.
\nnpm install -g yo generator-code
Quando tiver instalado rode o seguinte comando:
\nyo code
E você vai ter uma visão parecida com essa:
\nDepois e só acessar o seu projeto que você acabou de criar. E temos a seguinte estrutura de projeto.
\nLogo na lateral vai mostrar uma mensagem de Hello world!
\nShowwww de bolaa,
\nAgora vamos adicionar um item no menu quando apertamos botão direito do mouse em qualquer packege.
\nPara isso você precisa abrir o packege.json, lá e onde você configura todos os parâmetros, comandos de como sua extensão vai ser chamada, pode ser por linha de comando, Menus entre outros, aqui você consegue ver a lista completinha.
\nVamos adicionar no nosso packege.json o seguinte código:
\n...\n\"activationEvents\": [\n\t\"onCommand:extension.gerador-arquivos-react\"\n],\n\"main\": \"./extension.js\",\n\"contributes\": {\n\t\t\"commands\": [\n\t\t\t{\n\t\t\t\t\"command\": \"extension.gerador-arquivos-react\",\n\t\t\t\t\"title\": \"Gerador de arquivos React\"\n\t\t\t}\n\t\t],\n\t\t\"menus\": {\n \"explorer/context\": [\n {\n \"when\": \"true\",\n \"command\": \"extension.gerador-arquivos-react\",\n \"group\": \"navigation\"\n }\n ],\n \"commandPalette\": [\n {\n \"command\": \"extension.gerador-arquivos-react\",\n \"when\": \"editorHasSelection\"\n }\n ]\n }\n\t},\n...E no arquivo extension.js vamos realizar as seguintes alterações:
const vscode = require(\"vscode\")\n\nfunction activate(context) {\n console.log(\n 'Congratulations, your extension \"gerador-arquivos-react\" is now active!'\n )\n let disposable = vscode.commands.registerCommand(\n \"extension.gerador-arquivos-react\",\n function () {\n vscode.window.showInformationMessage(\n \"Hello World from gerador-arquivos-react!\"\n )\n }\n )\n\n context.subscriptions.push(disposable)\n}\nexports.activate = activate\n\nfunction deactivate() {}\n\nmodule.exports = {\n activate,\n deactivate,\n}E você vai ter uma visão semelhante a essa:
\nArquivos criados! Agora vamos, capturar o caminho de onde vai ser gerado o arquivo e pegar o nome da pasta Agora vamos importar os arquivos gerados na pasta template e montar um Map de chave e valor e finalmente gerar nossos arquivos. O arquivo final fica dessa maneira: FEITO! Agora e só testar, crie uma pasta e execute a extensão você vai ter um resultado semelhante a esse: Sensacional né? O Código fonte você encontra aqui! Agora vamos gerar um packege e compartilhar com os amigos, mas antes você precisa definir o publisher no package.json e alterar o readme do projeto: Ele vai gerar um package na raiz do projeto: Para instalar localmente e só rodar: Me conta o que achou aqui nos comentários! Espero ter ajudado, Até a próxima. \nmodule.exports = nameComponent =>\n `import React from \"react\";\nimport { Container } from \"./styled\"\n\nexport default function ${nameComponent}() {\n return (\n <Container>\n <strong>Hello stranger, ${nameComponent}!</strong>\n </Container>\n );\n}\n`\nmodule.exports = nameComponent =>\n `import React from \"react\";\nimport { mount } from \"enzyme\";\nimport ${nameComponent} from \"./\";\n\nit(\"Should mount component\", () => {\n const wrap = mount(<${nameComponent} />);\n expect(wrap.find(\"strong\").at(0).text()).toEqual(\"Hello stranger, ${nameComponent}!\");\n});\n`\nlet disposable = vscode.commands.registerCommand(\n \"extension.gerador-arquivos-react\",\n function (e) {\n const filePath = e.path // getFilePath\n const nameFolder = filePath.substring(filePath.lastIndexOf(\"/\") + 1) //GetNameFolder\n vscode.window.showInformationMessage(\n \"Hello World from gerador-arquivos-react!\"\n )\n }\n)\nconst vscode = require(\"vscode\")\nconst fs = require(\"fs\")\nconst path = require(\"path\")\n\nconst templateStyled = require(\"./templates/styled\")\nconst templateIndex = require(\"./templates\")\nconst templateTest = require(\"./templates/test\")\n\nfunction activate(context) {\n let disposable = vscode.commands.registerCommand(\n \"extension.gerador-arquivos-react\",\n function (e) {\n const filePath = e.path\n const nameFolder = filePath.substring(filePath.lastIndexOf(\"/\") + 1)\n const mockTemplates = setMocks(nameFolder)\n\n for (let [key, value] of mockTemplates) {\n let objectCreate = value()\n createFile(filePath, objectCreate)\n }\n vscode.window.showInformationMessage(\"Done!\")\n }\n )\n\n context.subscriptions.push(disposable)\n}\n\nfunction setMocks(nameFolder) {\n let mockTemplates = new Map()\n mockTemplates.set(\"Styled\", () => {\n const fileName = \"styled.js\"\n const mockFunction = templateStyled()\n return { fileName, mockFunction }\n })\n mockTemplates.set(\"Index\", () => {\n const fileName = \"index.js\"\n const mockFunction = templateIndex(nameFolder)\n return { fileName, mockFunction }\n })\n mockTemplates.set(\"Test\", () => {\n const fileName = `${nameFolder}.test.js`\n const mockFunction = templateTest(nameFolder)\n return { fileName, mockFunction }\n })\n\n return mockTemplates\n}\n\nfunction createFile(pathFile, objectCreate) {\n fs.writeFile(\n path.join(`${pathFile}/`, `${objectCreate.fileName}`),\n objectCreate.mockFunction,\n async err => {\n if (err) {\n return vscode.window.showErrorMessage(\"Opss.. Error\")\n }\n }\n )\n}\n\nexports.activate = activate\n\nfunction deactivate() {}\n\nmodule.exports = {\n activate,\n deactivate,\n}![\"https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif\"](\"https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif\")
npm install -g vscevsce packagecode --install-extension my-extension-0.0.1.vsix.![\"https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif\"](\"https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif\")