https://github.com/quramy/vim-js-pretty-template

highlights JavaScript's Template Strings in other FileType syntax rule
https://github.com/quramy/vim-js-pretty-template

coffeescript dart javascript syntax-highlighting typescript vim

Last synced: 6 days ago
JSON representation

highlights JavaScript's Template Strings in other FileType syntax rule

• Host: GitHub
• URL: https://github.com/quramy/vim-js-pretty-template
• Owner: Quramy
• License: mit
• Created: 2015-07-13T03:00:10.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-07-13T18:00:17.000Z (over 3 years ago)
• Last Synced: 2024-10-19T01:33:26.775Z (18 days ago)
• Topics: coffeescript, dart, javascript, syntax-highlighting, typescript, vim
• Language: Vim script
• Homepage: http://www.vim.org/scripts/script.php?script_id=5222
• Size: 112 KB
• Stars: 142
• Watchers: 4
• Forks: 11
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# vim-js-pretty-template

A Vim plugin to highlight JavaScript's [Template Strings](http://tc39wiki.calculist.org/es6/template-strings/) contents in other `FileType` syntax rule which you want.

```js

var htmlTempl = `



  


    {{ctrl.message}}

  



`;

```


![capture](screencast01.gif)

Template Strings is available with [Babel](https://babeljs.io/), [google/traceur-compile](https://github.com/google/traceur-compiler) and [TypeScript](http://www.typescriptlang.org/).

## How to install

## Vim 8 native plugins

Replace "FOOBAR" with any directory name that you like:

```

$ mkdir -p ~/.vim/pack/FOOBAR/start/

$ git clone https://github.com/Quramy/vim-js-pretty-template.git ~/.vim/pack/FOOBAR/start/vim-js-pretty-template

```

### Vundle

Place this in your `.vimrc`:

```vim

Plugin 'Quramy/vim-js-pretty-template'

```

then run the following in Vim:

```vim

:source %

:PluginInstall

```

### NeoBundle

```vim

NeoBundle 'Quramy/vim-js-pretty-template'

```

then run the following in Vim:

```vim

:source %

:NeoBundleInstall

```

### Pathogen

Run the following in a terminal:

```sh

git clone https://github.com/Quramy/vim-js-pretty-template.git ~/.vim/bundle/vim-js-pretty-template

```

## Usage

### Tagged Template Literal

Set the highlighting of template strings with the  `jspretmpl#register_tag()` function. For example,

```vim

" Register tag name associated the filetype

call jspretmpl#register_tag('gql', 'graphql')

autocmd FileType javascript JsPreTmpl

autocmd FileType javascript.jsx JsPreTmpl

```

Then your JavaScript codes are Highlighted as the following:

```javascript

// GraphQL way if gql tagged

const query = gql`

  fragment on User {

    name

  }

`;

```

### For alternative JavaScript users

vim-js-pretty-template is also compatible for TypeScript, Dart and CoffeeScript.

* TypeScript

* Dart

* CoffeeScript

For example:

```vim

autocmd FileType typescript JsPreTmpl

autocmd FileType typescript syn clear foldBraces " For leafgarland/typescript-vim users only. Please see #1 for details.

```

then the following template string is highlighted:

```typescript

var tmpl: string = `

## Title

*Highlighted in Markdown way.*

`;

```

or for example:

```vim

autocmd FileType dart JsPreTmpl

```

then:

```dart

var tmpl = """

  

""";

```

## License

This plugin is released under the MIT license, see `LICENSE.txt`.