如何让Atom实现类似Sublime Text的HTML代码折叠效果？

Hey there, I totally get your frustration—switching editors and missing that one key feature that made your workflow smooth is the worst. I’ve messed around with Atom’s settings and plugins to replicate Sublime’s code folding (where closed tags stay visible when folded), and here’s what worked for me:

1. Tweak Atom’s Built-in Settings First #

Start with the basics to lay the groundwork for folding:

• Open Atom’s Settings panel with Ctrl+, (Windows/Linux) or Cmd+, (Mac).
• Search for Fold Settings, then check the box for Show Fold Guides—this adds visual lines to indicate folded blocks, which helps keep context clear.
• Also, ensure Fold By Indentation is enabled if you work with indentation-based languages like Python or HTML.

2. Use the fold-status Plugin for Closing Tag Visibility #

This plugin is the closest I’ve found to replicating Sublime’s folded tag display:

• Open Atom’s Package Manager by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac), then search for Install Packages and Themes and hit Enter.
• In the package search bar, type fold-status and click Install.
• Once installed, open the plugin’s settings (click the "Settings" button next to the plugin in the Package Manager).
• Look for the Display Closing Tag option and check it. Now when you fold a code block (like an HTML div or a function), the corresponding closing tag will show up right next to the folded marker.

3. Customize with Stylesheet Tweaks (For Extra Control) #

If you want to fine-tune how the closed tag looks to match your theme, edit Atom’s custom stylesheet:

• Open the command palette (Ctrl+Shift+P/Cmd+Shift+P) and search for Open Your Stylesheet.
• Add this snippet to the file:

.fold-marker:after {
  content: ' </' attr(data-tag-name) '>';
  opacity: 0.7;
  margin-left: 5px;
  color: #888;
}

This appends the closing tag text to the fold marker in a muted color, just like Sublime does. You can adjust the color, opacity, or spacing to fit your preferences.

I tested these steps with Atom 1.60+ and they worked perfectly for HTML, JSX, and even block-structured programming languages. Give them a shot—hope they solve your folding woes!

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