Why every programmer should build a code editor

Well shoot. Obviously not right. From here on I’ll walk you through my little journey in building a code editor using Node.js Electron, Html and CSS. It was shockingly fun.

Working with Electron

I have worked with Electron before but it was very basic attempt so this time because I wanted to explore desktop applications a bit more I give Electron a second go. I’m honestly not sure if it has gotten so much better than the last time I used it but I found it to be a very seamless process especially for a web developer like me. What I really loved was how easy it was to build a application from my JavaScript code in minutes. Electron is definitely a fantastic API. Most likely more completed applications would be more difficult to build but I had no issues building this app.

Getting Started from stratch

Well first step was to learn about this electron. So enter Udemy and an really clear course by Ray Viljoen. Really if all the videos including mine were so well thought out and clear learning anything new on the internet would be so much easier. That was step one.

No To Do list Apps Here

Its only at the end that I realized that I didn’t build a to do list but opted for a full fledge application. Really this is not why I’m learning electron for I have another use for it but I built a code editor. Its a good enough start the next one should be much better.

Building the code editor

See this really was the fun part now I get to add everything I believe PHP storm is missing or I’m to lazy to see if a plugin can assist. Failure was the result. PHP Storm is way too good – that intellisense is missed – but what I managed was a nice middle ground in between Notepad++ and and Full fledge IDE like PHPStorm. The start up time is quick and you can review you files like a project. Open a new folder and you have a new project.

Coding and Structure

This section should be empty. There is none. Well there is a lot of code and an attempt at structure. Really this is the second hardest part of building anything new. How do you structure the project. Well for now I have an huge file with a lot of global variables and a few helpful files to take the load off. Not bad for a start the next project should be better. I’m almost ashamed to show this on GitHub. Almost.

Oh my. Just a list of files

Cool Neat Features

Well what did I add. Snippets. I’m still undecided at how to deal with snippets in real life and there are so much options out there but snippets was added because why not.

You can then edit your snippets and even view them in a new window.

I added some other cool features like tasks and of course we had to embed wftutorials tutorials. Right at your figure tips. (Because that’s what everyone wants. lol)

More Cool Features

Some more neat features

Running Files

So the app tries to run any file you throw at it but it clearly cant really do this. It will work well with PHP, JavaScript to some extent and Python as long as you have these applications on you machine it will try to run the file using command line. Otherwise you will get a error. No biggie.

Running a php File – You can see the command

Side View

I am personally a fan of the side view but the verdict is still out on its usefulness.

Embedded Snippets

You also have some basic snippets for languages you may use. Reason is I have often wanted to know the how to do something in a different language. Once you have used it in another language you just want how to accomplish it in the one you are currently using. The embedded snippets should make that transition smoother.

Selecting a snippet from a language

Want to see in action

I recently did a tutorial to highlight some of how it works in real life. It was still going through a bit of testing then so had some bugs but you can still see or get and idea of how it works. Check out the video below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s