www.youtube.com

自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな？

addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているaddonをコピーしてくる

.
├── index.html
├── addon    // コピーしてくる
├── lib
├── mode
└── theme

自動保管を行うためには以下の手順で行う

必要なjsファイルとcssファイルを読み込む
キーマップを設定する

まず、必要なファイルを読み込む

自動補完のためのファイルはaddon/hintに入っている。今回はCSSの自動補完をしたいため、以下の３つのファイルを読み込む

show-hint.js
show-hint.css
css-hint.js

※ show-hint.jsとshow-hint.cssはどの言語の自動補完をする時も必ず読み込むこと

<head>
  <script src="addon/hint/show-hint.js"></script>
  <script src="addon/hint/css-hint.js"></script>
  <link rel="stylesheet" href="addon/hint/show-hint.css">
</head>

次に、自動保管を行うためのキーマップを設定する。今回はCtrl + Spaceで自動補完をするようにする
extraKeysで指定する

const conf = {
  extraKeys: {"Ctrl-Space": "autocomplete"},
};

Ctrl+Spaceを押すと以下のように表示される！

f:id:tmg1998:20180416224558p:plain:w200

おぉ！！できてる！！！

こんな面白いこともできるっぽい！！

CodeMirrorでEmoji AutoCompleteをする

チュートリアルは一段落したから、色々いじってみて、テキストエディタを充実させるぞ！！！

TIL

Today I Learned. 知ったこと、学んだことを書いていく

自動補完(Autocomplete)の追加

参考文献