構築されており、基本的にVSCode上で編集しています。このようなコードの可読性やらなんやらを良い状態で保つために各言語にlinter+formatterが存在する(ことが多い)んですが、JavaScriptのそれがやたら入り組んでいたり落とし穴に引っ掛かったりしたのでそれをまとめておきます。結果だけ知りたい方はこちら。HTMLコンテンツのいずれかであると言っていいと思います。このうち*.jsと*.vueの文法チェック+フォーマットができる状態にまでもっていくのを目標とします。VSCodeで保存時に自動的にフォーマットできるように設定もします。フォーマットに関するごく基本的な設定だけしておきます。インストールJSのlinter+formatterの記事は少し調べればわかるように既に市井にあふれています。その中で比較的使っている人が多そうなESLint+Prettierを基準にやっていきます。これはJSのlinterであるESLintのプラグインとしてJSのフォーマッターであるPrettierを登録し、ESLint経由でフォーマットを行う設定となります。eslint-config-prettiervueファイルも扱いたいのでそのプラグインもいれます。eslint-plugin-vue必要なものはこれだけです。基本設定ここまで済んだら.eslintrcを作りましょう。jsとしても書けますが凝ったものは必要なさそうなのでjsonで大丈夫です。}}これで基本的な設定まで終わりました。概観する分には楽ですね。.とかすればそれぞれの拡張子を持つファイルをフォーマットしてくれるはずですが、何故だか上手くいきません。ここで最初に引っかかりました。pattern.いや普通にファイルたくさんあるけど。こちらの原因はESLintそのものの仕様にあります。簡潔に言うとdotfilesはデフォルトで無視されるっぽくしかもundocumentedらしい。GitHubVuePressで使えない!って報告している人もいたみたい。仕方がないので.eslintignoreにホワイトリストを書くことでチェックできるようにしました。.eslintignore!.vuepressこれでコマンドラインでちゃんと動くようになった。連携するための拡張機能があるため、基本的にはそれに乗っかるようにすればうまくいきます。ファイル保存時にESLintが有効なファイルをフォーマットするためには.vscode/settings.jsonに以下の設定を足せば十分。これも調べるとすぐ出てくる設定です。vueファイルESLintの機能をvueファイルにも適用するためにeslint.validateにvueに関する設定を追加します。いう拡張機能が必要です。この拡張機能はこの拡張機能でPrettierと連携してフォーマットする機能があるので、それを無効にしてあげる必要があります。経由してStylusをフォーマット可能Veturのフォーマット機能はvueファイルそのもののフォーマットは行わないESLint+Prettierはvueファイルそのもののフォーマットも行うという点です。VuePressはStylusを主に使用しているためフォーマットできるようにしておくのが無難でしょう(というか自分がStylusしかわからない)。ファイルそのもののフォーマットとは何かというと、例えば以下の自明なvueファイルを考えます。<div></div></template><script></script><style></style>この内容に対しVSCode上でVeturによるフォーマットをかけても内容が変化しないのに対し、Eslint+Prettierによるフォーマットを行うと以下のように改行の数が調整されます。<style>の配置を含めてフォーマットするのに対し、Veturはこれらのタグの中身のみをフォーマットするということが分かります。以上を踏まえると、Stylusを使いつつなるべく良い出力にするためにはESLint+PrettierとVetur、両方のフォーマット機能を有効にしつつ衝突しないように設定する必要があります。lang="stylus">のフォーマットが走ることになりますが、これまでの構成によりこれら2処理は互いに競合せず、またフォーマットに関する警告・エラーも吐きません。scriptとして用意しておくと何かと楽できます。}}ところで.eslintrcのrulesでprettier/prettierを1(warning)に設定したのはエディタで編集中に文法的に正しいものにエラー出すのはおかしくね?という個人的な意見によるものなのですが、完成品を文法チェックする際にはwarningでなくerrorにしたい気がします。いう時には--ruleオプションでルールを上書きすることができます。以下に示すような設定になりました。別の設定も足してるけど。.editorconfig.eslintrc.eslintignore.vscode/settings.json.vscode/extensions.jsonCIの文法チェックも今のところ普通に通っているので多分問題なさそう。まとめこの言語面倒すぎない?Rustのrustfmt+rlsが神々しく見えてくる。2019-08-06T20:20:57+09:00。