editor - sasjakoning/blok-tech-2022 GitHub Wiki

Text editor

To get a better view of which text editor to use, I did some research online.

I looked up different editors:

  • Adobe Dreamweaver
  • Visual Studio Code
  • Atom

Dreamweaver

When I started writing code I used Adobe Dreamweaver. It's easy to use and included in the Adobe creative cloud package.

A useful feature from Dreamweaver is that you can preview your code live within the code editor as if it were a browser.

Create, code, and manage dynamic websites easily with a smart, simplified coding engine. Access code hints to quickly learn and edit HTML, CSS, and other web standards. And use visual aids to reduce errors and speed up site development.

Dreamweaver also has several starter templates build in that you can use. Also, because Dreamweaver is part of Creative Cloud, you can quickly import Creative Cloud libraries and Adobe Stock into your projects.

Dreamweaver logo

Visual Studio Code

Visual Studio Code (VSCode) is the program I started using when I started coding for CMD.

VSCode has smart plugins which help you clean up and autocomplete your code for a quicker and smoother workflow. VSCode also has an inbuild debugger which helps you find bugs sooner.

VSCode has great support for people that use Git to backup their code. It has build in support to stage, commit, push and pull files with a handy GUI.

Code editing. Redefined. Free. Built on open source. Runs everywhere.

Visual studio code logo

Atom

A hackable text editor for the 21st Century

I learned about Atom through one of my friends. Atom seems to be a little less complex than Visual Studio Code which could be useful for starters. The design is clean and Atom offers plenty of features.

Atom does have a handy feature in beta which could be extremely helpful when working together on a coding project. Especially when in a work-from-home situation. This feature is called Teletype and it enables you and your colleagues to work together real time on code.

Teletype introduces the concept of real-time "portals" for sharing workspaces. When a host opens a portal, their active tab becomes a shared workspace. There, invited collaborators can join in and make edits in real time. As the host moves between files, collaborators follow along with the active tab automatically.

Atom logo

:memo: Conclusion

Due to it's widespread support and large amount of plugins and extensions, I chose Visual Studio Code as my main code editor. VSCode is open source and frequently updated. It offers handy extensions which work well with Microsoft Edge Canary(my main browser) and nearly everyone I know works with VSCode which can be useful when troubleshooting.

Visual Studio extensions

In VSCode I use several extensions which help me improve my workflow.

Name Description
Code Spell Checker Check code and markdown for spelling errors. Underlines these and offers fixes.
CommentLikeSanne Handy extention which adds a shortcut to add code comments like Sanne 't Hooft does.
Live Server Puts your code on a localhost and refreshes everytime you save your code.
Prettier Formatter to clean up your code
Auto rename tag Automatically renames closing tag when opening tag is edited.
Markdown Table Makes creation of markdown tables easy.

I also have linters installed which will explained in detail here