{"id":5554,"date":"2018-10-09T04:24:03","date_gmt":"2018-10-09T08:24:03","guid":{"rendered":"https:\/\/itp.nyu.edu\/physcomp\/?page_id=5554"},"modified":"2020-07-28T20:24:38","modified_gmt":"2020-07-29T00:24:38","slug":"using-a-programming-editor","status":"publish","type":"page","link":"https:\/\/itp.nyu.edu\/physcomp\/resources\/using-a-programming-editor\/","title":{"rendered":"Using a Programming Editor"},"content":{"rendered":"<p>There are many text-only programming editors on the market, designed to be used with different programming environments. When you program using many different environments, it can be helpful to have one editor that you use for all of them, so your editing interface is consistent.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Organizing_Projects\"><\/span>Organizing Projects<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Most programming editors organize files in workspaces. A workspace is basically a folder with all your project\u2019s files in it. So to get started, either open a folder or create a new folder, then make new files in it. For example, if you have an Arduino sketch called mySketch, it consists of a folder called mySketch and a file in it called mySketch.ino. A p5.js project is usually a folder called myProject with a few files in it: sketch.js, index.js, and the p5.js libraries.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Extensions_or_Plugins\"><\/span>Extensions or Plugins<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Programming editors usually include a way to add extensions or plugins so that you can automate common tasks, use different programming languages easily, and so forth. For example, Visual Studio Code includes two useful plugins for physical computing, the Arduino plugin, which lets you compile Arduino projects and the Live Share plugin, which lets you share code live across a network.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Visual_Studio_Code\"><\/span>Visual Studio Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/code.visualstudio.com\/\">Microsoft Visual Studio Code<\/a> is an open source programming editor from Microsoft that\u2019s good for many toolchains at ITP: Arduino, p5.js, node.js, Python, and more. It\u2019s designed for keyboard-only use, through the command palette, which can execute any command in the application using keyboard alone.<\/p>\n<aside style=\"padding-left: 30px;\" role=\"complementary\">VoiceOver users: Turn quickNav off whenever possible. It causes unpredictable behavior with the user interface<\/aside>\n<p>There are a few main areas of the VS Code application: the editor area, the file explorer, the consoles.<\/p>\n<p>The <strong>explorer<\/strong> (command-shift-e) is where you look for files and folders within your workspace. There\u2019s also a tab in the explorer called Outline where you can see a list of the functions in the open code window.<\/p>\n<p>The <strong>editor<\/strong> (command-1, 2, 3, etc) is where you edit code. There can be multiple editors open in the same workspace, if you choose to do so.<\/p>\n<p>The <strong>panel<\/strong> (control-`) are where you see the output console, the problems console, the command line terminal, serial terminals, and the debug console.<\/p>\n<p>The <strong>command palette<\/strong> (command-shift-P) can execute any command in the application using keyboard alone. You can filter it by starting to type the name of the command you want. The Escape key dismisses the command palette.<\/p>\n<p>Note that everything in VS Code is a file or a directory. Even the application Preferences are stored in a giant JSON file, and when you open preferences from the command palette, you can see this JSON file, or an abstracted HTML-style representation of it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Keyboard_Shortcuts\"><\/span>Keyboard Shortcuts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There are many keyboard shortcuts in VS Code, because it&#8217;s designed to be used without a mouse. If you can&#8217;t remember them all, there is a guide in the program. Type command-K-S to open it in the editor.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Shortcuts_in_command_palette\"><\/span>Shortcuts in command palette<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Backspace, then type file name &#8211; will open any file in workspace<\/li>\n<li>Colon, then type number &#8211; goes to line number in current editor window<\/li>\n<li>&gt; then type command. This is the default when you open the command palette. When you type any word, it will filter the command list to find matching commands. Then use up and down arrows to navigate the filtered list.<\/li>\n<\/ul>\n<aside style=\"padding-left: 30px;\" role=\"complementary\">VoiceOver users: V-O-right arrow twice in the command palette gets you into a \u201cquick picker empty table\u201d, and there, up and down arrows will read your choices out. Press enter on any of the choices to activate it.<\/aside>\n<h3><span class=\"ez-toc-section\" id=\"Getting_to_Files\"><\/span>Getting to Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Command-shift E shifts focus to the <strong>File explorer<\/strong>. The up and down arrows will move through the file names VoiceOver will read out the names. Once you know the file names, use either the file palette (command-P) or the command line terminal (described below) to open the file.<\/p>\n<p>Command-P opens the <strong>File palette<\/strong> This is a variation on the command palette that opens files. It operates like the command palette. Type the filename to filter the available files in your current workspace.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Shortcuts_in_the_Editor\"><\/span>Shortcuts in the Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get to any line in the editor, open the command palette (command-shift-P), then backspace and type colon-line number to jump to any line. If you\u2019re already in the editor, control-G-line number will do the same thing.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Working_in_the_Panel\"><\/span>Working in the Panel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Panel area contains the command line Terminal, the Output Console, the Problems Console, and the Debug Console.<\/p>\n<p>Type control ` to open the terminal. This gets you to a terminal with your operating system\u2019s command line interface in it. Here you can do all the things you can normally do on the command line: list files (ls), change directories (cd), and so forth. From the terminal,, you can also type \u201ccode &lt;filename&gt;\u201d to open any file in the current directory into the editor.<\/p>\n<p>Note that Control-G doesn\u2019t jump you to a line number when you are in the terminal. Type control ` to close the terminal first.<\/p>\n<p>Type control-shift-U to get to the Output console. This is where you\u2019ll read the output of any commands run by a compiler, for example the Arduino compiler.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Extensions\"><\/span>Extensions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Visual Studio Code lets you extend the application with additional modules downloaded from their online repository. Type control-shift-X to enter the Extensions browser. The Extensions browser works like the command palette: type a word to filter the list then use the up and down arrows to navigate the list.<\/p>\n<aside style=\"padding-left: 30px;\" role=\"complementary\">VoiceOver Users: after you type a word to filter, type V-O-left arrow to enter the list, then up and down arrows to browse them. When you\u2019re on any extension, press enter to bring up the details in the editor area, HTML style. To install, search for the Install button and click it. When you\u2019re done installing an installation, command-W will close the details.<\/aside>\n<p>Two useful plugins for physical computing are the the Arduino plugin by Microsoft and the Live Share plugin.\u00a0If you have the <a href=\"https:\/\/www.arduino.cc\/en\/Main\/Software\">Arduino IDE<\/a> installed on your machine, the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vsciot-vscode.vscode-arduino\">Arduino Plugin for VS Code<\/a>\u00a0 lets you compile and upload for all the boards you have installed.The <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MS-vsliveshare.vsliveshare\">VS Live Share Plugin<\/a> allows you to share code live with other users over a network in real time. Live share takes a few steps to get it set up, including a couple of trips to the browser to enable access through your GitHub account. The details are explained in the details page for the extension. Once it\u2019s working, it\u2019s a handy tool for sharing code live.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"A_Note_on_Notifications\"><\/span>A Note on Notifications<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Some actions or extensions pop up notification alerts over your application. These are called toasts in UX parlance, for reasons only the Secret UX Masters of the Universe understand. You can view all current notifications from the command palette: command-shift-P, then type notifications show. You can scroll through them with arrow keys when they are open. To dismiss them, command-shift-P, then type Notifications clear.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many text-only programming editors on the market, designed to be used with different programming environments. When you program using many different environments, it can be helpful to have one editor that you use for all of them, so your editing interface is consistent. Organizing Projects Most programming editors organize files in workspaces. A &hellip; <a href=\"https:\/\/itp.nyu.edu\/physcomp\/resources\/using-a-programming-editor\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Using a Programming Editor&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[11,52,26],"tags":[],"class_list":["post-5554","page","type-page","status-publish","hentry","category-code","category-lesson","category-programming"],"_links":{"self":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/5554"}],"collection":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/comments?post=5554"}],"version-history":[{"count":4,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/5554\/revisions"}],"predecessor-version":[{"id":5572,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/5554\/revisions\/5572"}],"up":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/media?parent=5554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/categories?post=5554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/tags?post=5554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}