🐳

Emmetのtrimフィルターを書き換えて、Wordからコピペした箇条書きの中黒点を削除する→フィルターを書き換えられなかった

2022/03/06に公開約5,200字

タイトルの通り、結論として何もできなかったという記事です。結論に至るまでの作業ログです。

作業環境

  • Windows 10
  • Visual Studio Code(2022.03.06時点 最新版)
  • Word 2016

やりたいこと

Wordから箇条書きをコピペすると、中黒点も一緒に表示されてしまいます。
やりたいのは、「Emmetで箇条書きを作成する際に、Wordからついてきた中黒点を消す」です。

実際にやったこと

Emmetのtrimフィルターという機能を使います。ただし、最初に記載した作業環境では、箇条書きの中黒点を削除することができませんでした。そのため、VSCodeの設定を変更します。

設定変更に際し、以下の手順を踏みました。

  1. 箇条書きの中黒点の文字コードを調べる
  2. VSCodeのsettings.jsonにフィルターの設定を追加する

Wordの箇条書きで生成される中黒点の文字コードを調べる

Wordの機能で箇条書きをつくると、初期設定では大きめの中黒点が出現します。(自分の環境ではそうでした…。)箇条書きの新たなスタイル(見た目)を追加する過程で、箇条書きの文字コードを調べることができます

Wordで作成した箇条書き

上記方法で、箇条書きの文字コードは10進数で108、16進数で006Cだとわかりました。
一旦、VSCode上で検索をかけてみます。
VSCode上で文字検索を実施しているところ:文字がヒットしなかった。

引っかかりませんでした。あれ?

調べ方が悪いのか出てこなかった

006c 文字コードで検索してみると、006cはアルファベット小文字のl(エル)を表すようです。どこにも中黒点は見当たりませんでした。

箇条書きの記号選択で、フォントを変えるとそもそも中黒点ではないことが分かった

もしかしてフォントが小文字のエルを中黒点にしているのか?と思い、フォントを変えてみたところ、ビンゴでした。

もともとWingdingsというフォントになっています。
Wordの箇条書きに使用する記号選択画面1:フォントにWingdingsを指定した。

フォントをTimes New Romanに変更してみると、たしかに小文字のエルになりました。
Wordの箇条書きに使用する記号選択画面2:フォントにTimes New Romanを指定した。

なぜこんなことになるのか?ヒントらしき記事を見つけたので追記しておきます。

別の方法で調べてようやく判明

Wordから箇条書きの中黒点の文字コードを調べようとしましたが、うまくいきませんでした…。
結局、「word 箇条書き 文字コード」で検索して出てきた「Wordの箇条書き行頭記号」にそれっぽいのが載っていまして、f06cであることがわかりました。

ただ、16進数の記号をそのまま検索欄に入れても、対象の文字にマッチしないので\uを頭に付けて\uf06cで検索します。
参考:文字列とUnicode - JavaScript Primer

VSCodeで文字検索を実施しているところ:文字がヒットした。

ヒットしました。あとはフィルターを書き換えるだけです。

Emmet(VSCode)のフィルター設定を変更する

Emmetの機能に、trimフィルターというものがあります。Wrap with Abbreviation機能と一緒に使うことで、箇条書きの中黒点や、数字付きリストの最初の数字を削除することができます。そのフィルターの値を変更します。

まず、VSCodeの中に入ってるEmmetで設定されてるフィルターの値を確認します。
trimフィルターは、下記の正規表現を使用しているみたいです。
/[\u00a0]*[\d#\-\*\u2022]+\.?/

これに先ほどの\uf06cを加えたものを、settings.jsonでフィルターとして設定します。
Visual Studio Codeの公式ドキュメントに、フィルターの値をカスタマイズできる旨が書かれています。

settings.json
"emmet.preferences": {
    "filter.trimRegexp": "[\\u00a0]*[\\d#-*\\u2022\\uf06c]+.?"
}

保存後、ul>li*|tでフィルターが働くか検証します。

VSCodeでEmmetの動作を確認しているところ。フィルターが機能していない。

どうもうまく働きません。

正規表現の記述内容の問題かどうかを調べます。
ページ内検索を試してみました。該当の文字にマッチしています。
VSCodeで文字検索を実施しているところ。文字がヒットした。

むむむ。。

正規表現の中身を一部変えてみました。
[\u00a0]*[\d#-*\u2022・]+.?
以下の文章で検証します。全角入力の・(中点)と半角スペース、それプラス文字列の組み合わせで作成した箇条書きのリストです。

・ テスト
・ テスト
・ 全角の中黒点でリストを作成しました。

該当文字にヒットしています。
VSCodeで文字検索をしているところ。文字がヒットした。

フィルタに先ほどの正規表現を設定して、再チャレンジします。が、反映を確認できず。
VSCodeで、先ほど調整したフィルターが動作するか確認をしているところ。フィルターは動作せず。

どうやら、trimフィルターは上書きできないようです。
作業ログはこれで終わりになります。

おわりに

Cliborの整形機能を使えば造作もないことでした。無理に一つのツールで完結させようとするのはやめます。あと、「Visual Studio Codeの公式ドキュメントに、フィルターの値をカスタマイズできる旨が書かれています。」と書きましたが、filter.trimRegexpの値をカスタマイズできるとは書かれていませんでした。勘違いでした。

Discussion

ログインするとコメントできます