Visual Studio Code (VS Code) is the text editor we use to add and format content in a Quire project. Text will appear as either Markdown or YAML. To learn more about the basics of Markdown & YAML review the Fundamentals: Markdown & YAML section of the Quire documentation. You can also check out the Quire Cheatsheet.
Introductory Videos:
-
Learn Visual Studio Code in 7min (7:16): The official beginner Tutorial
-
Get started with Visual Studio Code (5:03): An older introduction, but with some useful framing
VS Code YouTube Channel: https://www.youtube.com/@code/about
VS Code TikTok: https://www.tiktok.com/@vscode
VS Code Tips & Tricks
Open the full project directory: In VS Code, you can open and navigate a whole folder of files rather than just one file at a time. Open a new VS Code window, type Command+0 or go to File > Open Folder, select your project folder and click Open.
Wrap lines of text: Click Option+Z to wrap lines of text at the edge of the window, rather than having them extend beyond the window and needing to scroll to view them.
Join lines of text: Highlight the lines you want to join and type Control+J.
Auto save: When changes to a file haven’t
been saved, there will be a bold dot in the tab for the page
at the top of the window. Alternatively, go to File > Auto
Save to turn on auto saving for all your files (Note that if
you are making changes to your project files with Auto Save
on, and you are also running quire preview, Quire
will regularly try to refresh the browser preview. In some
cases, such as when working with YAML files, this behavior may
not be ideal.)
Spell check: Install the Code Spell Checker extension by Street Side Software to`enable automatic spell checking in your files.
Arrange icons and other elements:: Right click on the icons in the left sidebar (the Activity Bar) to hide or show the ones you want. Get more tips for arranging your workspace at https://www.tiktok.com/@vscode/video/7255057809824337198.
Customize your theme colors: Open the Command Pallette with Shift+Command+P, type “theme” and select Preferences: Color Theme. You can then use your keyboard arrows to scroll through the list and see the different options. This works best when you have a project and a page open in VS Code to give you a more complete preview of the theme.
Automatically surround text in parentheses, quotes, and
other characters:
Highlight a word or phrase and type an opening parentheses,
quote, or bracket and VS Code will automatically add the
closing character to the end of the highlighted text. Works
with (), [], {},
`, ' and ". In
Markdown files, it also works with *,
**, _, and __.
View files side-by-side: To view two files side-by-side within the same VS Code window, go to View > Editor Layout > Split Right. Then drag and drop any tabs to that new area.
Preview your markdown: If you’re working in a Markdown file. Command+Shift+V will open a rendered preview. Use the Split Right view trick mentioned above to view the Markdown and the Preview side-by-side. If you leave the preview tab open and switch to a new Markdown file, the preview will switch to previewing that file. Just note that it is VS Code’s default preview without Quire styles applied, or with Quire shortcodes rendered.
Move lines up and down the page: Entire lines of text (or even paragraphs in Markdown) can be moved up and down the page without copy-and-paste. Put your cursor anywhere in the line you want to move, hold the Option key, and use the keyboard up and down arrows to move the text.
Go into Zen mode: Enter Zen mode by typing Command+K followed by Z.
Special Characters
Type curly quotes: Quire will convert straight quotes to curly quotes automatically, but if you prefer to type them in, or have instances where they are not properly covering, the following keyboard commands can be used.
| Keyboard | Result | Description |
|---|---|---|
| Option+] | ‘ | Left single quote |
| Shift+Option+] | ’ | Right single quote |
| Option+[ | “ | Left double quote |
| Shift+Option+[ | ” | Right double quote |
Use Unicode for special characters: VS Code and Quire fully support the unicode standard for all special character needs. Look up unicode characters and special symbols at https://symbl.cc/en/ and copy-and-paste them in.
Advanced
Edit with multiple cursors: If there are several lines you want to change at the same time, hold the Option key while you click where you want to place the cursor. When complete, release the Option key and type the change you’d like. The change will be made simultaneously in all cursor locations.
Preview HTML files: Install the Live Preview
extension by Microsoft for a live preview of HTML files, which
could be useful, for example, in refining the PDF output using
the content/pdf.css file as a temporary test.
Run Quire commands within VS Code: VS Code
includes a built-in command-line shell / terminal, where you
can run commands like quire preview and
quire build. Open the Terminal within VS Code
with Control+` or go to Terminal > New Terminal.
Run a remote Windows terminal from a Mac: Use remote tunnel access to run a remote Windows powershell from a Mac: https://www.tiktok.com/@vscode/video/7249501403297631534.
Use live share to collaborate remotely: Combine screensharing and audio to collaborate across remote instances of VS Code: https://code.visualstudio.com/learn/collaboration/live-share