https://github.com/bdauria/angular-cli.vim

a Vim Plugin for angular-cli
https://github.com/bdauria/angular-cli.vim

angular cli vim vim-plugin

Last synced: 3 months ago
JSON representation

a Vim Plugin for angular-cli

• Host: GitHub
• URL: https://github.com/bdauria/angular-cli.vim
• Owner: bdauria
• Created: 2016-08-05T21:01:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-06-05T10:52:52.000Z (over 5 years ago)
• Last Synced: 2024-06-18T14:35:32.642Z (5 months ago)
• Topics: angular, cli, vim, vim-plugin
• Language: Vim script
• Size: 38.1 KB
• Stars: 37
• Watchers: 4
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# angular-cli.vim

a Vim Plugin for angular-cli 


angular-cli.vim provides a support for [angular-cli](https://github.com/angular/angular-cli), directly inside Vim. It allows the interaction with the cli without having to leave the editor, and also benefit from some comfort features such as autocompletion, split file opening, spec file for the current file opening...

The plugin is based on the idea of Time Pope's [rails.vim](https://github.com/tpope/vim-rails)

## Activation

The command namespace is not cluttered unconditionally.

All commands are created on invocation of the function `angular_cli#init()`.

Thus, you can manually activate angular-cli by `call angular_cli#init()`

or automatically initialize the commands depending on your typical setting for angular projects:

### On a filetype basis

```vim

autocmd FileType typescript,html call angular_cli#init()`

```

Commands will be available in all typescript and html files.

### By indicator file

```vim

autocmd VimEnter * if globpath('.,..','node_modules/@angular') != '' | call angular_cli#init() | endif

```

Commands will be available if the current or the parent directory contains `@angular` inside `node_modules`.

## The Ng Command

The Ng command (:Ng) simply calls the ng shell command with whatever argument it folows. You can use it with all the options available, for instance:

```

Ng build

Ng test

```

## The E Command (Edit)

The E command allows to open up an Angular file. The list of compatible file types are the following:

- Component *

- Module *

- Template (HTML files) *

- Directive

- Service

- Pipe

- Guard

- Spec *

- Stylesheet *

- Ng (every other file type: Class, Interface, Enum...)

For example, to open up the app.component.ts:

` EComponent app.component` (without the .ts extension)

The command supports autocompletion for the corresponding file type. 

The elements marked with '*' are available without arguments. In this case, the plugin will try to open the directly related file.

for instance, if `ESpec` is called without arguments while editing the component app.component.ts, it will try to open the corresponding spec file, app.component.spec.ts.

`ESpec` will also try to bounce you back to the file you left as long as you don't leave the buffer.

Stylesheet format is set automatically to the corresponding styleExt value from `angular.json` or `.angular-cli.json` depending on the project version.  

If neither exists, and `g:angular_cli_stylesheet_format` is not set manually, assume an Ionic project triggered the plugin and set to `scss`.

**Note to macOS users:** macOS grep is not compatible with GNU grep. You can install GNU grep under a different name (ggrep or whatever) and set `g:gnu_grep = 'ggrep'` to fix stylesheet autodetection if you don't want to set it manually for every project. (If you overwrite the system grep command with GNU grep then you're good)

## The S, V, T Commands (Split, VSplit, Tabnew)

Similar to the E command, except that the files are edited in a horizontal split (S), vertical split (V), new tab (T) respectively.

## The G Command (Generate)

The G command is used to call directly the `ng g` shell command. It is compatible with the following file types:

- Component

- Module

- Template

- Directive

- Service

- Pipe

- Guard

- Class

- Interface

- Enum

To generate a component, simply use: `GComponent my-component`

## Dispatch support

The plugin is compatible with Tim Pope's [vim-dispatch](https://github.com/tpope/vim-dispatch), by adding this to your .vimrc:

```let g:angular_cli_use_dispatch = 1```

Any PR or Feature suggestion is welcome.