The Atom Web Editor Free at https://atom.io/
The Atom editor originally started life back in 2008, as a side project from one of GitHub’s founders, Chris Wanstrath. Atom was born from his desire to create an editor that was flexible, easy to customise and built on top of web technologies. It wasn’t until a few years later though, in 2011, when Atom was picked back up by GitHub and subsequently taken on as an official project, and that’s when work on it really started to progress.
Work went on behind the scenes and whilst that happened, web technology in general improved to the point where it was viable to release the project publicly as a beta version in early 2014. A year and a few months later, in June 2015, version 1.0 was released.
The editor is built upon a range of familiar web technologies. At the heart of GitHub’s Atom is Electron, which uses Chromium as a base (the open source core of Google’s Chrome browser) and provides rendering of HTML, CSS and JavaScript as a stand-alone desktop application. The JavaScript is much more powerful than the JavaScript that can be found in web browsers, as it takes advantage of the Node.js project to provide a powerful API for accessing the filesystem, networking and much more. This also includes the possibility of using over 170,000 (at the time of writing) modules that are provided through Node's 'npm'.
All of their effort has created a cross-platform editor, which at this point includes all of the normal features that you’d expect to find such as syntax highlighting, autocomplete, searching files, multiple view panels, multiple cursors, project support and much, much more. The appearance of the editor is very flexible as well, with the overall look and the syntax highlighting both supporting themes, of which there are almost 800 that are already available to use. There is also support for packages, with over 2,500 available for expanding the editor in a multitude of ways.
Extending the Atom editor's functionality with Packages
Package installation: With the package count for Atom exceeding 2,500, there is no shortage of interesting additions you can add to your editor.Under the menu File>Settings, you’ll find a Packages item. This provides a list of all the packages you have installed and ones that were included with Atom by default (core packages). Here you can access any settings a package may have or disable/uninstall them. For installation, proceed to the Install section which provides a search input box. Type the name of the package you wish to install or keywords for something you would like to do. You’ll then be presented with a list providing a description, download count, version, link to the webpage of that package and an installation button.
Which languages are supported when combined with additional packages?
JavaScript: With Atom being built on top of JavaScript, you’d expect it to be well supported. Packages such as linter and linter-jscs can add code analysis tools (linters) to catch common issues or mistakes. Turbo-javascript provides a raft of commands and snippets to make writing ES6 JavaScript quicker.PHP: PHP doesn’t miss out on further support through packages. To complement the built-in syntax highlighting, php-cs-fixer can be installed to maintain your coding standards. For Atom’s autocomplete feature, install autocomplete-php and standard PHP functions will list as you type.
CSS: CSS gets the standard level of support from Atom with interesting packages from the community. ‘Pigments’ detects colour declarations and displays it as a background to the text and linter-css checks for common mistakes. Support is also available for preprocessors like Less.
HTML: Emmet wraps a popular tool to enable writing HTML as CSS selectors, being expanded into actual HTML by simply tabbing after typing your selector. Html-entities will handle encoding and decoding of special characters, autoclose-html helps with closing your tags as you type and various linters can check the HTML correctness.
Go: As a language developed by Google in 2007, Go has received some decent attention recently. Go-plus provides access to the powerful toolset that Go provides from within the editor: gocode to power the autocomplete, gofmt to tidy up your code, goimports to add and remove imports automatically and golint to check for common code issues and even building or testing code.
Node.js: While Node.js uses JavaScript, which has already been detailed, there are additional packages available that provide even deeper support. For example, Node-debugger hooks into the debug support that Node has with Atom and displays the active line and allows execution control.
Access the packages: While this primarily depends upon the way the package was written to work, there are a few places that a package will present itself. The menu at the top of the Atom editor contains a Packages item that packages can provide actions under. They will also usually add themselves to the Command Palette, so just use Cmd/Ctrl+Shift+P to bring up the palette and then type the name of the package to filter the list and display the commands for it. Finally, keyboard shortcuts are usually created, but these will be unique to each package and best found by reading the documentation for it.
Discovering packages: Going back to the Install area for packages within Atom, you should see an area listed for Featured Packages. This is a list featuring some of the favourite packages from the Atom community. If you check out the Atom website (atom.io/packages) you will find lists of packages that have been trending over the past day, week and month. This is a fantastic place to find out which packages are suddenly becoming popular with other developers.
Finally, the Atom website also has a blog which contains posts doing a new package roundup. They pick several new packages that have interesting features and showcase them with fuller descriptions and screenshots.
Package performance: If Atom is starting to feel sluggish or takes a long time to open, it’s worth considering the packages that you have installed recently.
A package that Atom includes by default is called Timecop and accessed via the Packages menu. It displays the loading and activation time of each installed package.
5 Must-have extensions
Minimap: Adds a thin additional column to the editor windowthatprovidesapreviewofthefullfile contents.Thiscanthenmakeiteasiertoscrollto specificcode.Git-plus: Source control is important and this package provides access to Git for that purpose, all from within Atom so you don’t have to leave the editor.
File-icons: Improves the filetree view and other areas within Atom by assigning colourful icons to different file types, making it easier to see the type at a glance.
Merge-conflicts: When merging branches in Git, conflicts can occur with the changes. This package provides an in-editor: a simpler way to resolve those conflicts.
iMDone: Looks throughout your project’s code for comments marked TODO, FIXME and others. It then takes this information and provides a kanban-style board.
