formulahendry / vscode-auto-close-tag Goto Github PK

View Code? Open in Web Editor NEW

173.0 5.0 48.0 906 KB

Auto Close Tag for Visual Studio Code

Home Page: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

License: MIT License

TypeScript 100.00%

html xml autocomplete vscode typescript visual-studio-code vscode-extension

vscode-auto-close-tag's People

Stargazers

Watchers

Forkers

kaiwood dmay andywat niilante waderyan chrmarti myfonj yuleven garygreen feafarot caub johnnytemp ckdlbc johanhammar alishirzad sumnow vpicone erikhuizinga yassinecc kyleyang libin1991 mjbvz raygesualdo itorenato subhamtnk11 softheroes albno273 gamcoh jieliuriver kangli-bionic stjordanis phyllisstein chaance chaomashi prathamedjx 603856288 danialdezfouli hemi413 kidonng dlhtx shriramu2002 richnsd alisaberi cfmleditor meslubi2021 sakgoyal ignacemaes n1ebieski

vscode-auto-close-tag's Issues

After closing a tag, hitting enter doesn't do what it should.

After closing a tag your cursor sits in between the tags you just created. But, like in Visual Studio IDE, hitting enter does not go to a new line and format the tags properly... Hitting enter is as if you are accepting the second tag and goes all the way to the end of the line. One has to navigate back between the two tags and then hit enter which then does work.

Would really like for this to be changed to do exactly what the Visual Studio IDE does or this messes me up completely. It does say that this is done the same as VS IDE but that's not entirely accurate. Hopefully what I'm asking is possible or I couldn't use VSCode, it would slow me down too much.

Thanks for all the work so far! Really nice.

vscode-auto-close-tag is not activated for '*.md' file.

Hello,

It seems that the extension is not activated for '.md' file, which is a common suffix for Markdown file. But regarding the current supported language list:

    "auto-close-tag.activationOnLanguage": [
        "html",
        "xml",
        "php",
        "blade",
        "ejs",
        "handlebars",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "razor",
        "vue",
        "liquid"
    ],

the extension should be activated. Could you please let me know what extra configurations I should make?

Reproducing Steps:

Open a blank readme.md file.
Try to type <html> and the extension is not activated.

Thank you!
Flos

Weird behavior on tags that are already closed

Please watch the screencast: Screencast

As you can see, the behavior is very strange. I would state that the problem is that the extension closes tags that are already closed and does that in an undetermined time period. Also it tries to close the tag even though I don't put the closing bracket > there.

support auto-closing after slash

Please, provide an option to insert closing tag only after </ was entered.

Auto close tag stopeed working on Version 1.12.2

Just to make sure my work space settings
`{
"editor.tabSize": 2,

"workbench.editor.enablePreview": false,

"auto-close-tag.enableAutoCloseTag": true,

"auto-close-tag.SublimeText3Mode": false,

"dart.sdkPath": "C:\\Program Files\\Dart\\dart-sdk\\bin",

"auto-close-tag.excludedTags": [
    "cfset",
    "cfhttp",
    "cfqueryparam",
    "cfdump",
    "cfargument",
    "cfelse",
    "cfreturn",
    "br",
    "hr"
],

"editor.insertSpaces": true,
"python.linting.pylintEnabled": false,
"files.trimTrailingWhitespace": true,
"editor.formatOnPaste": true,
"editor.minimap.enabled": true,
"editor.snippetSuggestions": "top",
"editor.detectIndentation": true,
"editor.matchBrackets": true,
"editor.autoClosingBrackets": true

Cannot read property 'text' of undefined

Cannot read property 'text' of undefined: TypeError: Cannot read property 'text' of undefined
    at CheckRightAngleBracket (C:\Users\xxx\.vscode\extensions\formulahendry.auto-close-tag-0.4.2\out\src\extension.js:89:25)
    at insertAutoCloseTag (C:\Users\xxx\.vscode\extensions\formulahendry.auto-close-tag-0.4.2\out\src\extension.js:18:31)
    at C:\Users\xxx\.vscode\extensions\formulahendry.auto-close-tag-0.4.2\out\src\extension.js:5:9
    at e.invoke (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:14715)
    at e.fire (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:53565)
    at t.$acceptDirtyStateChanged (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:343547)
    at t.e.handle (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:312304)
    at s (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:176531)
    at h (c:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\node\extensionHostProcess.js:23:177208)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

I'm seeing this error show up a lot in the Dev Tools. Looking at line 89, a simple if check would resolve this. Haven't done any real looking into what the expected results are, so I'm not sure if an 'else' is needed.

function CheckRightAngleBracket(contentChange) {
   if (contentChange) {
       return contentChange.text === ">" || CheckRightAngleBracketInVSCode_1_8(contentChange);
   }
}

TypeScript Generics: Adds closing "Tag" to type specifier

Using VS Code and editing a TS File and using generics, the plugin is adding a closing HTML-Tag to the generics type specifier, e.G.:

clicked = new EventEmitter<string></string>()

It's okay for Angular2 TS files containing inline HTML templates, but it should somehow detect if I am editing a generic class instantiation.

Edit:

Rename Tag

Hi Guys,

Thanks for this great component. It is really useful and time-saving. I have a request though, which I am not sure was requested earlier.

I know this plug-in is more to do with Auto-close-tag as the name suggests, but would you guys be able to include tag renaming into the same plugin? I have another plugin that does the tag rename, but when tag-rename plugin is enabled, the auto-close-tag doesn't work.

I believe these features makes more sense to group them into one plug-in rather than having to install 10s of plugins for HTML editing.

Regards,
Raghu

How to add Classic ASP?

Hi I tried adding classic asp to the list as:
`
"
auto-close-tag.activationOnLanguage": [

    "html",  
    "xml",  
    "php",  
    "javascript",  
    "javascriptreact",  
    "typescript",  
    "typescriptreact",  
    "plaintext",  
    "markdown",   
    "razor",  
    "vue",  
    "asp"  
]`

But I'm guessing "asp" isn't what's needed here?

UPDATE: I actually got it working when I enabled:
"auto-close-tag.fullMode":true,

But it doesn't work when I use the following mode:
"auto-close-tag.SublimeText3Mode": true

[js] Extension don't work properly when specify "js" in settings.json

I 've been writing React code and intend to implement auto-close-tag in .js files like:

const App = ({children}) => <div>{children}</div>

At first I specified some suffixes such as html, js in settings.json and extension was broken, while switching back to the default * it worked again. I'm sure vscode was reloaded so I assume this would be the issue of extension itself.

JSX template literal tag closing issue

When there is a template literal inside JSX, and you type / inside it, it automatically gets replaced with /> as if it was closing a tag.

It doesn't do that inside single or double quotes, only inside template literals.

Path symbol "/" problem

Hi, @formulahendry
When using extension found the following questions, hope can be solved

Introducing file input path "/" symbol, automatically add ">" symbol, become "/>"
Don't want to expand in the src or href attribute within the string

arrow function shouldn't trigger auto-close

every time when I type => inside a jsx element, it triggers auto-close, which is a bit annoying.

tags with . (dot) are ignored

If you have a tag with a . it will not be closed automatically.

eg:

<abc>
  <test.ab> x
</abc>

if you try to insert a tag at insertion point x it will insert </abc> instead of </test.ab>

Tag should not be auto closed inside quotes

In angular 2, I often use condition like this:

<div *ngIf ="variable>0"><div>

Upon pressing > plugin will attempt to auto close the div tag inside the quotes, single or double.

This should not happen.

Screws up other plugins

This plugin seems to have a major bug. Whenever I use Alt + Cmd + . to close a tag, all other plugins are screwed up and don't work anymore. This also goes for the native tooltip function in VS Code (that shows information about HTML tags), it also stops working after that.

Enable TSLint

Doesn't work with HTML Liquid language extension

Doesn't work in .js file while using JSX in React render method.

I have a file like this

PageController.js

import React, {Component} from 'react';

class PageController extends Component {

    render() {
        return (
            <div className="page-controller">
                {this.props.children}             
            </div>
        );
    }
}

When I try to type new tag inside of the main div, extension doesn't work properly.
I type <h2 and when I press >, instead of desired result

<h2>{cursor}</h2>

I end up with

<h2</div>{cursor}

I tried to overwrite settings and add "javascript" and "javascriptreact" to supported languages, but nothing changed.

Bug: Automatic close tag after tab switch

Closing tag is being put after tab switch when it is redundant.
Actually, it's not so easy to reproduce it, maybe the issue appears because some hidden char.

New setting proposal: onlyWithinQuotesOnLanguage

Working in a language like typescript causes false tag closes when coding generics. A new setting that restricts closes to only when typing in a quoted string would allow users to keep this feature enabled with far less false closes. Coding angular inline templates is an example of where this might be used.

"auto-close-tag.onlyWithinQuotesOnLanguage": [
    "typescript"
]

Edit:
I'm not sure what information the extension environment provides. Maybe there is a better way, such as knowing you're in a generic - or something similar.

Enable Auto Close Tag only on a set of languages

Currently, the Auto Close Tag is enabled for all languages by default. It will make more sense to only enable it on certain languages.
The plan is as below:

"auto-close-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "razor",
    "vue"
]

Closing brackets between tags

Example:

Typing <div> and tab Auto Close Tag inserts <div></div> and places the cursor in between. If I here insert a { no closing curly brace is inserted and it looks like this <div>{</div>. However, if i add a space after and then move the cursor back one step the closing curly brace gets inserted correctly and the result looks like this <div>{} </div>

Not sure if this is a limitation in how VS Code auto closing works, but it could however be fixed pretty easy by letting this plugin insert a space after the cursor on inserting the closing html tag.

TypeScript generics auto-close as if HTML

Hello,

I have the auto-close extension.
I am currently working with RxJs and I found that when I use the type syntax for my generics: Observable<Type> the auto-close feature kicks in, so I get Observable<Type></Type>.

Perhaps the extension could read the file extension and check it against a whitelist of extensions so the .ts files no not auto-close, only .html?

Thanks

Extension is auto-closing generic type parameters in TypeScript

When using type parameters or generics, this extension will add another closing "tag" even though it's not HTML at all.

e.g.

myMethod<T>() { } // When typing, <T></T> is added

doStuff() {
   myMethod<Person>(); // When typing, it adds </Person>
   myMethod<any>(); // When typing, an ending </any> tag is added
}

Now I could add every single type/class name to the "auto-close-tag.excludedTags" list, but that would be quite cumbersome.

Ideally, there would be a way to disable this extension for all *.ts file types. Is there a better way to prevent auto-close in my TypeScript code?

is there a way to suppress closing for some tags?

hello,

can I suppress closing for some tags? (eg. meta)

Automatically adds close tags to TypeScript files

If I try to make a generic interface:

export interface ITest<Hello>

The moment I finish typing <Hello>, it adds </Hello> in a .ts file.

Support for IntelliSence

This extension is wonderful and I really like it, but I would like it to support the intellisence drop-down. That is the suggestor that gives you suggestions of what tags you want to use and if you hit enter it will put in the tag without a ending > and without the tag ending. Ex. I hit enter on a body suggestion: <body is the text/code that is put. But it doesn't have a ending tag or end the beginning of the tag.

Enable extension only for XML-like languages

I have a C/C++ workspace and auto close tag extension is triggered for #include statements:
#include <cstdio></cstdio>

Close self-closing not work in sublime text mode

Doesn't play nice with Emmet

The extension closes tags when expanding Emmet expressions:

Type ul>li
Tab or F1 > Emmet: Expand Abbreviation
Results in:
```
<ul></ul>
    <li></li>
</ul>
```

Catastrophic backtracking of regexp match in getCloseTag

Invoking auto close tag after lengthy tag (say, SVG <shape d="(lots of data)" />) either void/self-closing (<.../>) or with white-space before > hangs the extension:

<x 
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9/>
<y>|

(try https://regex101.com/r/CZBpI4/1 )

I'd try to change the regexp at [1] from
/<(\/?[a-zA-Z][a-zA-Z0-9:\-_.]*)(?:\s+[^<>]*?[^\s/<>=]+?)*?>/g
(BTW, why such complicated?) to say
<((\/?)[a-zA-Z][a-zA-Z0-9:\-_.]*)\s*[^>]*?(\/?)>
to prevent that (just guess, haven't tested myself yet in VSC).

Sorry for hurried report; just burnt evening tracking this with no time left for fixup.

[1]

vscode-auto-close-tag/src/extension.ts

Line 135 in ee36d50

let regex = /<(\/?[a-zA-Z][a-zA-Z0-9:\-_.]*)(?:\s+[^<>]*?[^\s/<>=]+?)*?>/g;

What seems scary is that hung extension host survives restart of VS Code and continues eating CPU as a zombie process. Is it normal?

Close tag using a shortcut

It would be useful having an option to set a shortcut to close the tag. Sometimes the autoclose is too intrusive and a shortcut would be better.
Sublimetext have the Cmd+alt+.
Thanks anyway for your plugin!

Flow generics should not be captured

eg:

type Something<string>

becomes:

type Something<string></string>

So Flow typing needs to be detected and likely TS as well. In the same file, it should know if you're dealing with components or generics.

Update to use HTML through language server

I don't know if this is possible, maybe I just get that wrong. I think that you maybe able to detect if VSCode is editing some html code, and active the auto close tag only then. :)

https://code.visualstudio.com/updates#_updated-htmlrazorhandlebar-support

Parameter List of generic types is not a tag.

Actual:
While writing code in Typescript, I entered following
"getData(): Promise"
and it converted to
"getData(): Promise"

Expected:
Since it is not HTML or XML tag, it should not be converted.

Limitation of scope

Quotes won't auto close

For some odd reason, single and double quotes are not self closing.
Brackets and parentheses are working fine though.

Version: April 2017 (1.12)
OS: macOS Sierra (10.12.4)

Please fix auto-close in React JSX files

Behavior seems fine in html files. But in React JSX files, upon auto-close, subsequently-typed text appears not in between tags, but after closed tag.

Initially:
render() {
return <tag>{visible cursor insertion point is here}</tag>
}
Upon typing:
render() {
return <tag></tag>{text appears instead appears here, not in the middle of tag pair}
}

Add test automation

Doesn't close tags for multiple cursors

Auto Close Tag 0.3.5

If you place multiple cursors with Alt-click and then open a new tag, Auto Close Tag only closes the tag on the original cursor, not any of the others.

sublime mode slow to complete

I've configured the plugin to complete in sublime text mode, but it seems when I type the </ it takes at least one flash of the cursor before the completion occurs, where I would expect it to be instant.

Is this a configurable delay? I've switched off all other extensions and still get the behaviour.

Can we have both standard and sublime3 modes at the same time?

Hi.

Is there a reason why those two modes are mutually exclusive? I like when tags close after >, but I also like when they close after entering </. The first option is for creating new markups, the second one is for editing existing code. Both may be handy at the same time.

Using C# Generics like List<T> is Picked Up as a Tag by This Extension

When I'm coding in C# .cs files and I create something like new List<T> the extension things I'm trying to add a tag so it will add in closing tag like this new List<T></T> and sometimes I don't catch this when coding fast. This example is shown below.

Self-closing tags are closed even if already closed

If I type <, then a > is automatically inserted. And if I add a /, nothing happens so I get </>: this is normal. But you usually name your tag before closing it.
So If I type <something, then I insert my /, a new > is added in addition of the one that was added after my <, resulting in <something/>>.

Basically, the plugin doesn't see the > already in place when trying to know if it should close a named self-closing tag.

Zen Coding Issue

Please see:
microsoft/vscode#17981

VSCode 1.8 breaks this extenstion

This extension was working wonderfully one minute, then I restarted to update to latest version of vscode (1.8.0) and the extension stopped working.

These tags should not be closed!

Tags inside comments
Tags inside strings
Void tags that are written in other case than lowercase

PD:

PD2: Thanks for this awesome extension

Closing a tag should check proper indentation

This plugin detects very nicely that it needs to close a parent tag a few lines up, but it doesn't set the indentation correctly.

Use backspace to undo auto close

I'm not sure if this is possible, but I think it would be useful.
(All examples below use a pipe to indicate cursor position)

// from here, hit '>' for auto close
<tag|
// from here, hit 'backspace' to undo auto close
<tag>|</tag>
// and end up with
<tag>|

This should only have effect if 'backspace' is the first character hit after auto close.

A great thing about auto close is you can go from here

<tag|

to here in only two keystrokes ('>' and 'enter')

<tag>
  |
</tag>

But it makes wrapping an existing section of html with a tag a bit more work. You can disable auto close and use sublime style closing which makes wrapping easier, but then takes several more keystrokes to achieve the final position above when not wrapping existing text. I think using backspace to undo the completion, but keep the '>' character would be pretty good solution for enabling both experiences.