7. Text editor - Wiebsonice/GalleryMatch GitHub Wiki
Text editor
One of the most important tasks of a developer is to find, use and customise a text editor to your coding preferences. Coding goes with more ease if you are really familiar with your text editor. Loads of text editors have their own presets, but to really make a code editor your own you can usually add packages to extend the look & feel aswel as the functions of your editor. To come to a clear understanding of wich code editor I am planning on using I did some research. I decided to compare 3 Editors.
Visual studio code
Visual studio code is Microsoft's take on a text editor, Initially released in 2015. It's one of the most used and widely appreciated text editors to date. On a stack overflow survey held in 2019 more than half of all responders said to use Visual studio code.
VS Code includes enriched built-in support for Node.js development with JavaScript and TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON. - Visual code studio
On slant.co its also the 2nd ranked most used text editor, and the main reason of people using is:
Visual Studio Code comes fairly complete out of the box, but there are many plug-ins available to extend its functionality.
So it's clear to see that this editor is loved by a lot of developers.
Atom.io
Atom is Github's take on a text editor, written in node.js. The initial release was in 2014. It is one of the most "hackable" text editors available and one of the reasons it's loved by so many. Because this text editor is developed by Github, there is a seamless connection with Github itself. Although its not as popular as visual code studio, it is still ranked at #10 in the stack overflow survey as 13% said to use atom for all their development needs.
Atom is a great tool, especially for those who want to customise their editor easily, and beyond what others provide. As a web developer, the freedom to tweak, add, and extend your editor gives an incredible feeling of power. I also love its docs. The Atom Flight Manual provides a great starting point for new users. - Codementor.io
On slant.co Atom is ranked 7th most used text editor, and the main reason of people using is:
Atom has a built-in package manager and an extensive list of packages. Packages are written in Node.js or Coffescript.
I think it is fair to say that Atom is a solid choice for people who want to fully customise their text editor to their needs.
Brackets
Brackets is Adobe's take on a text editor. Built and used mainly for its live HTLM, CSS and JavaScript development capability's. Released in the same year of Atom.io. To my suprise it is not as widly used as I first thought. It did not feature on the stack overflow survey.
Why did i find this interesting? On my prior education at the Mediacollege Amsterdam they basically praised it during the development classes. Because its live editing feature and the easy to get in to features such as auto complete.
Why should you use it? As brackets state it:
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it without getting in the way of your creative process. You'll enjoy writing code in Brackets. - Brackets
Altough not featured in the stack overflow survey it is featured on Slant.co. The main reason people state for using the editor is:
Brackets will automatically refresh the browser and load the latest saved version of a file open in the browser. This works with php as well. Editing a css will even highlight the tag that's currently being worked on. However, it only works with Chrome.
Brackets seems like a great editor to get used to developing. From what i've read on the internet, more skilled developers tend to switch to different code editors.
What did I pick?
After getting used to developing, while using Dreamweaver and brackets, I am switching to Github's own Atom.io!
But that's only step one. Now I have to customise the editor to my needs. After-all that was the main reason of me picking atom as my next code journey. So further below you'll see all the packages and theme's I've used in my version of atom.
Theme
After some digging around trough theme's i've tried out a few. The default ones and some external ones. Atom has a setting for both Ui theme and the syntax theme. After a few days of using it I sort of fell in love with the "Base16 tomorrow dark" syntax theme. And for the UI theme I am using the Seti UI theme.
As a result this is how my code editor looks like after the transformation:
Packages
The text editor already felt like my own at this stage, but after lurking around in the packages I found a few that mostly would make my development work a lot easier. The full list of installed plugins can be found below, aswel as links to the GitHub page of the corresponding package. A full guide on how to install packages can be found here.
- The 80+ default packages (which can be disabled, but i've kept them all enabled.)
- Pigments A package that visualises color codes.
- Language-ejs A package that enables ejs syntaxing.
- FTP remote edit This package enables editing files from a FTP server.
- Emmet This package allows the use of emmet shortcuts to make the coding life easier.
- Atom-live-server A package that implements a live local host to see your code running and updating.
- Atom Beautify This package allows the use of beautifying your code to get it all in line with the rest of your project.
So thats it! My very own atom version.
I'll probably be adding packages and maybe even switch editors in the future but for now I am exploring atom.