With our frontend project open in Visual Studio Code, let's install Emotion into our project by carrying out the following steps:
- Open the Terminal, make sure you are in the frontend folder, and execute the following command:
> npm install @emotion/core @emotion/styled
- There is a nice Visual Studio Code extension that will provide CSS syntax highlighting and IntelliSense for Emotion. Open the Extensions area (Ctrl + Shift + X) and type styled components in the search box at the top-left. The extension we are looking for is called vscode-styled-components and was published by Julien Poissonnier:
This extension was primarily developed for the Styled Components CSS in the JS library. CSS highlighting and IntelliSense works for Emotion as well, though.
- Click on the Install button to install the extension and then the Reload button to complete the installation.
That's Emotion installed within our project and set up nicely in Visual Studio Code.