Microでコード整形のPrettierを使用できるようにする

ターミナル上でコードを書くためのMicroをインストールするでインストールしたMicroにコードの整形(コードフォーマッター)のPrettier(以後プリティアと表記)をインストールしてみます。

Prettier · Opinionated Code Formatter

プリティアはWebのフロントエンド(HTML、CSSやJavaScript等)のコードの整形を行います。

早速、プリティアをインストールし、Microで使用できるようにしてみます。

今回の内容はラズベリーパイやクロームブックのクロスティーニを対象としており、ウィンドウズは想定していません。

Microはターミナル上でコードを書くためのMicroをインストールするを参考にしてインストールしてください。

プリティアはnpm経由でインストールします。

事前にクロスティーニに最新版のNode.jsをインストールするの内容に従って、npmを使用できるようにしておきます。

npmを使用できるようになりましたら、ターミナルを開き、下記のコマンドを実行します。

$ npm install --global prettier

エラーなく実行を終了しましたら、下記のコマンドでプリティアがインストールされたかを確認します。

$ prettier -v

3.3.3

のようにバージョンが表示されたらインストール終了です。

続いて、Microでプリティアを使用できるようにします。

 $ micro ~/.config/micro/settings.json

でsettings.jsonを開き、下記の内容を追加します。

"pluginrepos": [
    "https://raw.githubusercontent.com/gamemaker1/micro-plugin-prettier/main/repo.json"
]

追加方法は、settings.jsonの値が

{}

であれば、

{
    "pluginrepos": [
        "https://raw.githubusercontent.com/gamemaker1/micro-plugin-prettier/main/repo.json"
    ]
}

{
    "clipboard": "terminal"
}

のように既に他の値がある場合は、

{
    "clipboard": "terminal",
    "pluginrepos": [
        "https://raw.githubusercontent.com/gamemaker1/micro-plugin-prettier/main/repo.json"
    ]
}

にして保存します。

保存後にターミナル上で、下記のコマンドを実行します。

$ micro --plugin install prettier

エラーがなければ、プリティアのインストールは終了です。

プリティアの動作を確認してみます。

$ micro hello.html

でMicroを開き、

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>

のように左詰めのHTMLのコードを作成した後、Ctrl + sでコードを保存します。

保存後に

<!DOCTYPE >
<html>
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
  </head>
  <body>
    <h1>hello world!</h1>
  </body>
</html>

のように自動で整形されることを確認しましょう。

追記

プリティアのプラグインの設定ファイルは下記コマンドで編集できます。

$ micro ~/.config/micro/plug/prettier/prettier.lua

追記2

Microの公式のプラグインもautofmtもプリティアに対応しています。

GitHub - a11ce/micro-autofmt: Multi-language autoformatter for Micro

こちらのプラグインではプリティアの細かい設定はできません

Microでコード整形のPrettierを使用できるようにする

About