まじで最＆高のvim環境を作りたい2

[まじで最＆高のvim環境を作りたい1
](https://qiita.com/KaoruIto76/items/8637cbf5c51ec0a8bd7c)
⬆︎の記事ではscala開発環境を***最＆高***にするvim-metalsの導入方法でしたが
今回は

- HTML
- CSS、SCSS、LESS　　⇦SASSはないみたいです(ネストをインデントで表現するやつ)
- TypeScript
- Angular

の開発環境を***最＆高***にしていきたいとおもいます

#### 前回何したっけ
1. `coc.nvim`っていうLSを管理してくれるプラグインの導入
2. ⬆︎を使って`vim-metals`を導入
3. Scalaの開発環境を最＆高に近づけた


#### 今回何すんの？
前回入れた`coc.nvim`さんで他のLS(Langage Server）も追加したい
自分はちょこっとAngular開発もしてるので今回は
html,css,js,ts,angularのLSを追加しようと思う
ついでにオススメのvimrcの設定ファイルもちょこっと

# 各言語のLSをInstall
結局やることは単純に`coc.nvim`の拡張機能を一個一個インストールするだけ
[coc.nvim](https://github.com/neoclide/coc.nvim)

#### めんどくさいのでAngularのプロジェクトを作っちゃう
検証なんですがhtm、ts、scss、angularの揃ったプロジェクトつくちゃった方が早い。
初めての人はこちらで`Angular cli`のインストール済ませてください
https://cli.angular.io/

別に自分でそれぞれのファイル作ってやっても全然大丈夫です

```console
$ ng new angular-exsample
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? {SASS,SCSS,CSS,LESS}から選ぶ
                                                  ⬆︎今回はSCSSを採用

...
..　　〜 いろいろ頑張ってる 〜
.

$ ls
angular-exsample 

$cd angular-example

$ls -al
.editorconfig
.gitignore
README.md
angular.json
e2e/
node_modules/
package-lock.json
package.json
src/
tsconfig.json
tslint.json
```
スタイルシートがscssで生成されるAngularプロジェクトができた

じゃぁ早速LSの方にいきましょう
## HTML
まずhtmlファイルを見にいきましょう
適当に```src/app/app.component.html```とかでいいでしょう
下の方の空いてるところに
<img width="183" alt="スクリーンショット 2019-05-26 1.36.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/5df88ccc-56dc-a2f0-dc33-51eaf7e2503a.png">
今の段階では何も出ないですが、

```vim
:CocInstall coc-html
```
https://github.com/neoclide/coc-html
とすることでhtmlのLSをインストールしてくれます
この時にyarnを使うので初期のyarnのインストールは必須でしたね。。。
<img width="210" alt="スクリーンショット 2019-05-26 1.37.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/f2f0ffbd-46ea-7fed-9bb3-fe5c1ec0f1ff.png">
できたらイェーい

マジYABAI
<img width="441" alt="スクリーンショット 2019-05-26 1.43.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/779e5df0-56b0-3304-9c61-c61b3b11ab0e.png">
ちゃんと`aside`とかあんまり使わないタグも補完が。
<img width="212" alt="スクリーンショット 2019-05-26 1.46.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/18b783f2-01d1-e06a-a434-947fc5526236.png">

***おすすめvimrc設定***
内容としてはシンプルで、タグを作った時に`</`とうてばそのネスト位置にマッチしたタグを勝手に閉じてくれるというもの

```vim
augroup HTMLANDXML
  autocmd!
  autocmd Filetype xml inoremap <buffer> </ </<C-x><C-o>
  autocmd Filetype html inoremap <buffer> </ </<C-x><C-o>
augroup END
```
ついでにXMLも書いてますがまぁ気にしないでください笑
不要な人は消しても大丈夫です笑

荒技ですが`</`で閉じた後にそのタグの中で編集していきたい人は
htmlの部分をこんな感じにするとよき

```vim
autocmd Filetype html inoremap <buffer> </ </<C-x><C-o><ESC>F<i
```
どういう意味かvimmerならわかると思いますが、

”閉じタグを生成して、ESCでノーマルモードに出て、左側検索の`F`に`<`を探して飛んで`i`でINSERTモードに入る”

を`</`に凝縮するっていうめっちゃ行儀悪いコマンド

でもそうするとこんな風になる
![vim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/285e2e2d-7268-876c-2a29-ab8d8f74ff03.gif)
タグの付け方クソ適当ですいません。動画撮るのに夢中でなんも考えてなかった笑
でも開発効率上がりそう〜〜〜

まぁ何はともあれ最＆高に一歩近づきましたね
## CSS
ほぼ同じように

```vim
:CocInstall coc-css
```
https://github.com/neoclide/coc-css

とやればいいだけ

これでもう
![scss.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/3578c67c-e76f-be83-f998-2ba452be794b.gif)
こんな風に鬼の補完　＋　ノーマルモードにすると構文エラーを検知してくれる

## TypeScript
```
:CocInstall coc-tsserver
```
同じようにLSを追加
https://github.com/neoclide/coc-tsserver

するとこんな感じい（もう適当になってる）
![ts.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/2354fde5-4ace-bc64-4689-c59540ac58b2.gif)
ちゃんとエラー教えてくれるの神

## Angular
AngularのLSもあったので追加してみた

```
:CocInstall coc-angular
```
<img width="291" alt="スクリーンショット 2019-05-26 4.00.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/48c336fb-613a-6dca-2c66-834bdc36ee60.png">
こんな風に補完が分厚い

これでそこそこ最＆高に近づいたんじゃないっすかね


今回の記事に関係するリンク
[まじで最＆高のvim環境を作りたい1
](https://qiita.com/KaoruIto76/items/8637cbf5c51ec0a8bd7c)[coc.nvim](https://github.com/neoclide/coc.nvim)
https://cli.angular.io/
https://github.com/neoclide/coc-html
https://github.com/neoclide/coc-css
https://github.com/neoclide/coc-tsserver
https://github.com/iamcco/coc-angular
https://github.com/neoclide/coc-vetur