natewallace / angular2-inline Goto Github PK

VSCode extension that adds syntax highlighting for inline Angular2 templates.

JavaScript 100.00%

angular2-inline's Issues

Doesn't work with latest version of VS Code

I saw someone say they were having the same problem on the marketplace, but never submitted an issue as you suggested. This has always worked for me, and I love it, but it has not been working since I downloaded the latest version.

svg:g isn't clear

Feature request: in css code add box with color

The one feature I miss from actual css files is the little box to the left of the color specification that shows the color. It would be great if that could be added.

The extension doesn't seem to work in Ubuntu 16.04

I've installed the extension but I cannot get syntax highlighting. I've restarted vscode but no success.

I'm using this same extension and it works flawlessly in Windows.

BTW, thanks for your great work!

code completion of typed object

Hi,
I noticed that if I want to use intellisense it is not working inside the template.
See my GIF.
Is this by design?

Besides that really enjoy using your plugin!

Mark inline html as language html

Problem
Template strings are currently marked as language: javascript / typescript

It should be html instead. The language mode effects editor features such as bracket matching and commenting.

Fix
VSCode has an embeddedLanguages setting that marks language mode. We just added support for using embeddedLanguages with an injected grammar: microsoft/vscode#34316

I'll submit a PR that does this for this extension

highlighting breaks on [style.width.%]

<div *ngIf="options.progressBar">
    <div class="toast-progress" [style.width.%]="width"></div>
</div>

the highlighting breaks for the rest of the component after that.

close duplicate issues

#16
#21
#6

are all duplciates of issue 6.

Highlighting issue

with a (click)="export()":

without (click)=export()":

fwiw I also tried removing all of the html preceding this button but experienced the same highlighting issue.

Parameterize what can be considered "inline template"

Thank you for creating this plugin, it helps a lot in my development. Although I did notice that the syntax highlighting only works inside an object where the key is template, could there be a setting where I can allow wider range of highlighting coverage?

Example use cases:

let myTemplate = `<h1>Hello VS Code</h1>`

let pageTemplate = {
  head: `
  <head>
    <title>My Page</head>
  </head>`,
  body: `
  <body>
     <h1>Nice to see syntax highlighting here!</h1>
  </body>
  `
}

As of now both these cases are not supported, and the work around is to wrap every template string literal in an object under key template

String interpolation `${...}` breaks CSS highlighting

First of all, thanks for the awesome plugin -- it's a game changer!

I'm using string interpolation on styles to insert CSS values, as an alternative to SASS variables. But, syntax highlighting breaks after the first ${...}. Fortunately, it seems to reset after the rule closes.

Is this fixable? I might have time to work on a pull request this weekend, but no promises.

Setup example, for clarity

styles.ts

export const fontSizeSmall = '12px';

some.component.ts

import * as styles from './styles';

@Component({
  styles: [`
    :host {
      font-size: ${styles.fontSizeSmall};
    }
  `],
  ...

Highlight problem with self-closing tag

With self-closing:

Without:

Angular 1.x support?

Would this work with Angular 1 type template definitions?

Highlighting fails after inline conditional statement

As the following image shows, if a inline conditional statement is set inside a parameter, the highlight fails for the next until the next double quotes I think.

Is this extension still in development?

Highlight a problem: spread syntax in a method call

Hello,

I've got a problem with the current version 0.0.17
My current environment is
Visual Studio Code 1.18.1
TypeScript 2.6.1

The following code works correctly (runtime) but the extension angular2-inline highlights a problem with the call this._foo(...args)

Marked as:
[ts] Expected 6 arguments, but got a minimum of 0.
this: this

sample class

export class SpreadTest {
    public test(): void {
        const args = [0, 1, 2, ...['1s3', 3, ...['a']]];
        this._foo(...args);
    }

    private _foo(a, b, c, d, e, f): void {
        console.dir('spread ON');
        console.dir(a);
        console.dir(b);
        console.dir(c);
        console.dir(d);
        console.dir(e);
        console.dir(f);
        console.dir('spread OFF');
    }
}

Thanks in advance,
Regards

feature request add format to inline html

Thanks for this amazing extensions. It's been extremely helpful.

However, formatting is as important as highlighting, could you add format to inline HTML?

Highlights breaks on ngFor using variable name "module"

Hi,

I realized that syntax highlighting breaks when using the variable name "module" in an ngFor and using it in an interpolation binding.
This is an example when using it (every other extension disabled), working fine:

And the same file, nothing changed but the variable name:

Thanks!

Allow auto-formatting to beautify HTML

@natewallace would be useful to beautify the html inside the template literals with running the format command

False error

Thanks a lot for your plugin, it's really useful !

I have a small issue : it seems to pick up a false orphan chevron. Don't know if it's related to your plugin, but my template seems fine.

Can this be modified to add syntax highlighting to all template strings?

I do not use angular (or typescript) but would like to have highlighting for my template strings.

Can a flag be added, or a more generic extension published, to always attempt html syntax highlighting on template strings?

Is there a reason why this extension wouldn't work with Angular1?

I work on an Angular 1.5 project where we use the component syntax. After installing this plugin and restarting, I can't get the highlighting to work.

Here's what it looks like for me:

I looked through your code, but I don't see anything that's expecting @Component or anything Angular2 specific. Maybe I missed something, but it seems that the plugin is only looking for `template\s*:\s*``.

Am I missing something? Do you know if there's anything preventing this plugin from working with ng1?

Syntax highlighting can be broken before getting back on tracks

I stumbled upon this where syntax highlighting seems to break...then find its way back ?!
It's coming from the Angular Material website and the example regarding Table and Selection.

The highlighting is pretty broken with some supposedly red errors, a commentary (Position Column) which is not properly marked, then everything comes back into place.
I don't know what exactly confused the extension, the ternary operator, the AND operator or a mix of this "advanced syntax".

hello, does it relay on other extension ?

i can't make it work, is any setting after installing required?

my vscode is updated..

inline "?" breaks syntax highlight

hi.
I love this extension.
This is the behaviour i'm getting when using "?" inline [UPDATED]:

Thanks.

Syntax Highlight failed on curly brackets

Angular Routerlink queryParams with curly brackets:

Angular Routerlink queryParams without curly brackets:

Is it possible to use with coffeescript and a different template regexp?

@natewallace Just a question, but perhaps you or someone can guide me.

I'm using coffeescript for my inline angular template strings, and all of my templates starts with:

template: '''
html code...
'''

Is it possible to fork this plugin to customize to pick this ? I tried changing the RegExp that this plugin uses to detect template: ''' instead of template: `, generating the .vsix file and installing from there, to no success. Perhaps is because vscode itself is overriding highlighting rules ?

This is my current 'view' of things:

Add configuration of completition prefix

I would suggest to add configuration of fields that can contain html templates in addition to hardcoded template: "keyword".

highlighting breaks on ternary operator in template

Syntax highlighting seem to break whenever there is a ternary operator in an attribute:

<my-component [someInput]="something ? 'foo' : 'bar'"> // Highlighting breaks after this line

It does seem to be specific to attribute bindings, i.e this should still work:

<my-component>{{something ? 'foo' : 'bar'}}</my-component>

False Positive Error when using template selector of component from another module

I have several issues like this scattered throughout my project but here is one example.
I have an AttendanceCardComponent
@Component({ selector: 'tx-attendance-card', templateUrl: 'attendance-card.component.html', providers: [AttendanceService] }) export class AttendanceCardComponent implements OnInit { @Input() public log: AttendanceLog; @Input() public userId: string; constructor(private alerts: AlertService, private route: ActivatedRoute) {} public ngOnInit(): void { this.route.paramMap.subscribe(s => this.userId = this.userId || s.get('id') , err => this.alerts.addDanger('Something went wrong while accessing the route params')); } }
and it is declared and exported in an attendance module
@NgModule({ imports: [ SharedModule, AttendanceRoutingModule ], declarations: [ AttendanceReportComponent, AttendanceCardComponent, AttendanceIndvReportComponent, AttendanceModalComponent ], exports: [ AttendanceReportComponent, AttendanceCardComponent, AttendanceIndvReportComponent, AttendanceModalComponent ], providers: [AttendanceService, AttendanceReportResolver, AttendanceIndvReportResolver] }) export class AttendanceModule { }

Then I have an ProfileModule which imports the AttendanceModule
@NgModule({ imports: [ ProfileRoutingModule, AttendanceModule, ConsentsModule, DynamicFormsModule, JournalsModule, ProgramProgressModule, SharedModule, TreatmentPlanModule, ], declarations: [ ProfileComponent, ProfileInfoComponent ], providers: [ProfileResolver, ProfileService, MyStoryService] }) export class ProfileModule { }

In the ProfileComponent template shown below. I incorporate the attendanceCardComponent by selector and receive the error pictured. However it is part of a module and it compiles and runs fine.

Doesn't work at all

Isn't the HTML inside the template string supposed to be colored?

I'm using Visual Studio Code 1.26.1 for Mac OSX.

Can support inline css intellisense and format

This extension is great.really.But I hope can intellisense css or scss in the style.And I can't format style and template.Do you have and plan to implement these feature. thanks

string detection vs ternary expressions

It seems that when I use ternary expressions inside of an attribute, the string detection gets screwed up at a certain point but not every time...

Highlight is fine on that one...

But seems to go on and off on that one...

Cut and paste issues

When I replicate code I tend to select:

cut:

and then paste twice, but the indentation gets quite confused on the paste:

Code completion not working on v 1.9?

Hi there!

I just installed this extension but for me it's not working properly.

The code is correctly highlighted inside `` but the code completion for html tags isn't working, it only shows normal JS completions.

I tried disabling all my other extensions but didn't worked out. Or disabling will not work if there is a conflict, it has to be uninstalled?

Thanks!

Parsing seems to break with ternary in attribute

You can see the syntax highlighting breaks in the following the line:
[routerLink]="selected.services.length ? '/payment' : null"

This is legal template syntax but is not highlighted correctly.

Add open source license

Please add support for the Dart programming language for inline templates, thanks

Linting

Is there a way to enable linting on the inline style section? I've got an extension that lints SCSS files, but would also like to apply that to the styles: [] block.

Feature Req: Add support for separate template files

This works great for the html and css inline when setting up a component. But if the html is specified in another file and imported in, this plugin does not have any affect on the template file.

// foo.component.ts
import {FooComponentTemplate} from './foo.component.html';
@component({
selector: 'foo',
template: FooComponentTemplate
})

// foo.component.html.ts
export const FooComponentTempalte = `

. . . .

Feature: Comment tags for inline HTML

Currently, when trying to use the editor.action.commentLine or editor.action.blockComment shortcuts inside an inline template, Typescript style comments (ie // or /* */) are applied.

Would it be possible to override that behavior to apply HTML comment tags instead?

TS Object literal - "template" scoped incorrectly

Copied from microsoft/TypeScript-TmLanguage#395

From @smlombardi on December 30, 2016 2:41

VSCode Version: Code - Insiders 1.9.0-insider (9486bf472c5c558e4f1793e0e746da88d071b1cc, 2016-12-29T07:05:11.443Z)
OS Version: Darwin x64 16.3.0
Extensions:

Extension	Author	Version
material-icon-theme	PKief	1.1.5
code-settings-sync	Shan	2.4.0
sort-lines	Tyriar	1.1.0
html-css-class-completion	Zignd	1.0.3
Bookmarks	alefragnani	0.10.1
project-manager	alefragnani	0.12.2
one-monokai	azemoh	0.2.4
vscode-icontheme-nomo-dark	be5invis	1.2.1
vscode-eslint	dbaeumer	1.2.2
githistory	donjayamanne	0.1.4
tslint	eg2	0.7.1
vscode-great-icons	emmanuelbeziat	1.1.35
Angular2	johnpapa	1.0.2
theme-karyfoundation-themes	karyfoundation	10.2.0
ftp-sync	lukasz-wronski	0.3.2
HTMLHint	mkaufman	0.3.3
vscode-csscomb	mrmlnc	4.0.0
vscode-postcss-sorting	mrmlnc	2.1.0
vscode-stylefmt	mrmlnc	2.2.0
Theme-1337	ms-vscode	0.1.2
angular2-inline	natewallace	0.0.16
nonbreakingspace	smlombardi	0.0.1
vscode-icons	robertohuertasm	4.3.0
stylelint	shinnn	0.21.1
darcula-extended	smlombardi	1.0.0
theme-tesla	smlombardi	5.3.10
bootstrap-3-snippets	wcwhitehead	0.0.9
change-case	wmaurer	1.0.0

Steps to Reproduce:

see attached:

both of the items pointed out by red arrows should be scoped the same, except the ones that are purple are correctly scoped as
token meta ts decorator objectliteral object member object-literal key but for some reason template: and the entire contents of template key are scoped as:
token meta ts decorator objectliteral object member
therefore, it's impossible to correctly color the key name in a theme

Copied from original issue: microsoft/vscode#17921

Highlighting ending tag does not work properly

When I have the cursor on the starting tag then wrong ending tag is highlighted:

This works properly for regular html file:

The reason is the <img> element has / character in the start tag. This is however perfectly fine as per:
https://www.w3.org/TR/html52/syntax.html#start-tags

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

Feature request: Commenting inline templates with keyboard shortcut.

When commenting code in the inline template, it would be nice to select multiple lines, hit CTRL + / and have the  wrap the highlighted portion automatically. Currently, the comment that is implemented is the //, I'm assuming because the file extension is .ts instead of .html. This is a "nice-to-have" feature.

Great work by the way! Love the extension.

natewallace / angular2-inline Goto Github PK

angular2-inline's Issues

// foo.component.ts import {FooComponentTemplate} from './foo.component.html'; @component({ selector: 'foo', template: FooComponentTemplate })

Recommend Projects

Recommend Topics

Recommend Org

Jobs

// foo.component.ts
import {FooComponentTemplate} from './foo.component.html';
@component({
selector: 'foo',
template: FooComponentTemplate
})