Mix.install([
{:youtube, github: "brooklinjazz/youtube"},
{:hidden_cell, github: "brooklinjazz/hidden_cell"},
{:tested_cell, github: "brooklinjazz/tested_cell"},
{:utils, path: "#{__DIR__}/../utils"}
])Ensure you type the ea keyboard shortcut to evaluate all Elixir cells before starting. Alternatively, you can evaluate the Elixir cells as you read.
Code editors are software applications designed for editing code.
Some code editors are minimal and only edit code. Some come with development tools that allow you to write, run, and test code all from the same application. Generally, we call these integrated development environments or IDEs.
There are various code editors and IDEs, each with its advantages.
We've chosen to recommend and support Visual Studio Code for this course. It's a fast and minimal code editor that can be customized with extensions to add additional features.
It's open-source and free, and the community is strong and well supported.
However, the primary reason it's the best choice for this course is the LiveShare feature.
Being a remote course comes with specific challenges. We cannot physically interact, so it's essential to be able to collaborate remotely.
LiveShare allows us to share a codebase and have other developers collaborate on it in real-time.
LiveShare even works through the web version of Visual Studio Code, so you can quickly get coding on an unfamiliar or temporary computer.
See the Visual Studio Code documentation for a full explanation of how to use Visual Studio Code effectively.
Please download and install Visual Studio Code.
You may already have a preferred editor. While highly recommended, you don't need to use Visual Studio Code. However, even if it doesn't become your daily code editor, we still recommend that you install it so that you can join and share LiveShare sessions with your teacher and classmates.
You can either open Visual Studio Code manually or through the command line.
It takes some setup, but it's handy to use the code command in your terminal to
open Visual Studio Code with a specific project.
Windows and Linux users should automatically have the code command available after installing Visual Studio Code.
Mac users can follow these instructions to set up the code command.
Navigate to the curriculum folder using cd in your command line, and then run code . to open Visual Studio Code
in the current folder.
$ cd path/to/curriculum
$ code .
We have a list of recommended extensions for this curriculum.
With the curriculum project open in visual studio code, open the Extensions tab and search for @recommended to see the Workspace Recommendations.
We recommend you install them all.
- Phoenix Framework: Syntax highlighting for Phoenix HEEx files.
- Elixir Test: Useful commands for testing Elixir code.
- ElixirLS: General Elixir support for autocomplete, syntax highlighting, and more
- Live Share: Real-time collaborative development.
- Code Spell Checker: Spell checking for source code. Useful for catching spelling errors.
There are lots of useful extensions provided by the community. We've tried to be minimal, so consider researching for more useful extensions beyond this list.
The Activity Bar contains the Explorer tab.
Open the Explorer tab to see all the files and folders in a project. You can create new files and folders from this tab.
You can also open files to use them in your editor. Be careful not to edit any of the files for this course unless directed to.
For large projects, it quickly becomes tedious to search through files and folders. Instead, you can use the Quick Open Command with Ctrl+P (Windows & Linux) or CMD+P (MacOS). Here you can search for the name of a file and press Enter to view it in the editor.
It's important to be proficient with your code editor. There are many ways to improve productivity with your chosen code editor. We include some advice on using the editor effectively, but you are the best judge of which strategies are most effective.
With that said, we recommend you practice using Quick Open instead of the Explorer. Quick Open is a much faster solution when working at scale, and you'll want to be proficient with it.
Visual Studio Code has many useful commands. In addition, many extensions add additional commands.
Press CTRL+Shift+P (Windows & Linux) or CMD+Shift+P (MacOS) to show all commands. You'll notice that it simply
uses Quick Open with a > symbol. You could also open Quick Open and then press >.
For example, you may wish to use the autosave command to save files automatically.
Many commands are bound to a shortcut. Search for the Preferences: Open Keyboard Shortcuts command
to view and edit your shortcuts.
Specific shortcuts are generally beyond the scope of this course, but you may wish to research more. You can also rebind any specific shortcut to customize your development experience.
Visual Studio Code comes with an integrated terminal so that you don't have to switch back and forth between your editor and your command line.
To learn more about the Integrated Terminal, you can read the Integrated Terminal Documentation
Open and close the integrated terminal with the View: Toggle Terminal command.
Or you can use the CTRL+` command.
Backtick ` may feel unergonomic for a frequently used command. You may wish to rebind it to a more comfortable shortcut.
From the integrated terminal, you can manage multiple terminal windows.
Multiple terminals are useful if one terminal is busy performing some constant task like running an application.
For example, when running this curriculum using the integrated terminal that terminal will be busy running the livebook server command. Therefore, It's useful to open a second terminal window to access the command line without stopping and starting livebook.
You can use the Search tab to find content in files. Alternatively you can quickly open the search with the CTRL+SHIFT+F (Windows & Linux) or CMD+SHIFT+F (MacOS) shortcut.
Enter text into the search input and press Enter to search for some text.
The search tab is also useful for search-and-replace.
The Source Control tab allows you to manage git source control. Instead of with the command line, you can use the UI to stage and unstage changes.
You can stage a file by hovering it and pressing the stage button .
Or stage all files by hovering over Changes and pressing the stage all button .
Similarly you can unstage changes or a single file pressing the unstage button .
You can share and join collaborative development sessions with the LiveShare tab.
You can start a LiveShare session as the host, and then other developers join your session or vice versa.
flowchart
H[Host]
D1[Developer]
D2[Developer]
D3[Developer]
D4[Developer]
D5[Developer]
D1 --> H
D2 --> H
D3 --> H
D4 --> H
D5 --> H
To start a LiveShare session, press the Share button.
This creates a LiveShare session and automatically copies an invitation link that will look like this:
https://prod.liveshare.vsengsaas.visualstudio.com/join?20A7B9A2A82856BC29CE86120852C16E23EB
Send this link to other developers for them to join the session. It's a common mistake to click the link. Instead, to join a LiveShare session, you need to click the Join button in the LiveShare tab and enter the URL.
Participants are displayed in the LiveShare tab.
Participants can view your terminal but can't use it without permission. You can give participants access to the terminal with the Make Read/Write button by right-clicking on the terminal you want to share.
As a participant, to benefit from extensions and syntax highlighting, you may need to trust the Workspace that you join.
The dialogue may look different than this, but you should see a similar notification appear when you join the session.
| Previous | Next |
|---|---|
| Livebook | Command Line Family Tree |