Install Atom Text Editor and Use of Live Server Package for HTML, CSS and JavaScript

Updated: April 22nd, 2022, 07:52:49 IST
Published: April 22nd, 2022
Install Atom Text Editor and Use of Live Server Package for HTML, CSS and JavaScript
Title: Install Atom Text Editor and Use of Live Server Package for HTML, CSS and JavaScript

Atom is a free and open-source text editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in JavaScript, and embedded Git Control. It supports a wide range of programming languages, including C, C++, C#, CSS, HTML, Java, and many more. Atom has been enhanced by its user community through packages that provide new functionality.

Atom is a coding editor that was developed by Github. Because Github is now owned by Microsoft, Atom is technically maintained by Microsoft. And, sure, it is kept up to date. There are a lot of individuals on Github who are following the Atom repository, staring the repository, and actually using the editor.

A hackable text editor for the 21st Century

The editor is totally hackable, which means you can set it to function exactly how you want it to - either through plugins or by modifying the code yourself. Atom is a desktop program that was created using HTML, JavaScript, CSS, and Node.js.

GitHub for Atom

A text editor is at the heart of a developer's toolkit, yet it hardly works alone. The GitHub package allows you to interact with Git and GitHub directly from Atom.

Create new branches, stage and commit them, push and pull them, handle merge conflicts, see pull requests, and more - all from your editor. The GitHub package is pre-installed with Atom, so you're good to go!

Installing Atom

What is a "live server?"

Live Server that makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET - Whatever, it doesn't matter).

This is a small development server with the ability to reload in real time. Use it for tinkering with your HTML/JavaScript/CSS files, but not for releasing the finished product.

Adding atom-live-server

Go to Packages –> Settings View –> Install Packages/Theme screen allows for installing new ones.

In the “Search packages” text area or input field, type "atom-live-server" to find the package.

Click "Install" to download and install the atom-live-server package. (This process can take seconds to up to few minutes depending on bandwidth and other factors.)

Using a package called live server in atom.

Atom now includes a local web server thanks to the atom-live-server package.

Start:Click Packages –> atom-live-server –> Start server to launch the web-server for the currently open project (folder).

Stop: (Once launched, it may be terminated by going to Packages –> atom-live-server –> Stop...)

When atom-live-server is started, it launches a web server on port 3000 on the localhost. To put it another way, this is a private, local version of a web server.

Atom-live-server reloads the content when files are saved in Atom. This implies that when working with HTML, CSS, and JavaScript, the webpage will refresh as soon as the file is saved. It will always display the most recent version of the files. This allows you to view changes to the code as they happen and speeds up the design and development process.

Note: When hosting a web server on Windows, the Windows Defender Firewall may request you to confirm which sorts of networks to allow access to. Never use atom-live-server as a private server with public network access.

Some Other Atom extensions:

atom-beautify: Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom.

atom-css-comb: CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS). You can easily write your own configuration to make your style sheets beautiful and consistent.

atom-live-server: Launch a http server with live reload capability.

atom-notes: Embedded Notational Velocity-like features for Atom.

css-grid-snippets: CSS Grid Layout Snippets.

css-snippets: CSS, SCSS, Sass, and Less Snippets.

html-tag-auto-complete: A simple auto completion of html tags with class and/or id.

html-template-generator: HTML template generator for Atom text editor.

html-to-css: Generate CSS classes from HTML structure.

ide-css: Atom-IDE for CSS, LESS and SCSS language.

ide-html: Atom-IDE for HTML, Go Template, Mustache and other Templates.

language-atom-notes: Syntax Highlighting for Atom Notes.