TIL

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

自動補完(Autocomplete)の追加

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

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

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

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

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

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

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

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

  • 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をする

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

参考文献