Atom编辑器是否有支持Angular自定义组件自动补全的插件？

Hey there! I totally get how frustrating it is when standard Angular tags work flawlessly with autocompletion but your custom components don’t show up. Let’s walk through the best solutions to get this sorted for you:

Recommended Plugins for Custom Component Autocompletion #

Here are two reliable Atom plugins built specifically to solve this exact issue:

• angular-components-autocomplete: This plugin scans your Angular project’s component files automatically and adds your custom component names to the autocompletion list.

  • To install it: Open Atom’s Settings → Navigate to the "Install" tab → Search for angular-components-autocomplete and click "Install". Or run apm install angular-components-autocomplete directly in your terminal.
  • After installation, restart Atom. It will pick up all custom components that are properly declared in your @NgModule (usually in src/app or your configured component directory).

• atom-angular: This all-in-one plugin packs a ton of Angular-focused features, including custom component autocompletion, template linting, and syntax highlighting. It plays nicely with your existing TypeScript and Angular plugins.

  • Install it the same way: Search for atom-angular in Atom’s Install tab, or run apm install atom-angular via terminal.

Quick Pre-Checks to Ensure Success #

Before you restart Atom, double-check these two critical points:

1. Confirm your custom component is added to the declarations array in your module file (like app.module.ts). If it’s not declared, plugins won’t be able to detect it.
2. Make sure your project follows the standard Angular structure (components in subdirectories under src/app with .component.ts/.component.html files). Most plugins rely on this structure to scan for components.

Manual Fallback (If Plugins Don’t Work Immediately) #

If you still hit snags, you can manually add custom entries to your existing tools:

• For Emmet: Go to Atom’s Settings → "Packages" → Find emmet → Click "Settings" → Scroll to "Custom Snippets" and add your component tags (e.g., <my-custom-component></my-custom-component> as a snippet).
• For Auto Complete HTML: In its settings, add your custom component names to the "Extra Tags" list.

That said, the dedicated Angular plugins above are way more efficient—they’ll auto-detect new components as you create them, so you don’t have to update snippets manually.

内容的提问来源于stack exchange，提问作者AMendis