Skip to main content

Building Blocks in JS

Code Editors

Introduction to Code Editors

Code editors are indispensable tools that help developers do their "magic". A carpenter has an axe, a doctor - has a stethoscope, a chef - a knife, and a developer - you guessed it - A code editor!

Code editors are tools where developers write their code. Back in the day, people even used to write code in a notepad, and even today, you still can try it, but the kind of software we write, the scale and sheer size of the apps, it is almost impossible to visualize it without an editor.

As a front-end engineer, you would need to work on multiple technologies such as HTML, CSS, Javascript, React, etc.

Types of Code Editors

There are multiple segregation of code editors, Online vs Offline, Integrated Development Environments ( IDEs ) vs Rich code editors, etc.

Code editor:

A code editor is a text editor specifically designed for writing and editing code. They are generally lightweight, fast, and focused on providing an efficient coding environment.

Features:

Syntax highlighting: Highlighting parts of the code to differentiate as per their meaning, helps greatly with readability and meaning.

img.1

img.2

Which is easier to read? img.1 right? The reason being - Syntax highlighting!

Code completion: provides snippets to complete the code such as loops, functions etc.

Basic debugging tools: VS code has a "run" and "debug" option that helps run the code and put breakpoints ( imagine a play and pause mechanism ) to debug the code.

Lightweight and fast: The last I weighed VS Code, it was less than a gram! In all seriousness, it does not gulp all the system resources to run by default, but it could consume more system resources in certain scenarios with some plugins.

Extensible with plugins

You might be new to these terms, but you will get used to them as we start writing code!

A few examples of such editors are:

Visual Studio Code aka VS code.

Sublime Text

Brackets

Integrated Development Environments ( IDEs ):

An IDE is a comprehensive software suite that provides all the tools needed for software development in a single package. They are more robust than code editors, offering advanced features for project management, debugging, and version control.

An IDE, or Integrated Development Environment, is like a special toolbox on a computer that helps people write and build computer programs. Imagine you're building a LEGO set. An IDE is like having a table with all your LEGO pieces sorted, instructions in front of you, and tools to help you put everything together quickly and correctly. It makes it easier to find mistakes, see how things look, and put all the pieces together to create something cool, like a game or an app!

Features:

Advanced code completion and IntelliSense

Integrated debugging tools

Project management and build tools

Source control integration

Heavier and more resource-intensive

(Note: If you are new to this, not-to-worry, we will be discussing this in our tutorials)

A few examples of such editors are:

Webstorm

Visual Studio ( Not to confuse with Visual Studio Code )

They can also be segregated into online and offline editors

Online editors are browser-based tools that allow you to write, edit, and run code without needing to install software on your local machine. They are convenient for quick edits, collaborative coding, and accessibility from any device with internet access.

Examples:

CodePen: Ideal for HTML, CSS, and JavaScript snippets.

JSFiddle: A playground for web developers, allowing you to test and share code snippets.

Repl.it: Supports multiple languages and offers real-time collaboration.

StackBlitz: A powerful online editor for Angular, React, and Vue.js projects.

Developing a full-fledged application using online IDEs is not recommended since any tab failure/crashing can lead to code being lost. Also, it works online as the name implies, hence it requires constant internet connectivity.

Also, since it is on the browser, there is an aspect of the security concern, for tech organizations, data, and code is gold, and we cannot afford to risk it, hence I would suggest deferring from using online code editors for your main projects, but it is a good idea for a quick edit or code fiddle.

Offline editors are software applications installed on your local machine. They provide a stable and often more powerful environment for coding, with access to system resources and offline capabilities.

Examples:

Visual Studio Code (VS Code)

Sublime Text

WebStorm

Offline editors are more secure, it has access to system resources, hence works much more smoothly and the chances of code loss are minimal.

Authors choice: Throughout this learning journey, I am going to be using Visual Studio Code to write and edit code, if you wish to follow along, feel free to download and install Visual Studio code (It's 100% free ).

Why Visual Studio code?

Developed by Microsoft, VS Code is a highly popular and versatile code editor with a rich set of features and an extensive library of extensions. VS Code is the most popular code editor in the industry today, hence it has a ton of extensions that you can install that gives it almost if not all the capabilities of an IDE!

(Note: An extension is like a package, an add-on that makes the editor more capable, imagine it like an al-carte package on Dish TV! Or like an add on your add in your car, say you buy the most basic model of a car, there is no AC or reverse parking camera, you get that as an "Add-on", similarly an extension helps an editor be more powerful.)

In the end, it's a personal preference, hence please feel free to install what is right for you, based on the project, needs, and personal preference.

Steps to install Visual Studio code:

Visit https://code.visualstudio.com/

Click on the "nice and shiny" blue button (as per your device preference):

Extensions preferred by the author:

ESLint: ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, to makeavoid code more consistent and avoiding bugs.

Prettier - ESLint: A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.

Prettier - Code formatter: Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

< Let's create a video on extensions and link it>

Live Server: Helps detect and automatically display the changes in a .html file.

Great, I hope you are all set, I will see you in the next one.