How To Install Atom Packages Windows

In this article, we'll dig in to 12 of the all-time Cantlet packages for spider web developers. Cantlet has enough of competition — including Visual Studio Code and Sublime Text — merely it all the same holds its own as a pop and competent web development tool.

Why Utilise the Atom Editor?

VS Code may have won the hearts and minds of web developers over the by few years, but GitHub's Cantlet editor remains one of the better and more capable lawmaking editors on the market. Reasons to like it a lot include:

• installers are available for Windows, Mac and Linux
• it's been continually updated over the past decade
• speed has improved post-obit some criticism of initial releases
• it'south still gratuitous to download and use without restrictions or nag screens

Microsoft acquired GitHub in 2022, so the company at present has two good Electron-based code editors. Atom'south long-term futurity is probably in question, only development continues. If y'all're looking for a new lawmaking editor — peradventure after Adobe abandoned Brackets — Cantlet should be toward the top of your list.

Atom Packages and Themes

Atom has always publicized itself every bit a "hackable text editor for the 21st Century". The base install has insufficiently few features, merely y'all can extend it with add-ons known equally packages.

At the fourth dimension of writing, more than 3,000 Atom themes and 9,000 Atom packages are available. Part of the reason for this is that Atom can be extended using web technologies. If yous're a Node.js or client-side JavaScript programmer, you lot know plenty to create your ain Atom packages and enhance Atom in any way you desire.

How to Install Atom Packages

Calculation Atom packages is quite simple, every bit Atom comes with a born parcel manager. (Many developers are attracted to Atom partly because information technology's and so easy to install Atom packages.)

Open the Atom editor, click on the Edit carte in the top navigation bar, and then select Preferences. A new Settings tab volition open. Click on the + Install menu item and a search field volition announced on the right. This will let you to search for new Atom packages by proper noun. When you've located the Atom package y'all desire, hitting the Install push button.

Clicking on the Packages menu item will show yous which Atom packages are currently installed. Annihilation you've installed yourself will appear under Community Packages menu detail. You lot'll notice in that location's also a Cadre Packages bill of fare item. This lists those packages installed by default. You can disable these if you want, only it's better non to practice so, as this will touch the basic functionality of the editor.

Installing Atom packages from the command line

Cantlet likewise ships with a command-line tool chosen apm (which stands for Atom Parcel Manager). You tin also utilize this tool to install packages straight from the concluding.

The syntax is as follows: apm install <package-name>.

You can configure apm by using the apm config command-line option or past manually editing the ~/.atom/.apmrc file. Typing apm assist will give you an thought of what else it can do.

And with that said, here are twelve of the best Atom packages — plus a few bonus options — which make Atom into an fifty-fifty better code editor…

1. File Icons

Atom'south default file and binder icons are best described every bit "functional". An icon gear up such as file-icons improves the editor's appearance and makes information technology easier to locate files of a specific type.

• Go the File Icons bundle here: file-icons

Search "icon" in the + Install pane to locate dozens of culling options.

2. Projection Manager

Atom provides simple folder-based project management. Information technology's good enough if you're switching between a couple of projects, merely project-manager is ideal for annihilation more than sophisticated. It offers command palette options and an editable JSON file where you can define projects and with their own custom settings such as colors, tab preferences, then on.

• Get the Atom Projection Manager parcel here: project-managing director

iii. Sync Settings

If you're running Atom on more than one device, it's useful to synchronize the settings, key bindings, and snippets across installations. You tin manually synchronize by cloning files in the Config folder (Settings, then Open Config Folder), but sync-settings provides an easier automated option. Settings are saved to a Gist, but other Cantlet packages allow y'all to choose a local binder or Git repository.

• Get the Atom Sync Settings package here: sync-settings

4. Todo Testify

Y'all've started Atom, opened a folder, and then … what next? The todo-evidence Cantlet packet reveals comments scattered through your project containing keywords such every bit TODO, FIXME and Inverse, but you tin also add your own regular expressions.

• Become the Atom Todo Evidence bundle here: todo-bear witness

v. Minimap

minimap is one of the most popular Cantlet packages, with more than seven 1000000 downloads. It displays a condensed view of your lawmaking on the correct-manus side of the lawmaking editor window, which is a dandy aid for quick navigation. This feature enters your subconscious; yous won't think you're using it, but you'll miss information technology when it'southward not there.

Get the Atom Minimap package here: minimap

six. Highlight Selected

When you lot select a keyword or variable in VS Code, Sublime Text, or Notepad++, information technology highlights all other instances. highlight-selected brings that characteristic to Cantlet and is fifty-fifty better when combined with minimap-highlight-selected:

• Get the Highlight Selected Atom package here: highlight-selected
• Get the minimap-highlight-selected parcel here: minimap-highlight-selected

7. Machine Close HTML

Every bit the proper noun suggests, this package will automatically add a closing HTML tag when yous complete the opening tag. This may be a simple package, but I'chiliad unable to cope without motorcar-closing HTML tags! autoclose-html doubles your markup cosmos velocity. It works out of the box, simply the package likewise allows you to ascertain which tags should consummate inline (such as <p></p> or <li></li>) and which should create newline blocks (such as <commodity> ... </article> or <ol> ... <ol>).

• Get the Auto Close HTML Cantlet package here: autoclose-html

8. Pigments

Near editors accept CSS color previewers, but few match the pigments parcel for Atom. It parses colors, CSS custom backdrop, pre-processor variables, and even executes colour-changing functions such every bit lighten() and darken(). It scans your source files to build a palette of colors so you can reference them anywhere.

• Become the Pigments Atom package here: pigments

Also, the Color Picker package is for anyone who'd rather select colors than remember their names or hex values.

• Get the Color Picker package hither: color-picker

9. Linter

You can run linters from the command line, but it's not as quick or constructive equally live, in-editor code validation. Linter is 1 of the all-time. It'south fast, and less intrusive than some competitors.

Note that Linter is the core Cantlet package that provides an API for dozens of programming languages. Some, such equally HTML and CSS, require no further software. Others, such as eslint, require the Node module and configuration settings (total instructions are provided).

Linting your code will greatly meliorate your code quality, so I encourage y'all to give it a try.

• Get the Linter package here: linter
• Become the HTMLHint bundle here: linter-htmlhint
• Get the Atom CSSLint package here: linter-csslint
• Get the ESLint bundle here: linter-eslint

10. Auto Detect Indentation

Coders will never agree whether to apply tabs or spaces. Fifty-fifty when they do, they may prefer them in 2, four, or eight character flavors. I usually opt for whatever annoys the most people (three-grapheme difficult tabs?) but motorcar-detect-indentation works out what the projection requires then you demand never worry about information technology.

• Get the Atom Automobile Detect Indentation bundle hither: auto-detect-indentation

Alternatively, you lot can strength everyone'due south code to match your preferred fashion using Atom Beautify:

• Get the Atom Adorn package here: atom-beautify

11. Teletype

If yous've always used Live Share for VS Lawmaking, you'll understand how information technology'southward revolutionized pair programming. The extension allows two people to remotely edit code in the same workspace at the same time.

teletype is the equivalent parcel for Atom. It's a beta service, but looks good and seems reliable.

• Go the Atom Teletype package here: teletype

12. More than Atom Packages

We've covered what are, in my view, some of the best Cantlet packages. We'll finish with some special mentions that didn't get in to the top listing simply are even so really useful and worth looking at.

• Emmet (previously known as Zen Code) can expand CSS-similar expressions into HTML tags: emmet
• If yous're creating Remainder web services, Atom'southward REST Client provides a quick HTTP testing tool. Information technology's no match for powerful alternatives such as Postman, but is bully for quick and dirty testing: rest-client

  

• Finally, there's no need to manually check for updates. car-update-packages verifies your packages every six hours and does the piece of work for you: auto-update-packages

Later on-hours Add-ons

If your key count (keycount) proves you've done enough for the day, relax past reading xkcd comics, or have a quick game of Tetris, Reversi, Pong, Ophidian, or SimCity!

Have I missed your favorite Cantlet add-on?

Source: https://www.sitepoint.com/essential-atom-packages-web-development/

Posted by: zamoradrecandlere1979.blogspot.com

Share this post