
What's up ,

I'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!

In these last days I decided to venture out and I will tell you what I learned and how you can create your own extension.

![https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif](https://media.giphy.com/media/1YuBJLQooc6NFmn3N5/giphy.gif)

### Why an extension in vscode?

In microsoft's [marketplace](https://marketplace.visualstudio.com/) you will find thousands of extensions that have the main objective to help and improve your productivity while you code.

In 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.

Something simple and objective, brings benefits such as:

- Team all aligned with the project structure.
- Incentive to create tests (since the extension automatically creates the test file and a very simple test).
- Increases productivity, now it is not necessary to waste time creating the entire zero structure

![https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif](https://media.giphy.com/media/uj8oO4Lreq4fTE61ku/giphy.gif)

### Starting...

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.

But before creating your extension you need to have **vscode**, **node, git** and have a **react project running with styled components** , In the [vscode documentation](https://code.visualstudio.com/api) you have some detailed functions in case you need to find out about a specific function.

Our extension will generate the following automatic codes:

`index.js`

```jsx
import React from 'react'
import { Container } from './styled'

export default function NameComponent() {
  return (
    <Container>
      <strong>Hello stranger, NameComponent!</strong>
    </Container>
  )
}
```

`styled.js`

```jsx
import styled from 'styled-components'

export const Container = styled.div`
  text-align: center;
`
```

`test.js`

```jsx
import React from 'react'
import { mount } from 'enzyme'
import NameComponent from './'

it('Should mount component', () => {
  const wrap = mount(<NameComponent />)
  expect(wrap.find('strong').at(0).text()).toEqual(
    'Hello stranger, NameComponent!'
  )
})
```

### An important note!

The name NameComponent, will actually be the name of the component you want to generate!

With open vscode you will need to install [Yeoman](https://yeoman.io/) a project generator.

```jsx
npm install -g yo generator-code
```

```jsx
yo code
```

And you will have a vision similar to this:

![Yo picture image](/images/assets/yocode.png 'Yo picture image')

![](/images/assets/instalado.png)

Then just access your project that you just created. And we have the following project structure.

![estrutura yo](/images/assets/estrutura.png 'estrutura yo')

The extension.js file is where the magic happens!

Well let's see the magic happening!

Press 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.

![MOstra no comand pallete](/images/assets/helloworld.png 'MOstra no comand pallete')

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](https://code.visualstudio.com/api/references/contribution-points) you can see the complete list.

```json
...
"activationEvents": [
	"onCommand:extension.gerador-arquivos-react"
],
"main": "./extension.js",
"contributes": {
		"commands": [
			{
				"command": "extension.gerador-arquivos-react",
				"title": "Gerador de arquivos React"
			}
		],
		"menus": {
				"explorer/context": [
					{
						"when": "true",
						"command": "extension.gerador-arquivos-react",
						"group": "navigation"
					}
				],
				"commandPalette": [
					{
						"command": "extension.gerador-arquivos-react",
						"when": "editorHasSelection"
					}
				]
			}
	},
...
```

`extension.js`

```jsx
const vscode = require('vscode')

function activate(context) {
  console.log(
    'Congratulations, your extension "gerador-arquivos-react" is now active!'
  )
  let disposable = vscode.commands.registerCommand(
    'extension.gerador-arquivos-react',
    function () {
      vscode.window.showInformationMessage(
        'Hello World from gerador-arquivos-react!'
      )
    }
  )

  context.subscriptions.push(disposable)
}
exports.activate = activate

function deactivate() {}

module.exports = {
  activate,
  deactivate,
}
```

And you will have a view similar to this:

![menu vscode](/images/assets/geradormenu.png 'menu vscode')

Now let's create a folder called templates and add the index, styled and test files!

```jsx
module.exports = () =>
  `import styled from 'styled-components'

export const Container = styled.div${'`'}
    text-align: center;
${'`'}
`
```

```jsx
module.exports = nameComponent =>
  `import React from "react";
import { Container } from "./styled"

export default function ${nameComponent}() {
  return (
    <Container>
      <strong>Hello stranger, ${nameComponent}!</strong>
    </Container>
  );
}
`
```

```jsx
module.exports = nameComponent =>
  `import React from "react";
import { mount } from "enzyme";
import ${nameComponent} from "./";

it("Should mount component", () => {
    const wrap = mount(<${nameComponent} />);
    expect(wrap.find("strong").at(0).text()).toEqual("Hello stranger, ${nameComponent}!");
});
`
```

Files created!

Now, let's capture the path where the file will be generated and get the folder name

```jsx
let disposable = vscode.commands.registerCommand(
  'extension.gerador-arquivos-react',
  function (e) {
    const filePath = e.path // getFilePath
    const nameFolder = filePath.substring(filePath.lastIndexOf('/') + 1) //GetNameFolder
    vscode.window.showInformationMessage(
      'Hello World from gerador-arquivos-react!'
    )
  }
)
```

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:

```jsx
const vscode = require('vscode')
const fs = require('fs')
const path = require('path')

const templateStyled = require('./templates/styled')
const templateIndex = require('./templates')
const templateTest = require('./templates/test')

function activate(context) {
  let disposable = vscode.commands.registerCommand(
    'extension.gerador-arquivos-react',
    function (e) {
      const filePath = e.path
      const nameFolder = filePath.substring(filePath.lastIndexOf('/') + 1)
      const mockTemplates = setMocks(nameFolder)

      for (let [key, value] of mockTemplates) {
        let objectCreate = value()
        createFile(filePath, objectCreate)
      }
      vscode.window.showInformationMessage('Done!')
    }
  )

  context.subscriptions.push(disposable)
}

function setMocks(nameFolder) {
  let mockTemplates = new Map()
  mockTemplates.set('Styled', () => {
    const fileName = 'styled.js'
    const mockFunction = templateStyled()
    return { fileName, mockFunction }
  })
  mockTemplates.set('Index', () => {
    const fileName = 'index.js'
    const mockFunction = templateIndex(nameFolder)
    return { fileName, mockFunction }
  })
  mockTemplates.set('Test', () => {
    const fileName = `${nameFolder}.test.js`
    const mockFunction = templateTest(nameFolder)
    return { fileName, mockFunction }
  })

  return mockTemplates
}

function createFile(pathFile, objectCreate) {
  fs.writeFile(
    path.join(`${pathFile}/`, `${objectCreate.fileName}`),
    objectCreate.mockFunction,
    async err => {
      if (err) {
        return vscode.window.showErrorMessage('Opss.. Error')
      }
    }
  )
}

exports.activate = activate

function deactivate() {}

module.exports = {
  activate,
  deactivate,
}
```

DONE!

Now and just test, create a folder and execute the extension you will have a result similar to this:

![resultado](/images/assets/resultado.png 'resultado')

Wonderful right?

![https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif](https://media.giphy.com/media/Kd5LwXZAVVmAOjqY3y/giphy.gif)

You can find the source code [here](https://github.com/LorenaKauane/gerador-arquivos-react)

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:

```jsx
npm install -g vsce
```

```jsx
vsce package
```

It will generate a package at the root of the project:

![](/images/assets/geradorpackege.png)

To install locally and just run:

```jsx
code --install-extension my-extension-0.0.1.vsix.
```

Tell me what you found here in the comments!

Hope this helps,

To the next.

![https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif](https://media.giphy.com/media/88iHyYghkmwsLzcRqK/giphy.gif)


How to create extension in vscode


What's up ,

Before going to the subject of the post ...

It's been a while, I know I'm sorry! I added some features on the blog, such as English language support and some CSS changes and I am coming back with the project of the urbla!

![https://media.giphy.com/media/93opkrkYgpurqXMj5j/giphy.gif](https://media.giphy.com/media/93opkrkYgpurqXMj5j/giphy.gif)

I didn't know what to write and I did a search there on my instagram to find out what people want to know. I had several suggestions and one of those suggestions was that of today's post!

Let's talk about these beautiful frameworks?

When we start a new project, each programmer has a different way of dealing with **which stack should I choose for my front end?** React or Vue?

These frameworks have different particularities, and precisely that particularity makes a **difference**. However, these two Frameworks are for solving a problem, and we need to identify how efficient it is.

### Popularity

But before choosing which framework is ideal for your project, you should also consider understanding the market around these technologies (of course if your focus is the job market).

The results of the [StackOverflow](https://insights.stackoverflow.com/survey/2020#most-popular-technologies) survey are: 35.9% for React, while Vue has 17.3% of the 'votes'.

But that does not mean that React is the most efficient, here we are dealing with popularity, even because Vue has more stars on GitHub

![https://media.giphy.com/media/R459x856IfF6w/giphy.gif](https://media.giphy.com/media/R459x856IfF6w/giphy.gif)

### Rendering

Modern architecture today uses two types of page rendering: the client side (the page is rendered using the resources of the end user's PC) and the server side.

DOM - With it you can access and change the content, layout and even structure of the document. Each framework has its own way of dealing with the DOM, which influences the rendering of the final page.

Vue and React they clone the DOM, they process the copy and compare the result with the source. Then, in the resulting document (the one on the user's screen) they replace only the parts that differ from the processed results. This significantly speeds up the page loading and rendering time, while reducing the amount of traffic used. This can be crucial for mobile users.

### Component architecture

At this point React cannot be called a pure structure, because it is a modified library tailored to the MVC standard (Model-View-Controller, where the Model is responsible for providing the date, View displays the Model date for the user and the Controller interpret the user's actions and cause the model to provide changes and updates.)

Vue can be called pure and complete frameworks.

If your project is based on React, it means that you:

- You will need to research and implement additional libraries for each resource;
- Adjust resources according to the specific library;

Therefore, it will take longer to implement an architecture.

If you use ready-made structures like Vue, there will be no problem in selecting and customizing libraries for different purposes. The high-level API provides backward compatibility for ** all ** libraries. This allows other developers to join the project without researching the architecture.

### Backward compatibility

Every developer knows the importance of updating the architecture, adding new modules and libraries.

- React is a lib with full backward compatibility. You can add different versions of the libraries to your web app and update the old ones with the inheritance of the property.
- Vue is a progressive structure (according to the founder of [Vue Evan You](https://www.youtube.com/watch?v=p2P3z7p_zTI&ab_channel=VueNYC) ).

### Backward compatibility

Every developer knows the importance of updating the architecture, adding new modules and libraries.

- React is a lib with full backward compatibility. You can add different versions of the libraries to your web app and update the old ones with the inheritance of the property.
- Vue is a progressive structure (according to the founder of Vue [Evan You](https://www.youtube.com/watch?v=p2P3z7p_zTI&ab_channel=VueNYC) ).

> Its modular system is similar to React, but it also includes all the properties of JS frameworks working with backward compatibility

### React

React support is a bit complicated however we have a **huge community** and that includes developers and **companies** from around the **world** . With this you can find solutions in Russian, Chinese and English etc.

React support is a bit complicated however we have a **huge community** and that includes developers and **companies** from around the **world** . With this you can find solutions in Russian, Chinese and English etc.

The main disadvantage of React is that open source libraries appear daily. It can be a huge difficulty to find documentation that contains all the information about implementation, functions and properties.

### Vue

The Vue community is quite small (although it is more popular on GitHub), especially compared to React. Even our beloved JQuery is used more than Vue.

Typically, you may have to wait for an answer on how to implement a feature. And sometimes there is no answer.

### Conclusion

It is really difficult to decide which technology to choose, but listed the facts above it is up to you to decide which will be your choice based on the most attractive to you in what you want **today** and in the **future**!

![https://media.giphy.com/media/y3QOvy7xxMwKI/giphy.gif](https://media.giphy.com/media/y3QOvy7xxMwKI/giphy.gif)

Good luck and even more !!!

![https://media.giphy.com/media/kaBU6pgv0OsPHz2yxy/giphy.gif](https://media.giphy.com/media/kaBU6pgv0OsPHz2yxy/giphy.gif)


React or Vue which one should I choose for my project?