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.
Burden: ~5 minutes
- Download Rectangle, if you haven’t already.
- Launch Rectangle.
- Click the Rectangle icon in the menu bar, then choose
Preferences...
. - Click the settings cog wheel along the top, on the right.
- Click the
Import
button at the bottom. - In the file chooser from step 4, navigate to the
rectangle
folder in this repository, then choose theRectangleConfig.json
file.
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.
- Move the file
Shortcuts.json
into~/Library/Application Support/Spectacle/
. - Restart Spectacle.
- 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.
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).
Burden: ~3 minutes
- Double-click the
TomorrowNight.terminal
file inside the folder calledterminal
. This will launch a Terminal window with the new theme. - Open The Terminal’s preferences by typing
⌘ + ,
. - Click the
Profiles
tab in the top left area of the window. - Along the left is a list of themes. Scroll down to
TomorrowNight
. - Click
Default
along the bottom. - Close the window:
⌘ + W
.
Burden: ~5 minutes
- Open the
terminal/mac
folder. - If you don’t see the three hidden files,
.bash_aliases
,.bash_profile
, and.bashrc
, type⌘ + shift + .
- Type
⌘ + N
to open a new Finder window that is focused on your home folder. - Move the three files from step 2 into your home folder.
- 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.
- Launch, or relaunch, The Terminal.
Burden: ~2 minutes
- Launch The Terminal.
- 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.
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.
- Move all the dot files in the
windows
folder into your Cygwin home folder, which is available atC:\cygwin\home\USER_NAME
, whereUSER_NAME
is your Windows user name. (Your home folder is also available in Cygwin at/cygdrive/c/cygwin/home/USER_NAME
.) - 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. - Launch Cygwin.
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
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.
- Move
.stylelintrc.json
into your home folder, either in Windows or macOS. - Move
.scss.stylelintrc.json
into your home folder. - Open a Terminal window (Mac) or PowerShell window (Windows).
- Type
npm i -g stylelint
. Mac users may get an error that starts withnpm ERR! code EACCES
. If so, runsudo npm i -g stylelint
, which will prompt you for your computer password.
- Move
.eslintrc.json
into your home folder. - Open a Terminal window (Mac) or PowerShell window (Windows).
- Type
npm i -g eslint
. Mac users may get an error that starts withnpm ERR! code EACCES
. If so, runsudo npm i -g eslint
, which will prompt you for your computer password.
Burden: ~5 minutes
- Launch VS Code.
- Bring up the extensions marketplace section of VS Code by typing
⌘ + SHIFT + X
in macOS,CNTRL + SHIFT + X
in Windows. - 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
- Open the
visual-studio-code
folder. - Open
~/Library/"Application Support"/Code/User
(Mac) orC:\Users\<USERNAME>\AppData\Roaming\Code\User
, where<USERNAME>
is your Windows username (Windows). - Move the
settings.json
file from thevisual-studio-code
folder you opened in step 1 into theUser
folder you opened in step 2.
Burden: ~5 minutes
Note: These instructions are for Sublime Text 3, not the latest version of Sublime Text.
- 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 inC:\Users\YOUR_USERNAME\AppData\Roaming\Sublime Text 3\Packages\
, whereYOUR_USER_NAME
is your Windows username. If theUser
folder does not exist, create it, making sure to observe case. - Open the
sublime-text
folder found in this repo, and place it alongside theUser
folder you opened/created in the previous step. - Place all the files ending in
.sublime-settings
into Sublime Text’sUser
folder.
Burden: ~1 minute
A dot file called .editorconfig
exists in the root of this folder. Drag it into your home folder.
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.