![\"https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif\"](\"https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif\")
What's up ,
\nI'm gone for a while, but I'm coming back here today to share something with you that I learned last week. How to create and publish an extension in vscode!
\nIn these last days I decided to venture out and I will tell you what I learned and how you can create your own extension.
\n
In microsoft's marketplace you will find thousands of extensions that have the main objective to help and improve your productivity while you code.
\nIn a certain situation at work, I needed to create an extension that would generate some files in automatic so that it would increase the productivity of the development team.
\nSomething simple and objective, brings benefits such as:
\n![\"https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif\"](\"https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif\")
Well let's create an extension that generates an index file, tests and styles (with styled components). I will use as a base the project I developed on tests in react, you can read the full article on How to create tests on the front-end in ReactJs.
\nBut before creating your extension you need to have vscode, node, git and have a react project running with styled components , In the vscode documentation you have some detailed functions in case you need to find out about a specific function.
\nOur extension will generate the following automatic codes:
\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(\"Hello stranger, NameComponent!\");\n});The name NameComponent, will actually be the name of the component you want to generate!
\nWith open vscode you will need to install Yeoman a project generator.
\nnpm install -g yo generator-codeyo codeAnd you will have a vision similar to this:
\nThen just access your project that you just created. And we have the following project structure.
\nPress F5 this will run your application in debug mode and open a development host for the extension. And run Hello Wold in the command palette. Right on the side will show a Hello world message! Now we are going to add an item to the menu when we press the right mouse button on any packege. For that you need to open packege.json, there and where you configure all parameters, commands for how your extension will be called, it can be by command line, Menus among others, here you can see the complete list. And you will have a view similar to this: Files created! Now, let's capture the path where the file will be generated and get the folder name Now we will import the generated files in the template folder and create a Map of key and value and finally generate our files. The final file looks like this: DONE! Now and just test, create a folder and execute the extension you will have a result similar to this: Wonderful right? You can find the source code here Now we are going to generate a packege and share it with friends, but first you need to define the publisher in package.json and change the project readme: It will generate a package at the root of the project: To install locally and just run: Tell me what you found here in the comments! Hope this helps, To the next. \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\t\t\t\t\"explorer/context\": [\n\t\t\t\t\t{\n\t\t\t\t\t\t\"when\": \"true\",\n\t\t\t\t\t\t\"command\": \"extension.gerador-arquivos-react\",\n\t\t\t\t\t\t\"group\": \"navigation\"\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\t\"commandPalette\": [\n\t\t\t\t\t{\n\t\t\t\t\t\t\"command\": \"extension.gerador-arquivos-react\",\n\t\t\t\t\t\t\"when\": \"editorHasSelection\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t},\n...extension.js\nconst vscode = require('vscode');\n\nfunction activate(context) {\n\tconsole.log('Congratulations, your extension \"gerador-arquivos-react\" is now active!');\n\tlet disposable = vscode.commands.registerCommand('extension.gerador-arquivos-react', function () {\n\t\tvscode.window.showInformationMessage('Hello World from gerador-arquivos-react!');\n\t});\n\n\tcontext.subscriptions.push(disposable);\n}\nexports.activate = activate;\n\nfunction deactivate() {}\n\nmodule.exports = {\n\tactivate,\n\tdeactivate\n}\nmodule.exports = () => (\n`import styled from 'styled-components'\n\nexport const Container = styled.div${'`'}\n text-align: center;\n${'`'}\n`\n)\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`\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`\n)\nlet disposable = vscode.commands.registerCommand('extension.gerador-arquivos-react', function (e) {\n\tconst filePath = e.path; // getFilePath\n\tconst nameFolder = filePath.substring(filePath.lastIndexOf(\"/\")+1); //GetNameFolder\n\tvscode.window.showInformationMessage('Hello World from gerador-arquivos-react!');\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\tlet disposable = vscode.commands.registerCommand('extension.gerador-arquivos-react', function (e) {\n\t\tconst filePath = e.path;\n\t\tconst nameFolder = filePath.substring(filePath.lastIndexOf(\"/\")+1);\n\t\tconst mockTemplates = setMocks(nameFolder);\n\n\t\tfor (let [key, value] of mockTemplates) {\n\t\t\tlet objectCreate = value();\n\t\t\tcreateFile(filePath, objectCreate );\n\t\t}\n\t\tvscode.window.showInformationMessage('Done!');\n\t});\n\n\tcontext.subscriptions.push(disposable);\n}\n\nfunction setMocks(nameFolder) {\n\tlet mockTemplates = new Map();\n\tmockTemplates.set('Styled', () => {\n\t\tconst fileName = 'styled.js'\n\t\tconst mockFunction = templateStyled()\n\t\treturn { fileName , mockFunction }\n\t})\n\tmockTemplates.set('Index', () => {\n\t\tconst fileName = 'index.js'\n\t\tconst mockFunction = templateIndex(nameFolder)\n\t\treturn { fileName , mockFunction }\n\t})\n\tmockTemplates.set('Test', () => {\n\t\tconst fileName = `${nameFolder}.test.js`\n\t\tconst mockFunction = templateTest(nameFolder)\n\t\treturn { fileName , mockFunction }\n\t})\n\n\treturn mockTemplates\n}\n\nfunction createFile(pathFile, objectCreate) {\n\tfs.writeFile(path.join(`${pathFile}/`, `${objectCreate.fileName}`), objectCreate.mockFunction, async (err) => {\n\t\tif (err) {\n\t\t\treturn vscode.window.showErrorMessage(\n\t\t\t\"Opss.. Error\"\n\t\t\t);\n\t\t}\n\t});\n}\n\nexports.activate = activate;\n\nfunction deactivate() {}\n\nmodule.exports = {\n\tactivate,\n\tdeactivate\n}![\"https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif\"](\"https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif\")
\nnpm install -g vsce\nvsce package\ncode --install-extension my-extension-0.0.1.vsix.![\"https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif\"](\"https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif\")