Skip to content

Aurelia Syntax Highlighting and Snippets for SublimeText

License

Notifications You must be signed in to change notification settings

LetsZiggy/sublime-aurelia

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Aurelia Syntax Highlighting and Snippets for Sublime Text

Please note the plugin hasn't been submitted to packagecontrol.io. Thus has to be installed manually.

Installation

  • Install Aurelia
    • Package Control: Add Repository Method (Recommended)
      1. Open Command Palette (Default: Primary + Shift + p)
      2. Package Control: Add Repository
      3. https://raw.githubusercontent.com/LetsZiggy/sublime-aurelia/main/repository-package.json
      4. Open Command Palette
      5. Package Control: Install Package
      6. Aurelia
    • "Manual" Method (Requires manual update)
      1. Download this repository through Download ZIP
      2. Rename folder to Aurelia
      3. Move folder to [SublimeText]/Packages folder
        • To access [SublimeText]/Packages folder:
          1. Open/Restart Sublime Text
          2. Open the Command Palette (Default: Primary + Shift + p)
          3. Preferences: Browse Packages
      4. Restart Sublime Text
  • Restart Sublime.

How to use

The syntax group is listed as Aurelia in Sublime syntax selection list.

  • v1
    • Aurelia > Aurelia HTML v1 for .html files
    • Aurelia > Aurelia JavaScript v1 for .js files with @inlineView template syntax highlighting
    • Aurelia > Aurelia TypeScript v1 for .ts files with @inlineView template syntax highlighting
  • v2
    • Aurelia > Aurelia HTML v2 for .html files
    • Aurelia > Aurelia JavaScript v2 for .js files with @customElement template syntax highlighting
    • Aurelia > Aurelia TypeScript v2 for .ts files with @customElement template syntax highlighting

ApplySyntax:

  1. Project: Edit Project
  2. Add settings below:
    • v1
       {
       	"settings": {
       		"project_syntaxes": [
       			{
       				"syntax": "Aurelia/aurelia-html-v1",
       				"rules": [
       					{ "globmatch": "**/*.html" },
       				],
       			},
       			{
       				"syntax": "Aurelia/aurelia-javascript-v1",
       				"rules": [
       					{ "globmatch": "**/*.js" },
       				],
       			},
       			{
       				"syntax": "Aurelia/aurelia-typescript-v1",
       				"rules": [
       					{ "globmatch": "**/*.ts" },
       				],
       			},
       		],
       	},
       }
    • v2
       {
       	"settings": {
       		"project_syntaxes": [
       			{
       				"syntax": "Aurelia/aurelia-html-v2",
       				"rules": [
       					{ "globmatch": "**/*.html" },
       				],
       			},
       			{
       				"syntax": "Aurelia/aurelia-javascript-v2",
       				"rules": [
       					{ "globmatch": "**/*.js" },
       				],
       			},
       			{
       				"syntax": "Aurelia/aurelia-typescript-v2",
       				"rules": [
       					{ "globmatch": "**/*.ts" },
       				],
       			},
       		],
       	},
       }

Manually:

  1. Open Command Palette
  2. Set syntax
    • v1
      • .html
        • Set Syntax: Aurelia HTML v1
      • .js
        • Set Syntax: Aurelia JavaScript v1
      • .ts
        • Set Syntax: Aurelia TypeScript v1
    • v2
      • .html
        • Set Syntax: Aurelia HTML v2
      • .js
        • Set Syntax: Aurelia JavaScript v2
      • .ts
        • Set Syntax: Aurelia TypeScript v2

LSP compatibility

  1. Open Command Palette
  2. Preferences: LSP Language ID Mapping Overrides
    /* language-ids.sublime-settings */
    {
    	"text.html.aurelia.v1": "html",
    	"source.js.aurelia.v1": "javascript",
    	"source.ts.aurelia.v1": "typescript",
    	"text.html.aurelia.v2": "html",
    	"source.js.aurelia.v2": "javascript",
    	"source.ts.aurelia.v2": "typescript",
    }
  3. LSP client selector|languages option in .sublime-settings|.sublime-project
    • Sublime Text 4
       "selector": "... | text.html.aurelia.v1 | text.html.aurelia.v2",
      
       /* --- --- --- --- --- */
      
       "selector": "... | source.js.aurelia.v1 | source.js.aurelia.v2",
      
       /* --- --- --- --- --- */
      
       "selector": "... | source.ts.aurelia.v1 | source.ts.aurelia.v2",
    • Sublime Text 3
       "languages": [
       	{
       		"languageId": "html",
       		"scopes": [
       			"source.html.aurelia.v1",
       			"source.html.aurelia.v2",
       		],
       		"syntaxes": [
       			"Packages/Aurelia/aurelia-html-v1.sublime-syntax",
       			"Packages/Aurelia/aurelia-html-v2.sublime-syntax",
       		],
       	}
       ],
      
       /* --- --- --- --- --- */
      
       "languages": [
       	{
       		"languageId": "javascript",
       		"scopes": [
       			"source.js.aurelia.v1",
       			"source.js.aurelia.v2",
       		],
       		"syntaxes": [
       			"Packages/Aurelia/aurelia-javascript-v1.sublime-syntax",
       			"Packages/Aurelia/aurelia-javascript-v2.sublime-syntax",
       		],
       	}
       ],
      
       /* --- --- --- --- --- */
      
       "languages": [
       	{
       		"languageId": "typescript",
       		"scopes": [
       			"source.ts.aurelia.v1",
       			"source.ts.aurelia.v2",
       		],
       		"syntaxes": [
       			"Packages/Aurelia/aurelia-typescript-v1.sublime-syntax",
       			"Packages/Aurelia/aurelia-typescript-v2.sublime-syntax",
       		],
       	}
       ],

Limitations

  • For @inlineView|@customElement template syntax highlighting, inner escaped quotes won't work
/* example */
// double quotes
@inlineView("<template><div class=\"\"></div></template>")
//                                ^^^^ this doesn't work
@customElement({ template: "<div class=\"\"></div>" })
//                                     ^^^^ this doesn't work

// single quotes
@inlineView('<template><div class=\'\'></div></template>')
//                                ^^^^ this doesn't work
@customElement({ template: '<div class=\'\'></div>' })
//                                     ^^^^ this doesn't work

// backtick quotes
@inlineView(`<template><div class=\`\`></div></template>`)
//                                ^^^^ this doesn't work
@customElement({ template: `<div class=\`\`></div>` })
//                                     ^^^^ this doesn't work
  • For @inlineView|@customElement template syntax highlighting, interpolation with backtick quotes must be escaped
/* example */
// backtick quotes
@inlineView(`
<template>
	<div>
		\${ test }
		^^ dollar sign must be escaped
	</div>
</template>
`)
@customElement({
	template: `<template>
	<div>
		\${ test }
		^^ dollar sign must be escaped
	</div>
</template>`
})

Development


This package is based on aurelia/vscode-extension.