Prettier、はじめました。
最初に
JavaScriptの整形ツール"Prettier"を使い始めてみたので、試してみた内容を備忘録的にこちらに書き残していこうと思います。ま、今更感ありますがね。。。
基本的に情報は公式ドキュメントを参照しています。
Prettierをそのままで使い始めてみる
eslintなどと組み合わせるパターンもありますが、まずはそのままで使ってみようと思います。
対象のプロジェクトルートで下記のコマンドを入力して、Prettierをインストールします。
yarn add prettier --dev--exactあとは"fmt": "prettier --write src/**/*.js"というように、package.json内のscriptsにコマンドを定義して実行すれば、完璧です。
(--writeオプションで整形したコードで上書きます)
"scripts":{"fmt":"prettier --write src/**/*.js"},package.json内にPrettierのオプションを指定することもできるようなので、私は下記のようにオプションを指定しました。
"prettier":{"singleQuote":true,"semi":false},- セミコロンはいらない
- 文字列はシングルクォートにする
という二つの指定です。
今回の場合だと、あとはyarn run fmtとコマンド叩くことで整形してくれます。
簡単ですね。
公式見てみるとCLI上でのオプションもたくさんありそうなので、色々と試してみるのも面白いかもしれません。
Prettier with Eslint
Eslintと組み合わせて使う方法。
公式ドキュメントを意訳してみた。
ESLintを使用している場合、ワークフローにPrettierを統合するのは簡単です。 PrettierをESLintに統合するには、2つの異なる方法がありますが どちらか一方、またはその両方を有効にすることができます。
２つ方法があるらしいので、その２つとも試してみることにします。
Use ESLint to run Prettier
プロジェクトで既にESLintを導入していて、一回のコマンドで全てのスタイルチェックを実行するような場合、ESLintに対してPrettierの実行を依頼することができるようです。eslint-plugin-prettierを使ってESLintルールを適用したPrettierを追加するだけのようです。
試してみます。
yarn add --dev prettier eslint-plugin-prettier
公式を見ると、.eslintrc.jsonに下記の記述を追記していました。
{"plugins":["prettier"],"rules":{"prettier/prettier":"error"}}実際に自身の方で試してみたプロジェクトではjs形式の.eslint.jsでしたが、記述にあまり変わりはないので割愛します。一応こんな感じで足してみました。
diff --git a/.eslintrc.js b/.eslintrc.js
index 1256756..15dafce 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,6 +11,7 @@ module.exports = {
"parserOptions": {
"sourceType": "module"
},
+ "plugins": ["prettier"],
"rules": {
"indent": [
"error",
@@ -23,6 +24,12 @@ module.exports = {
"quotes": [
"error",
"single"
+ ],
+ "prettier/prettier": [
+ "error", {
+ "singleQuote": true,
+ "semi": false
+ },
]
}
};
実際に足してみたソース(shinshin86/Try-TodoList-At-Vue)
↑のコードの14行目と、28行目から33行目までの箇所が足した箇所となります。
これで普段通りeslintを走らせると、prettierによるチェックが走ります。
prettierのデフォルトのルールだと、このプロジェクトでのeslintとのルールに差があるので、prettier側でめちゃくちゃエラーが出ました。
上のdiffにもある通り、ルールを変更しています。
--fixオプションを付けたESLintを走らせると、コード整形を行ってくれます。
Turn off ESLint's formatting rules
ESLintを使ってPrettierを実行する場合でも、別々に両方のツールを実行する場合でも、2つのフォーマット間で矛盾するルールというのが出てくると思います。
それを無効にする方法として(Prettierが気にしない他のルールを守りながら)、eslint-config-prettierを使う方法が提示されています。
これが二つ目。
要は、ESLintとPrettierの処理で重複する部分を無効化してくれるツールということみたい。
導入は下記の手順。
yarn add --dev eslint-config-prettier
.eslintrc.jsonに下記の記述を追加
{"extends":["prettier"]}公式ドキュメントによると、これによって無効になるルールが幾つかあるけど、
Prettierと矛盾する特定のオプションでそれらを使用しない限りはこちらのドキュメントを参考にそれらを戻すことができるそう。
ココらへんの細かいことについては、ちょっと実際に使ってみないとよくわからないので、後日機会見つけて試してみようと思います。
2つを有効にする
eslint-plugin-prettierは、eslint-plugin-prettierとeslint-config-prettierの両方を有効にする「推奨」設定を公開しているようです。
下記の記述を.eslint.jsonに記述します。
{"extends":["plugin:prettier/recommended"]}自身の場合は最終的に.eslint.jsがこんな感じになりました。
(先程のソースに上記設定を追加したもの)
"extends": [
"eslint:recommended",
- "plugin:vue/recommended"
+ "plugin:vue/recommended",
+ "plugin:prettier/recommended"
],
"parserOptions": {
"sourceType": "module"
},
- "plugins": ["prettier"],
"rules": {
"indent": [
"error",
こちらの設定を使うときは上記2つのプラグインが入っている必要があるので、最初から2つを有効にするのなら下記のコマンドでインストールすればOKです。
yarn add --dev eslint-plugin-prettier eslint-config-prettier
precommitフック
precommitフックを利用すると、prettierを実行して整形したものだけをコミットすることができるようです。
公式ページのPrettier - Pre-commit Hookを見てみると、何種類かの方法を提案してくれていますが、今回は一番上のlint-staged、huskyを使う方法を最小構成で試してみようと思います。
まずは必要なパッケージのインストール
yarn add prettier lint-staged husky --devpackage.jsonにscriptsとlint-stagedを追加するので、package.jsonは下記のようになります。
{"scripts":{"precommit":"lint-staged"},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"devDependencies":{"husky":"^0.14.3","lint-staged":"^7.0.4","prettier":"^1.11.1"}}実際にサンプルコード書いて試してみます。
constsample=()=>{return'hello prettier'}console.log(sample())このような、なんの面白みもないサンプルコードを書いて、git add sample.jsとした後、yarn run precommitすると、addされたファイルに対してのみprettierを通してくれます。
あとは整形されたコードをcommitすればOKです。
constsample=()=>{return"hello prettier";};console.log(sample());↑が整形後のコード。
ただ、こちらの方の記事を見てみると(prettierの使い方 - precommitフックを使う)、commit時に勝手に整形してくれているようですね。。。
Prettierの公式ドキュメント(Pre-commit Hook)を読んでみると、use caseのところに
Prettierの上にESLintなど、他のツールと共に使用する必要がある時などに便利です
と書かれているので、ここらへんは他のツールと連携ありきで使うものなのかもしれません。
(ここらへんの理解はまだ浅いので、もしかしたら解釈がおかしいかもしれませんが)
試しに参照させていただいた方の記事を参考に、eslintを組み合わせたやり方で実行してみたところ、コミット時に自動的に整形がされました。
エディターとの連携(Vim編)
私はVimユーザなので、Vimとの連携を試してみます。
sbdchd/neoformat, w0rp/ale, prettier/vim-prettierなど、複数種類があるようですが、私はsbdchd/neoformatを使った方法で設定します。
私の現在のメインVim環境がNeoVim&dein.vimなのでplugin.tomlに下記のように記載します。
[[plugins]]repo='sbdchd/neoformat'プロジェクト内でprettierがインストールされているケースでのみ使用したいと考えているので、下記のような記述をinit.vimに記述します。。。
が、これ、めちゃくちゃスマートじゃないね💦
一応、下記を参考にしながら書いてみていますが、自身の未熟さを呪う、そんな春の昼下がり🌸
sbdchd/neoformat - Config [Optional]
"----------------------------------------------------" JavaScript - Prettier"----------------------------------------------------letg:neoformat_javascript_prettier={ \'exe': getcwd().'/node_modules/.bin/prettier', \'args':['--stdin','--no-semi','--single-quote'], \'stdin':1, \}可能であれば、プロジェクト単位で設定しているprettierを反映させた形でformatしたいのだけど、パッと良い考えが浮かんでいないので、一旦はこちらで。
良い案浮かんだら更新します。
(これだとプロジェクトルート and prettierがプロジェクトにインストールされていないと動きません😱)
エディターとの連携(Atom編) : TODO
Atomも使うことがあるので、こちらも後日設定を行っていきたい。