Скачать или смотреть How to Auto Add New Lines and Indent for Backticks in Sublime Text

Discover how to streamline your coding process in Sublime Text by automatically adding new lines and indentation with backticks.
---
This video is based on the question https://stackoverflow.com/q/67301506/ asked by the user 'Iskeraet' ( https://stackoverflow.com/u/12728118/ ) and on the answer https://stackoverflow.com/a/67369973/ provided by the user 'MattDMo' ( https://stackoverflow.com/u/1426065/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I auto add new lines and indent to a backtick in sublime text?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Auto Add New Lines and Indent for Backticks in Sublime Text

Are you a developer using Sublime Text and looking for a way to improve your coding workflow? If you often work with styled-components and want the same auto-indentation feature that occurs with curly brackets {}, but for backticks `, you're in luck! This guide will walk you through setting up this feature to enhance your coding efficiency.

The Problem

By default, when you hit Enter after typing a curly bracket {, Sublime Text automatically creates a new indented block. However, this functionality does not extend to backticks, which can be quite inconvenient, especially when writing styled-components in JavaScript or TypeScript. You end up having to manually format your code after adding backticks, which disrupts your flow and can slow you down.

Example

When typing with curly brackets, you would expect this behavior:

[[See Video to Reveal this Text or Code Snippet]]

But with backticks, you currently get:

[[See Video to Reveal this Text or Code Snippet]]

This can be frustrating if you frequently use backticks for multi-line strings or styled-components. Let's dive into how to fix this problem with a simple solution using Sublime Text's key bindings.

The Solution: Creating a New Keybinding

To enable automatic indentation after a backtick, you'll need to create a new keybinding. Here’s how to do it step by step:

Step 1: Open Key Bindings

Launch Sublime Text.

Go to the menu and select Preferences Key Bindings.

This will open a new window with two panes: the left side displays default key bindings and the right side is where you will add your custom keybinding.

Step 2: Add the Keybinding

In the right-side pane, you’ll need to enter the following JSON code:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Save Your Changes

After pasting the code, save the changes to the right pane.

Close the Key Bindings window.

Step 4: Test It Out

Now, go back to your text editor and try typing backticks followed by Enter. You should see this behavior:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Keybinding

Keys: This specifies the keys that trigger the command. In this case, it's the Enter key.

Command: The action that will be taken when the specified keys are pressed. We're using a macro that formats the new line.

Context: This defines when the key will work:

setting.auto_indent: Ensures that auto indentation is enabled.

selection_empty: Checks if the current selection is empty.

preceding_text and following_text: Ensures the cursor is surrounded by backticks before and after.

Conclusion

By following these steps, you can now streamline your coding experience in Sublime Text when working with backticks. No more manual formatting needed! Enjoy a more efficient workflow as you develop your applications with styled-components or any other scenarios where backticks are applicable. Happy coding!