TypeScript language service plugin that adds IntelliSense for hbs tagged templates
npm install typescript-hbs-pluginbash
npm install --save-dev typescript-hbs-plugin typescript
`
Then add a plugins section to your tsconfig.json or jsconfig.json
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin"
}
]
}
}
`
Finally, run the Select TypeScript version command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions in the VS Code documentation.
$3
This plugin works with the Sublime TypeScript plugin.
First install the plugin and a copy of TypeScript in your workspace:
`bash
npm install --save-dev typescript-hbs-plugin typescript
`
And configure Sublime to use the workspace version of TypeScript by setting the typescript_tsdk setting in Sublime:
`json
{
"typescript_tsdk": "/Users/matb/my-amazing-project/node_modules/typescript/lib"
}
`
Finally add a plugins section to your tsconfig.json or jsconfig.json and restart Sublime.
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin"
}
]
}
}
`
$3
This plugin works with the Atom TypeScript plugin.
First install the plugin and a copy of TypeScript in your workspace:
`bash
npm install --save-dev typescript-hbs-plugin typescript
`
Then add a plugins section to your tsconfig.json or jsconfig.json and restart Atom.
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin"
}
]
}
}
`
$3
This plugin works Visual Studio 2017 15.8+ using the TypeScript 2.5+ SDK.
First install the plugin in your project:
`bash
npm install --save-dev typescript-hbs-plugin
`
Then add a plugins section to your tsconfig.json.
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin"
}
]
}
}
`
Then reload your project to make sure the plugin has been loaded properly. Note that jsconfig.json projects are currently not supported in VS.
Configuration
You can configure the behavior of this plugin in plugins section of in your tsconfig or jsconfig.
If you are using vsc-ember-syntax extension for VS Code, you can configure these settings in the editor settings instead of using a tsconfig or jsconfig.
$3
This plugin adds html IntelliSense to any template literal tagged with hbs:
`js
import {hbs } from '@glimmerx/component'
export default hbs
`
You can enable IntelliSense for other tag names by configuring "tags":
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin",
"tags": [
"hbs",
"template"
]
}
]
}
}
`
$3
The plugin formats html code by default. You can disable this by setting "format.enabled": false
`json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-hbs-plugin",
"format": { "enabled": false }
}
]
}
}
`
Contributing
To build the typescript-hbs-plugin, you'll need Git and Node.js.
First, fork the typescript-hbs-plugin repo and clone your fork:
`bash
git clone https://github.com/YOUR_GITHUB_ACCOUNT_NAME/typescript-hbs-plugin.git
cd typescript-hbs-plugin
`
Then install dev dependencies:
`bash
npm install
`
The plugin is written in TypeScript. The source code is in the src/ directory with the compiled JavaScript output to the lib/ directory. Kick off a build using the compile script:
`bash
npm run compile
`
$3
Run the test using the e2e script:
`bash
(cd e2e && npm install)
npm run e2e
`
The repo also includes a vscode launch.json that you can use to debug the tests and the server. The Mocha Tests launch configuration starts the unit tests. Once a test is running and the TypeScript server for it has been started, use the Attach To TS Server launch configuration to debug the plugin itself.
$3
You can submit bug fixes and features through pull requests. To get started, first checkout a new feature branch on your local repo:
`bash
git checkout -b my-awesome-new-feature-branch
`
Make the desired code changes, commit them, and then push the changes up to your forked repository:
`bash
git push origin my-awesome-new-feature-branch
``