IDEs vs Code Editors

On lab 1 you used nano through ssh to edit code directly in the VM. Being able to edit code directly in a terminal is a good skill to have, as sometimes it is the only thing available to you! For example, you may have to fix some remote system that you have no other way to access.

If you like working this way, you are free to continue doing so. Often people will go on to learn more complex terminal-based code editors like vim and emacs (vim is installed on the VM but emacs is not). But chances are, you are more comfortable using an editor that you are already familiar with (or just feel weird doing it in a terminal program with bizarre key shortcuts and no mouse support).

Every trade has tools. For writing code, there are two broad classes of tools: IDEs and code editors. At this point in your programming career, you may still be using “whatever they told you to download in 0007/0401,” even if it isn’t a great fit for everything you need to do now.

IDEs (Integrated Development Environments) are big, complex programs meant for working on huge projects with multiple collaborators, like the kind you’d find at a company or large open-source project. They integrate many features into one program and handle source control, code editing, code refactoring, compilation, linking, debugging, and much more. Examples include Eclipse, Apache NetBeans, IntelliJ IDEA, Microsoft Visual Studio, and Apple Xcode.

Code editors are much smaller programs which may consist of a file browser on the left, a code editing window on the right, and not much more. They are much lighter weight than IDEs, and leave it up to the programmer to do the source control, compilation, linking, and debugging. Examples include VS Code, Sublime Text, Atom, and Notepad++. (I guess nano also qualifies!)

IDEs have their place, but for quickly editing single files and small projects (like the things you do as a student!), they are overkill. IDEs may force you to create big “project” files and want to do all the compilation/debugging/etc themselves, which you won’t be needing at all for this class. If you have only used IDEs to this point, this would be a good time to find a code editor that you like:

If you are already using a code editor that you like, good! If you’ve never used a code editor and have only used IDEs, get and install a code editor on your computer now. (Chromebook users, I… have no idea what you should do. Just keep editing through ssh I guess!)

SFTP

FTP stands for File Transfer Protocol. It’s a very old technology used for… transferring files across networks!

FTP comes from a time before security was really a concern, so “raw” FTP isn’t really used anymore. Instead, modern systems use SFTP - Secture FTP. With SFTP, you will be able to view and access your AFS files almost as conveniently as viewing and accessing files that are on your own computer. Cloud storage!

Using SFTP will also be important for project 1 where you will have to be able to look at image files that your project produces.

Accessing your AFS space through an SFTP client

First, you need a client program:

Once you have your client of choice installed, scroll down to find the appropriate instructions for using it.

Using WinSCP

When you run WinSCP, you’ll see a window like this:

  1. Leave File protocol on SFTP
  2. For Host name, put localhost
  3. Set Port Number to 10022
  4. Put in your Username and Password just like you’re logging into SSH (because you are!)
    • remember, the username is student and the password is cs0449.
  5. Click Save to save this info so you don’t have to enter it again
  6. Click Login to log in
  7. Accept the key
  8. You may have to enter your password again, that’s fine.

It should connect and show you your AFS home directory in a list view on the right. Now you can navigate into your private/cs0449 directory and subdirectories and see your labs, examples you downloaded, etc.

Editing a file remotely

Double-click one of the .c files in your AFS space.

If given the choice, choose to use an external code editor. The internal editor is very basic and not a proper editor. Don’t use it. It may automatically detect your preferred code editor based on the file extension. In which case, great!

It is possible to explicity set which code editor is used in the options, but it’s kind of a pain. Come to me for help if you need it.

Now, when you double-click a remote file, it should open in your code editor on your computer!

Once the file is open in your editor, whenever you save, WinSCP will automatically upload the changes to AFS. So now, you can:

  1. ssh into your VM in your terminal
  2. Open WinSCP to see your AFS space
  3. Double-click a remote file in WinSCP to edit it
  4. Keep it open in your editor, and whenever you save, WinSCP uploads it for you
  5. Switch to the ssh terminal, compile, and run

Nice!

When you close WinSCP…

It might ask if you want to “close application without saving a workspace.” Just say Yes. Whatever.

Using Cyberduck

When you run Cyberduck, you’ll see a window like this:

Click the Open Connection button at the top and:

  1. Choose SFTP (SSH File Transfer Protocol) from the dropdown at the top
  2. For Server, put localhost
  3. Set Port to 10022
  4. Put in your Username and Password just like you’re logging into SSH (because you are!)
    • remember, the username is student and the password is cs0449.
  5. Click Connect

It should connect and show you your AFS home directory in a list view. Now you can navigate into your private/cs0449 directory and subdirectories and see your labs, examples you downloaded, etc.

Editing a file remotely

First, let’s configure Cyberduck to use your code editor of choice:

  1. In the menu bar, choose Cyberduck > Preferences… (or hit ⌘, (Command+Comma))
  2. Click Editor at the top of the preferences window
  3. In the dropdown, choose your editor of choice
    • You may have to do Choose… in the dropdown and find your editor in the Applications folder
  4. Check Always use this application

Now close the preferences window and navigate to the directory where your _lab1.c file is. Hit ⌘K, and it should open in your code editor on your computer! (You can also right-click it and choose Edit > (Your Code Editor) which does the same thing. Double-clicking it does not edit it, it downloads it instead.)

Once the file is open in your editor, whenever you save, Cyberduck will automatically upload the changes to AFS. So now, you can:

  1. ssh into your VM in your terminal
  2. Open Cyberduck to see your AFS space
  3. ⌘K a file in Cyberduck to edit a file
  4. Keep it open in your editor, and whenever you save, Cyberduck uploads it for you
  5. Switch to the ssh terminal, compile, and run

Nice!

Using any other SFTP client

They mostly work the same way:

Lots of other clients support editing remote files locally, and having them automatically upload when saved. But it’ll be up to you to figure out how that works!