> For the complete documentation index, see [llms.txt](https://chnn-anne.gitbook.io/mern-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chnn-anne.gitbook.io/mern-stack/getting-started/ide-visual-studio-code.md).

# IDE - Visual Studio Code

Setting up our Development Environment

### Why Visual Studio Code?

* Free
* Great features
* Lots of really useful extensions
* Live Share - We can both edit in the same document!

### Installing Visual Studio Code

Use the link below to install the latest version of Visual Studio Code.

{% embed url="<https://code.visualstudio.com/download>" %}

### How to Install Visual Studio Code Extensions

{% embed url="<https://code.visualstudio.com/docs/editor/extension-gallery>" %}

### Essential Extensions

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MXFsrjwS8R-TW91EXNG%2F-MXIcuAjZKDI-vo9F3TX%2FCapture.PNG?alt=media\&token=4713bfd9-2239-42b1-8eab-4973795abeff)

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYOGvbPxbn5qB-Cfyx8%2F-MYX4D7ssn1-NoLFFVL1%2Fimage.png?alt=media\&token=9deff4ad-5601-4bfe-920b-fdb71ad96f40)

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MXFsrjwS8R-TW91EXNG%2F-MXId2C_bt3mCY-fuKSA%2FCapture.PNG?alt=media\&token=2c84db60-54e7-4886-ba03-d2263a2ffa85)

### Used for Sharing Sessions

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYMkUUWrcWaMFCF_pct%2F-MYMs_-xE9SphR2vrHO8%2Fimage.png?alt=media\&token=b9be554b-427d-49c8-be6b-9065ccaf572d)

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYMkUUWrcWaMFCF_pct%2F-MYMsTk6OaCQsq_sFCtg%2Fimage.png?alt=media\&token=efaf494e-70ee-4804-85ed-b858bbb3d8cb)

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-MYMkUUWrcWaMFCF_pct%2F-MYMskdM7CgCVnMXbSok%2Fimage.png?alt=media\&token=c4f2ecbe-8e5d-47f9-9fd8-60476ea20040)

![](https://1336010533-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MWvM--ORajEf7cHwnl6%2F-Mby2AOEOma1Xxga7_Rs%2F-Mc1H_54y5WbwAkiqRCV%2Fimage.png?alt=media\&token=6c95bcb3-7034-415b-8ce1-fd3cbfb79d43)

### Resources

{% embed url="<https://travis.media/10-vs-code-shortcuts-to-memorize-that-will-boost-your-productivity/>" %}

{% embed url="<https://dev.to/raaynaldo/speed-up-code-your-html-using-emmet-in-vscode-nesting-operators-201o>" %}

{% embed url="<https://docs.emmet.io/cheat-sheet/>" %}