Code Editors

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Home Report An Issue LivebookIEx

Review Questions

Upon completing this lesson, a student should be able to answer the following questions.

• How do you open your Visual Studio Code Editor?
• How do you manage version control from your Visual Studio Code Editor?
• How do you start and join a LiveShare session to collaborate with other developers?

Overview

Code Editors

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.

Visual Studio Code

Visual Studio Code (VS Code) is a code editor developed by Microsoft. It is a free, open-source, and cross-platform application that can be used to write and edit code for a variety of programming languages, including Elixir.

VS Code provides a number of features that make it a powerful code editing tool, such as:

• IntelliSense: which provides code completion and suggestions
• Syntax highlighting: to make it easier to read and understand code
• Code debugging: allows developers to step through code and find errors
• Git integration: allows developers to easily manage code changes and collaborate with others
• Extensibility: VS Code can be extended with plugins and extensions that add new features and functionality

Visual Studio Code is the default recommended code editor for DockYard Academy. We’ve chosen this editor for a variety of reasons, including the Visual Studio Code LiveShare feature which allows multiple developers to collaborate on the same code simultaneously.

See the Visual Studio Code documentation for a full explanation of how to use Visual Studio Code effectively.

Download Visual Studio Code

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 instructor and classmates.

Open Visual Studio Code

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 .

Setup Recommended Extensions

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. It’s amazing how a great extension can make you more productive.

Explorer

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.

Quick Open

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.

Commands

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.

Integrated Terminal

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.

Multiple Terminals

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.

Search

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.

Source Control

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 .

Live Share

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.

DANGER: GRANTING READ/WRITE ACCESS TO YOUR TERMINAL ALLOWS OTHER PARTICIPANTS DANGEROUS ACCESS TO YOUR COMPUTER.

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.

Commit Your Progress

DockYard Academy now recommends you use the latest Release rather than forking or cloning our repository.

Run git status to ensure there are no undesirable changes. Then run the following in your command line from the curriculum folder to commit your progress.

$ git add .
$ git commit -m "finish Code Editors reading"
$ git push

We’re proud to offer our open-source curriculum free of charge for anyone to learn from at their own pace.

We also offer a paid course where you can learn from an instructor alongside a cohort of your peers. We will accept applications for the June-August 2023 cohort soon.

Navigation

Home Report An Issue LivebookIEx