Using different code editors
Now that you've seen how to program in ProcessingJS in a webpage outside of Khan Academy, you're ready to experiment with more code editors -- only if you want to, of course.
One option is to use an online editor, similar to ours but with additional features. You might want to use an online editor if you have a computer that doesn't let you download apps or you want to use the same editor across multiple computers. Popular online editors are JSBin, Glitch, and Repl.it. If you're on a ChromeBook, you can install a Chrome web app like Caret or Zed.
Here's a video of me editing a webpage in Cloud9 (from our course on making webpages):
Another option is to use a desktop editor. An app is downloaded to your computer and saves the files to your hard drive. There are lots of desktop editors for you to pick from, depending on what OS and price you're looking for. Some popular desktop editors are Visual Studio Code, Atom, Sublime Text, Adobe Brackets, and Notepad++ (for Windows).
Here's a video of me editing a webpage in Sublime Text (from our course on making webpages):
A third option is to use a command-line editor. If you're not already familiar with the command line, you probably don't want to go down this route since you'll also need to learn a lot about the command line first. On the other hand, if you love typing and navigating with your keyboard instead of your mouse, you might find you love command-line tools. Two popular command-line editors are Emacs and Vim, and they are often already installed on Unix-based systems like Macs and Linux.
Here's a video of me editing a webpage in Vim (from our course on making webpages):
Picking an editor
Which one should you use? You're welcome to keep using the Khan Academy editors for now. Eventually though, you'll want to get comfortable with at least one other editor. As a programmer, it helps to know how to program in multiple editors, since you might need to use a different editor for a class in school or a job at a company.
You might want to try out a couple different free options and see which one you like the most. You can also ask around to see what friends and colleagues use. It's often helpful to use whichever tool is most popular with your peers because then you can ask them for help.
For example, here's a graph of what my Khan Academy colleagues use:
Bar chart of editor preference—VSCode, Sublime, Emacs, VIM, in that order.
If you're reading this and already use a different editor, you can share what you're using and why you like it in the Tips below. For bonus points, share any tips for making ProcessingJS programs in your favorite editor.
Want to join the conversation?
- Any way that I can use processingJS in a different Editor?(14 votes)
- Posted by Bluebird
I know you can inside of HTML like this: https://www.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104
and you can edit that in a code editor.
Just posted it here so that it is easier to see for people in the future.(1 vote)
- If the website your using allows you to code in html, add something like the previous documentation shows(1 vote)
- Does anybody else use eclipse? There are multiple IDEs for different languages, and it is a free, open-source versatile desktop editor. It is also relatively easy to use. The best part, in my opinion, is that if you want to use something that isn't included in it automatically, you can easily add it as a plugin!(7 votes)
- Yes I use Eclipse. But, I prefer Visual Studio and Xcode. They came out with the 11.3 version a couple of months ago(3 votes)
- Are there downloadable editors available for Chromebooks?(5 votes)
https://chrome.google.com/webstore/detail/caret/fljalecfjciodhpcledpamjachpmelml?hl=en is a great editor as well.(5 votes)
- How do I make things from scratch in KA?(5 votes)
- Go to JS (blah blah blah) and scroll all the way down. Select either new app new website of new (i forgot the name of the other one)(4 votes)
- So...I'm really confused.
I tried going on other websites, including the ones Khan Academy recommended. Nothing is working. Nothing I code shows up in when it runs. For example, when I type somehting as simple as "ellipse(200, 200, 200, 200); it says, "ellipse is not defined." Why? the canvas tag isn't working. the script tag isn't working. I try choosing other codes, and it won't work. Please help!(3 votes)
- Follow the recipe given in the previous tutorial.(5 votes)
- So do any of the desktop editors have live preview features like KA?(3 votes)
- I'm trying out VSCode and I like it but I can't figure out how to generate a preview.(3 votes)
- VSCode is a text editor not and IDE so you would have to run the program from your web browser.(2 votes)
- I use Notepad++, which is free. It's very easy to use, as well! When I took a web design course at university, our professor had us use Notepad++ for our assignments. I'd recommend it heartily for those seeking a light, inexpensive editor.(3 votes)
- Can you make more because i'm done and I like this app or website.(3 votes)