Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joe-sky/typescript-nornj-plugin

TypeScript language service plugin that adds IntelliSense for nornj tagged templates
https://github.com/joe-sky/typescript-nornj-plugin

Last synced: 21 days ago
JSON representation

TypeScript language service plugin that adds IntelliSense for nornj tagged templates

Host: GitHub
URL: https://github.com/joe-sky/typescript-nornj-plugin
Owner: joe-sky
License: mit
Created: 2019-04-10T10:40:46.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2022-02-11T00:34:00.000Z (almost 3 years ago)
Last Synced: 2024-10-27T21:34:27.611Z (3 months ago)
Language: TypeScript
Size: 66.4 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# TypeScript NornJ Plugin

TypeScript server plugin that adds intellisense for [NornJ template engine](https://github.com/joe-sky/nornj)

This is a fork of [typescript-lit-html-plugin](https://github.com/Microsoft/typescript-lit-html-plugin).

**Features**

- IntelliSense for html tags and attributes.
- Quick info hovers on tags.
- Formatting support.
- Auto closing tags.
- Folding html.
- CSS completions in style blocks.
- Works with literal html strings that contain placeholders.

## Usage
This plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. The simplest way to use this plugin is through the [nornj-highlight](https://marketplace.visualstudio.com/itemdetails?itemName=joe-sky.nornj) extension. This extension automatically enables the plugin, and also adds syntax highlighting for nornj and synchronization of settings between VS Code and the plugin.

To use a specific version of this plugin with VS Code, first install the plugin and a copy of TypeScript in your workspace:

```bash
npm install --save-dev typescript-nornj-plugin typescript
```

Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson)

```json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-nornj-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](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions).

## Configuration

You can configure the behavior of this plugin in `plugins` section of in your `tsconfig` or `jsconfig`.

If you are using [nornj-highlight](https://marketplace.visualstudio.com/itemdetails?itemName=joe-sky.nornj) extension for VS Code, you can configure these settings in the editor settings instead of using a `tsconfig` or `jsconfig`.

### Tags
This plugin adds html IntelliSense to any template literal [tagged](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `nj`:

```js
import nj from 'nornj';

nj`

`
```

You can enable IntelliSense for other tag names by configuring `"tags"`:

```json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-nornj-plugin",
"tags": [
"html",
"nj",
"njs",
"t"
]
}
]
}
}
```

### Formatting
The plugin formats html code by default. You can disable this by setting `"format.enabled": false`

```json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-nornj-plugin",
"format": { "enabled": false }
}
]
}
}
```

### Testing
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.