prettierでMarkdownを整形すると日本語と英数字の間に半角スペースが挿入される問題
Prettierとは?
コードフォーマッター(ソースコードを整形してくれるツール)のこと.読み方はプリティア.コードフォーマッターは,コードをルールや慣例に基づき整形し,読みやすい(可読性の高い)コードにしてくれる.
可読性の低いコードは,バグの発生やメンテナンスのしづらさなど様々な弊害を生む.prettier
はVSCode
の拡張機能から簡単に導入でき,ショートカットキーから実行できる.prettier
以外のフォーマッターも開発されていてESLint
なども有名(lintとは構文チェックツールのこと).なぜ,ESLint
ではなく,prettire
を使うかという話は,ここを参照.
半角スペース問題
prettier
で日本語のMarkdownファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.
たとえば上の文章は次のようになる.
prettier
で日本語の Markdown ファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.
- `prettier` で日本語の Markdown ファイルを整形すると,日本語と英数字の間に半角スペースが挿入されてしまう.
はじめはあまり気にならなかったが,一度気になると気になってしょうがない.手で消したり,一斉置換して消したりしていたが,手間を減らすためのフォーマッターで手間を増やすなんて意味がないと思い,なんとかならないかと調べてみた.
しかしこれがなかなか根深い問題らしい.これを一旦の解決に導いてくれたのが@tats-uさんのこの記事で,prettier
にプラグインを導入し,これを解決している.ここでは簡単にこの手順をまとめておきたい.
方針
- Node Package Manager(npm)から
prettier
本体とプラグインを導入し,VSCode
と連携する.
初学者でprettier
を使い始めた人は誤解していると思う(私もよくわかって使っていなかった)ので,整理しておく.
VScode
の拡張機能のPrettierとnpm
で導入するPrettierは別物と思ったほうがいい.拡張機能はあくまで拡張機能で,PCにインストールされているPrettierをVScodeで使えるようにするのが本来の使い方(推奨)- しかし,
VScode
の拡張機能のPrettierにはPrettier本体が同梱されていてるので,何も気にせず使えてしまう.(←便利かもしれないが誤解を生む原因) VScode
が探すPrettierの優先順位は,- ローカルインストールされたPrettier
- グローバルインストールされたPrettier(ただし,prettier.resolveGlobalModulesがTrueになっていること)
- 拡張機能同梱のPrettier
前提
手順
npmの導入
homebrewから導入するのがいいだろうと思う.homebrewの導入はこちら
brew install node
インストールされているかの確認は,
npm --version # output 7.21.1
proxy設定
この記事を参考にした.
proxy下では,~/.npmrc
に次のように記述.
strict-ssl=false registry=http://registry.npmjs.org/ proxy=http://{{userid}}:{{password}}@{{server-address}}:{{port}}
もしくは,ターミナルから次のように書いてもいい.
npm config set strict-ssl false npm config set registry "http://registry.npmjs.org/" npm config set proxy "http://{{userid}}:{{password}}@{{server-address}}:{{port}}" npm config set https-proxy "http://{{userid}}:{{password}}@{{server-address}}:{{port}}"
確認するにはnpm config list
,削除するにはset
をdelete
に置き換えるか,~/.npmrc
の中身を消す.
prettierの導入
ローカルインストールが推奨されている.他のPCからgit clone
した際も使えるので,ローカルがいいだろうと思う.
- ローカルインストール
# 作業中のディレクトリに移動した上で # prettier本体の導入 npm install prettier -D --save-exact # プラグインの導入 npm install --save-dev prettier-plugin-md-nocjsp
- グローバルインストール
# prettier本体の導入 npm install -g prettier # プラグインの導入 npm install -g prettier-plugin-md-nocjsp
インストールができているかどうか確認するには,
npm list # output prettier_test@1.0.0 {pwd} ├── prettier-plugin-md-nocjsp@1.2.0 └── prettier@2.4.1
ただし,{pwd}
には現在のディレクトリが入る.
有効にするための設定
ホームディレクトリもしくは,カレントディレクトに次の内容で,.prettierrc
を作成することで,prettier-plugin-md-nocjsp
を有効にする.
# *snip* overrides: - files: - "*.md" - README options: parser: markdown-nocjsp - files: - "*.mdx" options: parser: mdx-nocjsp
json
形式で書くなら次でも同じ
{ "overrides": [ { "files": ["*.md", "README"], "options": { "parser": "markdown-nocjsp" } }, { "files": "*.mdx", "options": { "parser": "mdx-nocjsp" } } ] }
ここまでくれば,ターミナルからMarkdownファイルのフォーマットができる.カレントディレクトリのtest.md
をフォーマットしたいなら,
# フォーマットして上書きする npx prettier --write test.md # フォーマットできているかチェックする npx prettier --check test.md
実行
VSCode
の拡張機能からPrettierを導入- コマンドパレット(⌘+⇧+P)から"Format Document"を選択 or ショートカットキーから"Format Document"(⌘+⌥+F)で実行.
確かに日本語と英数字の間に半角スペースが入らない!
参考
Prettier 入門 ~ESLintとの違いを理解して併用する~ PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする 和欧文字間(漢字仮名と英数字の間)に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った [Node.js]大企業様で使われているproxy.pacよりProxyサーバを設定している環境で「npm install」を使う方法
面倒なパッケージ管理をhomebrewに任せてスッキリと
Macを買って色々弄り始めると,コマンドラインからパッケージを導入することが.増えると思います.
始めのうちは何が何やらわからず,ググった記事に書いてあるコマンドをコピペして,なんとなく望んだことができるようになってくるのですが,同じパッケージを異なるパケージマネージャーから入れていたりして,徐々に訳がわからなくなっていきます.そんな状態で,一度エラーが出たりするともうお手上げです.
そうなる前に,homebrewでパッケージを自分の支配下に置きましょう.
方針
できるものはhomebrew
で管理する.homebrew
で管理することが難しいものがあれば,その時はその時.
前提
とくに事前の準備の必要はない.むしろ,MacBookを買ってきたら,その日にする作業だろうと思う.
- macOS Big Sur 11.5.2
Homebrewのインストール
公式ホームページにも載っているが,ターミナルから1-linerでインストールすることができる.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Xcode Command Line Toolsは勝手にインストールされる.
チートシート
- パッケージのインストール
brew install [package]
- パッケージのアンインストール
brew uninstall [package]
- パッケージのアップデート
brew upgrade
# updateではないので注意
- エラーなどがないか確認
brew doctor
ready to brew
と出れば問題なし.エラーが出てるならば指示に従う.
- キャッシュファイルを消す
# 「以前のバージョンのファイル」と「現在インストールされているパッケージのファイルのうち120日以上前のもの」を消去する. brew cleanup # 日にちを指定してそれ以前のものを消去する. brew cleanup --prune=[day]
[day]には14
や20
のように整数を指定しても良いし,全て消去したい場合はall
としても良い.おそらくall
と0
の挙動は同じと思われる.怖い場合は,-n
or--dryrun
でテストできるので,やってみるといいと思う.1ヶ月で500MBくらいのキャッシュが,溜まってるはずだ.
- ヘルプをみる
コマンドのヘルプを見たい時は,他のコマンド同様に
man brew
としても良いが,長くて見づらいので
brew help # 以下出力 Example usage: brew search TEXT|/REGEX/ brew info [FORMULA|CASK...] brew install FORMULA|CASK... brew update brew upgrade [FORMULA|CASK...] brew uninstall FORMULA|CASK... brew list [FORMULA|CASK...] Troubleshooting: brew config brew doctor brew install --verbose --debug FORMULA|CASK Contributing: brew create URL [--no-fetch] brew edit [FORMULA|CASK...] Further help: brew commands brew help [COMMAND] man brew https://docs.brew.sh
とすれば簡単なhelpが出るし,コマンドごとの詳しい説明を見たければ,
brew help install brew install -h
とすればよい.1つ目と2つ目はどちらも同じ挙動をする.
brew cask は無くなった
古い記事でbrew cask
というコマンドが出てきますが,2.6から非推奨になり,2.7から無効になったようです.
Calling brew cask install is disabled! Use brew install [--cask] instead.
homebrewのcaskコマンドはオプションになりました
無効になったからといって,cask
が使えなくなったわけではなく,基本的には省略すればいいです.例えば,
brew cask install [package]
は次のようにすればいいですね.
brew install [package]
どうしてもcask
したい場合に,オプション--cask
として残っていますが,どのような場面で必要なのか,私にはわかりません.(同じ名前のformulaとcaskがある時に困るとか・・・?)
つまり,cask
とformula
の違いを意識することなく使えるようになった,ということですね.
参考
Homebrew公式 Calling brew cask install is disabled! Use brew install [--cask] instead. homebrewのcaskコマンドはオプションになりました
Python + Visual Studio Code 環境の準備
方針
プログラミンは初めてであるが,TeXの執筆でVisual Studio Code(以下,VSCode)を使用するので,これからどのような言語を扱うかわからないが,統合環境はVSCodeに統一しようと思う.
もし,使っていてVSCodeの使い勝手が悪いようであれば,それはその時に考える.統合環境に限らず,環境の準備は一筋縄ではいかないので,この記事は試行錯誤の記録になると思われる.いずれは,綺麗にまとめたものを記事にしたい.
前提
MacOS Big Sur 11.5.2
Homebrew
- 導入方法や使い方は,今後記事にしたい.
Pythonのインストールと環境の構築
まず問題になるのが,どのバージョンのPythonを入れるべきかであるが,調べたところメジャーなバージョンが2.7系及び3.8系らしいのでそれを入れてみることにする.
pyenv
Pythonのバージョンはpyenv
で管理するので,Homebrew
でpyenv
をインストールする.
$ brew install pyenv
バージョンの確認
$ pyenv -v pyenv 2.0.5
pyenv
の必要な設定を~/.zshrc
に記述する.vi
などは初心者には使いづらいので,VSCodeで編集するのが直感的で良いと思う.
VSCodeから~/.zshrc
を編集するには,
$ code ~/.zshrc
とすれば良い.ファイルの上の方に次を記述する.
# pyenvさんに~/.pyenvではなく、/usr/loca/var/pyenvを使うようにお願いする export PYENV_ROOT=/usr/local/var/pyenv # 同じところにpathを通す export PATH="$PYENV_ROOT/bin:$PATH" # pyenvさんに自動補完機能を提供してもらう if command -v pyenv 1>/dev/null 2>&1; then eval "$(pyenv init -)" fi
上書き保存をして,ターミナルを入り直す.
(コマンドでターミナルを再起動する方法があるらしいが,よく意味がわかっていないでの,一度exit
して,「新しいウィンドウを開く(⌘+N)」している.)
上の設定ができているか確認する.
$ pyenv root
/usr/local/var/pyenv
複数のpython環境の構築及び切り替え
pyenv install --list
とするとインストール可能なリストを表示.2.x系と3.x系の最新をいれることにする.grep
を使って絞り込む.
~ >>> pyenv install --list | egrep '^[ ]+[23]\.[0-9\.]+$' | grep ' 2' | tail -n 1 2.7.17 ~ >>> pyenv install --list | egrep '^[ ]+[23]\.[0-9\.]+$' | grep ' 3' | tail -n 1 3.8.2
よって 2020/03/31 現在最新の2.7.17
と3.8.2
をいれることにする.
~ >>> pyenv install 3.8.2 ~ >>> pyenv install 2.7.17
インストール後は
~ >>> pyenv rehash # Rehash pyenv shims (run this after installing executables)
とするといいらしい.インストールしている python を確認するには
~ >>> pyenv versions * system (set by /usr/local/var/pyenv/version) 2.7.13 3.8.2
このままでは,system の python が使われているので,
~ >>> pyenv global 3.8.2 # globalで切り替え ~ >>> pyenv versions system 2.7.13 * 3.8.2 (set by /usr/local/var/pyenv/version)
とすれば,3.8.2
に切り替わる.
~ >>> zsh -l # zshの再起動 ~ >>> python --version Python 3.8.2
仮想環境 venv
python 自体に組み込まれている仮想環境作成ツール. もともと virtualenv という独立したツールだったが、python3.3 から組み込まれた.
~ >>> python -m venv [環境名]
で環境を作成.例えば,
~ >>> python -m venv ~/Documents/py_work/py3env
とDocument
に作成した.この中の構成は,
bin/ activate # この環境を利用するためのスクリプト pip # この環境用のpip python # pythonの実態へのリンク include/ lib/ # この環境のpipでインストールしたライブラリはこの下に置かれます。 pyenv.cfg
でライブラリもこの中に置かれるので他を汚さない.
ただし,これではまだ環境は有効になっていないので,
~ >>> source [環境名]/bin/activate
とする.この環境から出る場合は,
~ >>> deactivate
とすればいい.環境をリセットしたい場合は,deactivate
した状態で,
~ >>> python -m venv --clear [環境名]
とする.
pip
python のパッケージ管理ツールで,Python2.7.9以降、Python 3.4 以降からデフォルトで付属する.
pip は環境内に存在するので,pipでパッケージを管理する場合は,環境ごとにいれる必要がある.(パッケージのキャッシュは存在するみたいなので,毎回ダウンロードするわけではない.)
~ >>> pip -V # or pip --version pip 19.2.3 from /usr/local/var/pyenv/versions/3.8.2/lib/python3.8/site-packages/pip (python 3.8)
でバージョンの確認.
よくわかっていないが,path が通っている場合は,python -m
はつけてもつけなくても良い.例えば,
~ >>> python -m pip -V
~ >>> pip -V
は同じ.
pip パッケージの管理
インストールしているパッケージを確認
pip list
or
pip freeze
freeze
は表示形式が違って,細かく設定できるらしい.また,テキストファイルとして書き出すことも可能
pip freeze > requestment.txt
パッケージのアップデートは,
~ >>> pip list --outdated
でアップデートのあるパッケージを確認
~ >>> pip install --upgrade [package]
でアップデートできる.
pip-review で一括アップデート
環境にpip-review
をインストールする.
pip install pip-review
次のコマンドで一括アップデートできる.
pip-review --auto
VSCodeの設定
VSCode側の設定は簡単で通常通り拡張機能(⌘⇧X)を入れれば良い.現在導入しているPython関連の拡張機能は,
Python(必須)
Pylance
Jupyter
コマンドパレット(⌘⇧P)→設定(JSON)を開くからsettings.json
に次を記述する.
"python.pythonPath": "/usr/local/var/pyenv/shims", "python.defaultInterpreterPath": "/usr/local/var/pyenv/shims",
まとめ
これで一応の準備はできたはずである. 次回以降は,実際にコードを書いて練習してみる.