hogashi.*

日記から何から

 MacAlt Opt + Space を押すと C2A0 という空白文字 ( ノーブレークスペース - Wikipedia ) が登場してしまうっぽい、突然コマンドの様子がおかしくなったので丁寧に打ち直したら成功したけど、見た目には違いがわからなくてなんだったのかと思って od とかしてなるほどとなった。

$ # おかしいときの
$ git switch -c hoge
git: 'switch -c' is not a git command. See 'git --help'.
$ echo -n 'git switch -c hoge' | od -t x1
0000000    67  69  74  20  73  77  69  74  63  68  c2  a0  2d  63  20  68
0000020    6f  67  65
0000023
$ # 正しいときの
$ git switch -c hoge
Switched to a new branch 'hoge'
$ echo -n 'git switch -c hoge' | od -t x1
0000000    67  69  74  20  73  77  69  74  63  68  20  2d  63  20  68  6f
0000020    67  65
0000022

 ちなみにこの記事の html を見るとこうなっていて、確かに nbsp になっていた。

f:id:hogashi:20210318152110p:plain

 日曜に昼から頭痛がしていて、なんだろう寝たら治るかと思っていたらその夜中にどんどんひどくなっていって、何もできなくなってたまらず病院にかかったのだけど、睡眠不足とか肩こりとかいろんな原因でたまたま頭痛が起こりやすい日だったのでしょう、と言われて本当に申し訳なかったのだけど、しかし体験したことのない痛みがあるときに病院にかかるのは悪いことではない、ということも言ってもらえてかなり救われたのと、よく寝て肩とかこまめにほぐしましょうと言われてやはり申し訳なかった、あと痛すぎてずっと頭に手をやっていたのだけどこれしないほうがいいですかと聞いたところ、医学的にどうとかではないけど個人的には手当てって言葉がある通り痛いところに手をあてるのは本能として自然なことだと思うし痛みを感じるのは脳なので手をあてることで痛みが少しでも引くということはない話ではないと思うと言われてすごくよかった、お坊さんのお話をありがたく聞いたときと同じような気持ちになって申し訳なさと相まって会計の待合でさめざめ泣いていた、本当にそんなことで病院にかかって申し訳なかったと思ってここ数日は気づいたときに肩を回していて、太極拳とかやってみたいと思って動画を見たら型がめちゃくちゃあって全く覚えられなくて諦めて深呼吸だけ取り入れた。

 

 

monaco-editorをmonaco-editor-webpack-pluginで使う言語を絞ってwebpackでバンドルする

 microsoft/monaco-editor を素朴に webpack でバンドルするといろんな言語のファイルがついてきて大変、なんとかしたい、ということを書いたところ色々教わった、ありがとうございます。

blog.hog.as

 教わったのは IgnorePlugin | webpackmicrosoft/monaco-editor-webpack-plugin で、前者はパスの感じを色々試したけどうまく行かなくて*1、後者がうまくいった。

 やることは 2つあって、 import するとき monaco-editor 全部を import しないことと、プラグインを使うようにすること。

最初の困っていた状態

 webpack-contrib/webpack-bundle-analyzer で様子を見るとこうなっている。右下のちまちましたやつが全部言語のファイルで、今回は css 以外不要。

f:id:hogashi:20201231135025p:plain

import を絞る

github.com

 実際に使うファイル (今回は popup.tsx) で import のしかたを変える。具体的には↑この issue で↓こう指南されていて、確かにこれで言語のファイルは全部出力されなくなる。

- import * as monaco from 'monaco-editor';
+ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

f:id:hogashi:20201231135213p:plain

 ただこれだけだと、ほしい言語も含めて全く何も出ないので、補完とかがされなくなってしまって困る。

f:id:hogashi:20201231134808p:plain

monaco-editor-webpack-plugin を入れる

 この状態で、さらに webpack.config.js に monaco-editor-webpack-plugin を使って css だけほしいですというのを指定する。 worker たちを entry に指定する必要もなくなる(というか ERROR in Conflict: Multiple assets emit different content to the same filename css.worker.js という感じで被ってますというエラーが出る)ので削る。

+ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  
  module.exports = {
    entry: {
      // ...
      popup: './src/popup.tsx',
-     'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
-     'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    },
    // ...
+   plugins: [
+     new MonacoWebpackPlugin({
+       languages: ['css'],
+     }),
+   ],
  };

f:id:hogashi:20201231140312p:plain

 css のファイルはあるけど他のファイルはない、というやりたかった状態にできた*2。補完もちゃんと効く。

f:id:hogashi:20201231140415p:plain


 monaco-editor 初めて入れて使ってみたけど、入れるだけならめちゃくちゃ簡単に動いておもしろかった、 Chrome 拡張機能の右上のポップアップみたいな小さいところで急に VSCode みたいなエディタが動き始めるのは 1m 四方のジオラマをリアルなミニチュア電車が走っていくのに似たおもしろさがある気がする。

*1:本当はうまいパスの感じが存在するのかもしれない / ContextReplacementPlugin | webpack もうまく行かなかった

*2:webpack-bundle-analyzer の出力、 popup.js のほうも色々出方が変わっているのなんなのか?

monaco-editorをwebpackでバンドルしたらいろんな言語のファイルが登場するけどいっこしか必要なくて困ってる

(追記 2020/12/31) →こういうことのようだった: monaco-editorをmonaco-editor-webpack-pluginで使う言語を絞ってwebpackでバンドルする - hogashi.*


 monaco-editor 使って webpack でバンドルするといろんな言語の?ファイルが登場するけど UserCSS拡張機能に使うので CSS しかほしくない、そういう設定は見当たらない気がするし探し方が悪いのか誰もそんなことしたいって言ってない、 Chrome 拡張機能は変なコード混ざってないかチェックされるのでできるだけ使うファイルだけに絞るのが理想だし、ファイル名も 1234.js みたいなめっちゃ怪しい感じで 70 ファイルとかあって自分で見てもなんか嫌になるしチェックする人も大変だと思う、なんかうまい設定とか方法とかあったら教えてほしいです。

f:id:hogashi:20201230194501p:plain
ウオオ

 これなどを見てました: monaco-editor-samples/webpack.config.js at master · microsoft/monaco-editor-samples · GitHub

自分用にUserCSSのChrome拡張機能つくった

chrome.google.com

 自分で使うための UserCSS 拡張機能を作って公開した。 Chrome拡張機能は意外と信用しづらくて、ある拡張機能がいつの間にか全く違う人に買われてて自動更新でどんどん使いづらくなるとか、あるいは変なコードを埋め込まれてて情報が送られているみたいなことが多々起きている。特に仕事しながら使うならそういうの困るな〜と思って自分でさくっと書いた。大体完成したと思っているけど、エクスポート/インポートはしたいかもなとも思ってきて、 JSON でガッとやったりできるとよさそう。よければお使いください。

 ちなみにアイコンはオリーブオイルで、料理にちょっと足すイメージと、いっぱい入れると美味しい派閥があるイメージでなんとなく決めました。

icooon-mono.com