--- title: 'Top Atom Packages You Should Install From The Start' url: 'https://worldoweb.co.uk/2018/top-atom-packages-should-install-start' markdown: 'https://worldoweb.co.uk/2018/top-atom-packages-should-install-start.md' date: '2018-04-04' description: 'A curated list of essential Atom packages to install from the start to enhance your coding experience and boost productivity in web development.' taxonomy: category: - 'Web Development' tag: - PHP - Tools - HTML - CSS - Extensions --- # Top Atom Packages You Should Install From The Start Published on April 4, 2018 by Tracy Ridge in [Web Development](https://worldoweb.co.uk/category/category:Web%20Development) Atom, like [Brackets](https://www.worldoweb.co.uk/2015/top-20-brackets-extensions), is a 21st century, full-featured, cross-platform, open-source hackable text editor from Github. Currently, at the time of writing, there are over 7000 Atom packages available to extend its functionality further. Sifting through all of those packages is both time-consuming and cumbersome. Out of the box, Atom works on OS X, Windows and Linux and features smart autocompletion helping you write code faster. Its file browser makes opening and adding files, folders and projects very simple. Having multiple pane interfaces allows you to compare and edit code across files. Find and replace will replace text across all of your projects or individual files. It also integrates well with GitHub and Git. Here are some of the best Atom packages available. ## Installing Atom Packages Open settings using the keyboard shortcut. ctrl+,(Win & Linux) cmd+,(Mac). Navigate to **Install** to search for packages. ![Install Package Menu](https://worldoweb.co.uk/user/data/wp-content/uploads/Atom-Install.png) ## IDE Functionality If you are wanting more of an experience in the form of an [Integrated Development Environment](https://atom.io/packages/atom-ide-ui) which enables better autocompletion, extra code navigation views such as outline view, document formatting and error/warning diagnostics. To install go to packages and search for **atom-ide-ui**. Along with the IDE, you can install support for various languages. - [HTML](https://atom.io/packages/ide-html) - [PHP](https://atom.io/packages/ide-php) - [CSS](https://atom.io/packages/ide-css) - [TypeScript & JavaScript](https://github.com/atom/ide-typescript/) - [C#](https://github.com/atom/ide-csharp/) - [Java](https://github.com/atom/ide-java/) - [Python](https://atom.io/packages/ide-python) [Search](https://atom.io/packages/search?q=IDE) in the atom packages website for more IDE addons. ## Improving the UI If you have just installed Atom for the very first time and haven’t installed any packages you will notice that the user interface is very clean. ![Atom without Packages](https://worldoweb.co.uk/user/data/wp-content/uploads/Atom-Safe-Mode.png)Vanilla Atom – Without any packages installed If you are a very visual person you have plenty of options, other than changing the theme. [File Icons](https://atom.io/packages/file-icons) change and add a splash of colour to the icons in the project explorer. It’s very subtle but make your files stand out more. [The minimap](https://atom.io/packages/minimap) package is a source previewer that sits along the side of your code editor. It can be tweaked further to suit your needs and has plugins to enhance its capabilities even more. ![Atom Packages](https://worldoweb.co.uk/user/data/wp-content/uploads/Atom-with-packages.png)With Minimap and File Icons installed ## Improving Code Although its recommended to write beautifully organised code from the start, occasionally you might still require the use of a plugin to clean it for you. [Atom Beautify](https://atom.io/packages/atom-beautify) is a package that takes the stress out of having to manually organise your code. Unfortunately, depending on what language you need to beautify, you may have to install further executables to use it. Furthermore at the time of writing this package is being re-written to use an online cloud service called [unibeautify](https://unibeautify.com/) which can beautify over 40 different languages without having to install anything extra. [CSS Comb](https://atom.io/packages/atom-css-comb) sorts CSS properties to a specific order. [Docblockr](https://atom.io/packages/docblockr) helps you write your documentation neater and faster. ## Project Manager Having tried a few project management tools I have found the best one to be [Project Viewer](https://atom.io/packages/project-viewer) It takes a little while to set up your projects but you can organise them into groups. Specify multiple file paths, assign images to both the groups and projects and much more. ## Type less, do more! [HTML to CSS](https://atom.io/packages/html-to-css) allows you to generate CSS, SCSS, SASS, LESS classes from an HTML file. It also supports BEM. Also check out [BEM Tools](https://atom.io/packages/bem-tools). [Emmet](https://atom.io/packages/emmet) is a shortcut tool to create code very quickly. By typing: ```html ul>li*5 ``` and pressing tab it will expand it to: ```html ``` [Turbo JavaScript](https://atom.io/packages/turbo-javascript) and [Quick JavaScript](https://atom.io/packages/quick-javascript) have a collection of commands and snippets for optimising JavaScript and Typescript development. [Build Sass](https://atom.io/packages/build-sass) compiles SCSS and Sass into CSS. Quickly insert hosted CDN libraries, such as jQuery, Font Awesome etc with [CDN Libs](https://atom.io/packages/cdn-libs) ## Collaboration [Teletype](https://atom.io/packages/teletype) is an Atom package that lets developers share their workspace with team members and collaborate on code in real-time. ## WordPress Tools If you edit WordPress themes and plugins then [WordPress API](https://atom.io/packages/wordpress-api) offers support for the core WordPress API with code completion support for WordPress Core Classes, functions, hooks and methods. [WordPress Suite](https://atom.io/packages/wordpress-suite) is a suite of tools including a debug watcher, WP-CLI Commands, Quick Tools to enhance your WP development. ## Compare Code Comparing code side-by-side is easy with [Split Diff](https://atom.io/packages/split-diff) which now supports Git changes. ## Test & Debug Code Run PHP, Python, Ruby code directly in Atom with [script](https://atom.io/packages/script) For other languages it may need other packages and further customisation. [Atom Live Server](https://atom.io/packages/atom-live-server) is an HTTP server with Live Reload capabilities. [Linter](https://atom.io/packages/linter) analyses code to help find and visualise errors. For a full list of linters visit [Atom Linter](http://atomlinter.github.io/) ## Conclusion This only scratches the surface with all the packages on offer. Have I missed your favourite atom package? Feel free to add yours in the comments below. ### Share [X](https://x.com/intent/tweet?text=Top%20Atom%20Packages%20You%20Should%20Install%20From%20The%20Start&url=https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start&title=Top%20Atom%20Packages%20You%20Should%20Install%20From%20The%20Start "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Top%20Atom%20Packages%20You%20Should%20Install%20From%20The%20Start%20https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start "Share on Bluesky") [Email](mailto:?subject=Top%20Atom%20Packages%20You%20Should%20Install%20From%20The%20Start&body=https%3A%2F%2Fworldoweb.co.uk%2F2018%2Ftop-atom-packages-should-install-start "Share via email") #### Tags [ PHP](https://worldoweb.co.uk/tag/tag:PHP) [ Tools](https://worldoweb.co.uk/tag/tag:Tools) [ HTML](https://worldoweb.co.uk/tag/tag:HTML) [ CSS](https://worldoweb.co.uk/tag/tag:CSS) [ Extensions](https://worldoweb.co.uk/tag/tag:Extensions) ##### Next [ ← How to Enter a Career in Technology ](https://worldoweb.co.uk/2018/how-to-enter-a-career-in-technology) OR ##### Previous [ How to Use Social Media to Increase Your Brand Awareness → ](https://worldoweb.co.uk/2018/how-to-use-social-media-to-increase-brand-awareness) --- ## Navigation - Previous: [How to Enter a Career in Technology](https://worldoweb.co.uk/2018/how-to-enter-a-career-in-technology.md) - Next: [How to Use Social Media to Increase Your Brand Awareness](https://worldoweb.co.uk/2018/how-to-use-social-media-to-increase-brand-awareness.md)