Project sidebar

The initial setup of a BBEdit project leaves you with a project window and just one folder in the project sidebar. However, you can have as many folder in your sidebar as you can handle.

Project

In the example above, both the build and includes folders are in the project sidebar for quick access. BBEdit added the build folder when it created the project. To get the includes folder in the sidebar, just drag-and-drop it from the Finder. You can also CONTROL-click in the files area of the sidebar to add text files, HTML files, or folders.

Currently Open Documents

Below the files list, BBEdit shows you the currently open documents. In the example above, it shows that this document — sidebar.html — is the only open document, and the blue highlight shows that it is the active document.

You can drag the separator bar between the file list and the open document list to apportion the space to suit your needs.

Worksheet & Scratchpad

Below the list of open documents is a small area for the Scratchpad and Worksheet. I use the Scratchpad for scraps of code I need for repetitive tasks, but you can put just about any text there that you want. The Worksheet is where you can store small programs that run in the macOS Terminal.app. You can have as many programs there as you want. To run a program, you select the code for that program and hit ENTER. BBEdit will execute your code without your having to switch to the Terminal.app.

Controls section

At the bottom of the project sidebar are six icons for managing your project and/or its appearance.

+

The plus sign allows you to add files and folders to your project, similar to the CONTROL-click or right-click.

The clock icon gives you a pop-up list of recently-edited files in this project.

The magnifying glass icon allows you to filter what items appear in your project files list. In other words, there can be files in your project that you never edit and don’t need to see, and BBEdit allows you to remove them from view while leaving them in your project.

The raincloud icon gives you access to the site settings, site syntax check, site link check, site update (for include files and placeholders), image update, and site deployment.

The window slider icon allows you to open and close the editor pane of your project.

|||

The three vertical bars icon allows you to adjust the width of the project sidebar.

Next up: Include files.