Skip to content

Jump between matching HTML tags and brackets smartly in VS Code. It's ported from Vim matchit by Benji Fisher

License

Notifications You must be signed in to change notification settings

alittlehorse/vscode-matchit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Jump between matching HTML tags and brackets smartly in VS Code. It's ported from Vim matchit by Benji Fisher.

The extension provides the command MatchIt: Jump Items to jump between HTML tags or brackets to help Javascript developer using JSX and React.

It's generic enough to support HTML/CSS/C/C++/Java/Perl/Javascript.

There are also commands Matchit: Select Items and Matchit: Delete Items.

Demo

Features

Press Ctrl+Shift+\ (on Mac it's CMD+Shift+\) or run command MatchIt: Jump Items to jump between HTML tags or brackets

Run command MatchIt: Select Items to select area marked by matching tags or brackets.

In below code, if cursor is at the beginning or end of class, function, conditional statement, html tag, you can use all commands from this extension.

Please note the cursor is not required exactly over the bracket character. The matching algorithm is smart enough to find correct matching item automatically.

export default class DropdownWithFilter extends PureComponent {
  render() {
    const {
      id,
      className,
      style,
      ...props
    } = this.props;
    if(!id) {
      return null;
    }
    return (
      <select
        id={id}
        className={className}
        style={style}
      >
        <option value="1">1</option>
        <option value="1">1</option>
      </select>
    );
  }
}

Custom Keybinding

You can also set custom shortcuts in keybindings.json via Code => Preferences => Keyboard Shortcuts.

[
  {
    "key": "ctrl+shift+\\",
    "command": "extension.matchitJumpItems",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+|",
    "command": "extension.matchitSelectItems",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+/",
    "command": "extension.matchitDeleteItems",
    "when": "editorTextFocus"
  }
]

Issues

Please submit issues to vscode-matchit support

License

This extension is released under the GPL v3.0 license.

About

Jump between matching HTML tags and brackets smartly in VS Code. It's ported from Vim matchit by Benji Fisher

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%