VS Code for UX Development

The UX dev team uses Visual Studio Code, an IDE built by Microsoft, as our go-to IDE for web development. It’s become the industry standard due to it’s vast array of 3rd party extensions and it’s system integration that make development MUCH easier. Using VS Code isn’t required - if you have another preferred IDE then feel free to use it. This article will only go over VS Code.

Prerequisites

This guide assumes that you’ve already set up the repo on your local machine with Bitbucket and Source Tree. If you haven’t yet, please use this guide: Front End Repository . These are some prerequisite programs you’ll need to install. You might have to use the pre-approved apps installer provided by our IT team:

Visual Studio Code: https://code.visualstudio.com/

NodeJS: https://nodejs.org

Yarn: https://yarnpkg.com/

VS Code Extensions

There are some extensions that we use to format files to ensure common development style, and that help prevent us from making some common errors. To get started, visit the Extension Marketplace on the nav menu in VS Code

We want to install the following extensions:

Prettier - Code formatter

Prettier - ESLint

YAML

ESLint

I’d recommend installing these extensions as well:

Live Server

Material Icon Theme (Just so your file icons match other devs, not important)

Setting up the Repo

So to start development, we’ll need to open the repository and run a few scripts to install some node modules and other bits that allow us to use the repo and build our CSS and JS files for production.

To start:

In VS Code, open the repository however you like to. There’s a dozen different ways. I go to File > Open Folder and then select the repo ‘ef-custom-themes-lfs’.

Now, we’ll need to run some scripts to get the node & yarn modules installed.

Open the terminal/command prompt with ctrl + `

Make sure your terminal opened to the repo 'ef-custom-themes-lfs

Enter npm i

This will start to install all of our dev dependencies. You can see the full list in the package.json file in the root directory of the repo.

Then, we’ll need to install the yarn package manager to use webpack. In your terminal window run this command:

npm install --global yarn

Next, we need to install some yarn dependencies for Webpack. Webpack is a bundler- it takes all of our js files, and all of our css & sass files and combines them all in a minified file: theme.css and theme.js. This helps with performance, while still allowing us to organize our code in a bunch of different files.

So, to install those yarn dependencies all you to do is run this script in the terminal:

yarn

That will finish up all of our dependencies. The repo should be in working order now. You can test it by trying to build a website’s CSS & JS theme files by running a script like this in the terminal:

yarn start --env theme=minimal-pink