Giter VIP home page Giter VIP logo

inlinefold's Introduction

InlineFold

A Sublime Text plugin that is useful to fold regions into a single line.
It can be useful to hide long strings (for example, TailwindCSS classes).

If the cursor is on the same line where the text was folded because of the "inline_fold.rules",
the text will be shown,
else the text will be folded.

output

Set Fold Regions Globally

From the top menu, select Preferences > Settings and specify the "inline_fold.rules" setting:

// Preferences.sublime-settings
{
    "inline_fold.rules": [
        {
            // Example: <div class="..."></div>
            "fold_selector": "string.quoted.single - punctuation.definition.string, string.quoted.double - punctuation.definition.string",
            "preceding_text": "class,className",
        }
    ]
}
  • fold_selector - [Required] The fold_selector is the region that will be folded.
  • preceding_text - [Optional] The region will be folded only if the preceding_text is found before the fold_selector. InlineFold will scan max one line before finding the preceding_text. Multiple words can be specified by separating them with a comma, (example "preceding_text": "class,className").

Set Fold Regions per Syntax

If a rule is specific to a particular syntax, for example, Python. Open a Python file. Click Preferences > Settings - Syntax Specific and specify the "inline_fold.rules". Those rules will only apply to Python files:

// Python.sublime-settings
{
    "inline_fold.rules": [
        {
            // Example: view.run_command(...)
            // The `- punctuation.section.arguments.begin` will not fold the open bracket
            // The `- punctuation.section.arguments.end` will not fold the close bracket
            "fold_selector": "meta.function-call.arguments.python - punctuation.section.arguments.begin - punctuation.section.arguments.end",
        }
    ]
}

Examples

Here is a few examples:

{
    "inline_fold.rules": [
        // Fold TailwindCSS class names
        // Example: <div class="..."></div>
        {
            "fold_selector": "string.quoted.single - punctuation.definition.string, string.quoted.double - punctuation.definition.string",
            "preceding_text": "class,className",
        },

        // [Python] Fold docstring except for the first line of the docs string.
        // class Person:
        //     """
        //     Some really long docs string. ..."""
        {
            "fold_selector": "comment.block.documentation.python - punctuation.definition.comment",
        }
    ]
}

For more example go here.

inlinefold's People

Contributors

deathaxe avatar predragnikolic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

deathaxe gnat

inlinefold's Issues

Any plans to add this to PackageControl

I've been using the package as a replacement for Fold Python Docstrings for quite a while now (and also testing the HTML class folding configuration) and I think it's definitely usable in its current form.

What do you think of publishing it? I just stubled upon this package again as I was comparing my installed (in PC configuration) vs actual packages list (on disk).

Receipes

Hello ๐Ÿ‘‹

Feel free to share your "inline_fold.rules" with others!
Add an image so we can see it in action.
Use reactions.

Only write recipes in comments :) - I will hide any unrelated comment

Cannot fold anymore

inline-fold-broken

So doing the fold command (Ctrl+Shift+[) won't work anymore. It also breaks on non-xml files (JS, TS).

Allow specifying a number of context lines per entry that should not be folded

With the changes to the Python default package, it is now possible to fold the non-summary parts of a docstring, i.e. everything but the first line. However, when the summary line is on the second line, it means that we have folded regions on both sides of a line that include newlines, which makes for a somewhat whacky experience when navigating the caret within the docstring. See the apng in the following PR for an example:

deathaxe/sublime-packages#2 (comment)

gif

You can reproduce this by using the Python package from the Package's master branch and the following config:

    "inline_fold.rules":
    [
        {
            "fold_selector": "comment.block.documentation.python - punctuation.definition.comment",
        }
    ],

My proposal for this situation would be to add a configuration for context line where folding would not be applied for regions that are within n lines of the caret instead of on the same line as the caret.

Another idea related to this would be to unfold any regions that share a line with the currently active region (i.e. a region that would be folded if the caret wasn't inside it) and/or consider the additional config option here.

Keep unfolded areas unfolded after file reload on save?

Not sure if this is even possible but some tools reload files after they are saved (for example, prettier), and when that occurs all the area suddenly fold again which is a disturbing DX. Any ways to improve it or workaround it?

Support a regular expression for `preceding_text`

This isn't a huge priority, but I wanted to list it here as food for thought.

I'd like to only hide the class attribute text if it doesn't stand on its own line already, because that indicates that I am having exactly one attribute per line. In order to do that, I could match for \S\s+class="$, but the current preceding_text setting does not support this kind of flexibility.

Example:

                <span class="text-danger">
                    some text be here. the class above should be folded
                </span>

                <span 
                    class="text-danger"
                >
                    more text. here, the class should not be folded
                </span>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.