Web Development Environment Configuration Files

Burden: ~30 minutes

Please follow these instructions carefully

This repository contains config, or configuration, files required to stand up a web development environment in Mac OS X for classes in web development and design that I teach. Windows is only partially supported. The config files create an environment that makes it easy for me to help you, and for you to help each other.

Note: Install IBM’s Plex Mono typeface before you continue.

---

Window Management (Mac)

Burden: ~5 minutes

Rectangle

1. Download Rectangle, if you haven’t already.
2. Launch Rectangle.
3. Click the Rectangle icon in the menu bar, then choose Preferences....
4. Click the settings cog wheel along the top, on the right.
5. Click the Import button at the bottom.
6. In the file chooser from step 4, navigate to the rectangle folder in this repository, then choose the RectangleConfig.json file.

Spectacle (Sunset, as of Nov 2019)

Spectacle was retired in the fall of 2019. Thus, do not use Spectacle on new machines; use Rectangle. The shortcuts file for Spectacle is being kept here for archival purposes only.

1. Move the file Shortcuts.json into ~/Library/Application Support/Spectacle/.
2. Restart Spectacle.
3. Locate Spectacle’s icon in the status menu section of the menu bar. Click it and compare it to spectacle-keyboard-shortcuts.png. They should be identical.

---

Terminal Theme and Environment Files (Mac and Windows)

In order to get your environment working properly, we’ll need to do the following...

• Install a color theme into your command line environment, or CLI (Mac and Windows).
• Install a handful of configuration files (Mac and Windows).
• Install Oh my BASH! (Mac).

Install The Terminal Color Theme (Mac)

Burden: ~3 minutes

1. Double-click the TomorrowNight.terminal file inside the folder called terminal. This will launch a Terminal window with the new theme.
2. Open The Terminal’s preferences by typing ⌘ + ,.
3. Click the Profiles tab in the top left area of the window.
4. Along the left is a list of themes. Scroll down to TomorrowNight.
5. Click Default along the bottom.
6. Close the window: ⌘ + W.

Install The Bash Environment (Mac)

Burden: ~5 minutes

1. Open the terminal/mac folder.
2. If you don’t see the three hidden files, .bash_aliases, .bash_profile, and .bashrc, type ⌘ + shift + .
3. Type ⌘ + N to open a new Finder window that is focused on your home folder.
4. Move the three files from step 2 into your home folder.
5. Open the terminal/git-env-for-mac-and-windows folder. You should see .git_aliases, .git-completion.sh, and .git-prompt.sh.
6. Move these files into your home folder.
7. Launch, or relaunch, The Terminal.

Install Oh my BASH! (Mac)

Burden: ~2 minutes

1. Launch The Terminal.
2. Paste the following command into The Terminal:

bash -c "$(curl -fsSL https://raw.githubusercontent.com/ohmybash/oh-my-bash/master/tools/install.sh)"

Note: If step 2 doesn’t work, visit the Oh my BASH! site.

Note: The Mac version of your CLI configuration is now complete. Please proceed to the next section.

Install The Color Theme and Bash Environment (Windows)

Burden: ~5 minutes

Note: The following assumes you’ve installed Cygwin. If you haven’t, install it, then come back.

There are a handful of files that start with a dot (.) in the folders mentioned below. These files are hidden from view in Windows. Read View hidden files and folders in Windows to learn how to view them.

1. Move all the dot files in the windows folder into your Cygwin home folder, which is available at C:\cygwin\home\USER_NAME, where USER_NAME is your Windows user name. (Your home folder is also available in Cygwin at /cygdrive/c/cygwin/home/USER_NAME.)
2. Open the terminal/git-env-for-mac-and-windows folder. You should see .git_aliases, .git-completion.sh, and .git-prompt.sh. Move these files into your home folder.
3. Launch Cygwin.

---

Slow Cygwin Startup?

If Cygwin is slow to start, read the following, which suggests two methods for fixing the problem: http://stackoverflow.com/questions/28410852/startup-is-really-slow-for-all-cygwin-applications

---

Install Stylelint’s Config Files for CSS and Sass (Mac and Windows)

Burden: ~5 minutes

Stylelint lints CSS and Sass code based on a configuration file, as explained here. In our case, the file name used is .stylelintrc.json. Note the dot at the beginning of the file name.

Enclosed are two configuration files that work in concert with Stylelint: .stylelintrc.json, the default file name used by Stylelint to lint CSS, and .scss.stylelintrc.json, which would need to be renamed .stylelintrc.json to lint Sass. These files are mutually-exclusive; you only ever use one at any time.

Since Stylelint is looking for a file called .stylelintrc.json, you’d use the included .stylelintrc.json to lint CSS. However, if you need to lint Sass, then you’d rename .stylelintrc.json → .css.stylelintrc.json, then rename .scss.stylelintrc.json → .stylelintrc.json. To return to linting CSS, do the reverse.

1. Move .stylelintrc.json into your home folder, either in Windows or macOS.
2. Move .scss.stylelintrc.json into your home folder.
3. Open a Terminal window (Mac) or PowerShell window (Windows).
4. Type npm i -g stylelint. Mac users may get an error that starts with npm ERR! code EACCES. If so, run sudo npm i -g stylelint, which will prompt you for your computer password.

---

Copy ESLint’s Config File (Mac and Windows)

1. Move .eslintrc.json into your home folder.
2. Open a Terminal window (Mac) or PowerShell window (Windows).
3. Type npm i -g eslint. Mac users may get an error that starts with npm ERR! code EACCES. If so, run sudo npm i -g eslint, which will prompt you for your computer password.

---

Text Editors

Visual Studio (Mac and Windows)

Burden: ~5 minutes

Extensions

1. Launch VS Code.
2. Bring up the extensions marketplace section of VS Code by typing ⌘ + SHIFT + X in macOS, CNTRL + SHIFT + X in Windows.
3. In the text box marked Search Extensions in Marketplace, search for then install each of the following:

HTMLHint.vscode-htmlhint
EditorConfig.EditorConfig
stylelint.vscode-stylelint
dbaeumer.vscode-eslint
DavidAnson.vscode-markdownlint

Settings File

1. Open the visual-studio-code folder.
2. Open ~/Library/"Application Support"/Code/User (Mac) or C:\Users\<USERNAME>\AppData\Roaming\Code\User, where <USERNAME> is your Windows username (Windows).
3. Move the settings.json file from the visual-studio-code folder you opened in step 1 into the User folder you opened in step 2.

---

Sublime Text Preferences File (Mac and Windows)

Burden: ~5 minutes

Note: These instructions are for Sublime Text 3, not the latest version of Sublime Text.

1. Open Sublime Text’s User folder, then place it on the side for the moment. In macOS, find it in ~/Library/"Application Support"/"Sublime Text 3"/Packages/. In Windows, it’s in C:\Users\YOUR_USERNAME\AppData\Roaming\Sublime Text 3\Packages\, where YOUR_USER_NAME is your Windows username. If the User folder does not exist, create it, making sure to observe case.
2. Open the sublime-text folder found in this repo, and place it alongside the User folder you opened/created in the previous step.
3. Place all the files ending in .sublime-settings into Sublime Text’s User folder.

---

EditorConfig

Burden: ~1 minute

A dot file called .editorconfig exists in the root of this folder. Drag it into your home folder.

---

Testing Linters and File Formatting

It‘s now time to check if everything is working. Open the enclosed web-linter-test-project project in VS Code and follow the directions in the README.md file.