prettierでMarkdownを整形すると日本語と英数字の間に半角スペースが挿入される問題

Prettierとは?

コードフォーマッター(ソースコードを整形してくれるツール)のこと.読み方はプリティア.コードフォーマッターは,コードをルールや慣例に基づき整形し,読みやすい(可読性の高い)コードにしてくれる.

可読性の低いコードは,バグの発生やメンテナンスのしづらさなど様々な弊害を生む.prettierVSCode拡張機能から簡単に導入でき,ショートカットキーから実行できる.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,削除するにはsetdeleteに置き換えるか,~/.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を買ってきたら,その日にする作業だろうと思う.

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]には1420のように整数を指定しても良いし,全て消去したい場合はallとしても良い.おそらくall0の挙動は同じと思われる.怖い場合は,-nor--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がある時に困るとか・・・?) つまり,caskformulaの違いを意識することなく使えるようになった,ということですね.

参考

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の使い勝手が悪いようであれば,それはその時に考える.統合環境に限らず,環境の準備は一筋縄ではいかないので,この記事は試行錯誤の記録になると思われる.いずれは,綺麗にまとめたものを記事にしたい.

前提

Pythonのインストールと環境の構築

まず問題になるのが,どのバージョンのPythonを入れるべきかであるが,調べたところメジャーなバージョンが2.7系及び3.8系らしいのでそれを入れてみることにする.

pyenv

Pythonのバージョンはpyenvで管理するので,Homebrewpyenvをインストールする.

$ 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.173.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",

まとめ

これで一応の準備はできたはずである. 次回以降は,実際にコードを書いて練習してみる.