Vue の SFC で template, script, style のタグの順番を変えてもいい？

Vue を SFC で書いていると基本的に template, script, style の順に上から書いていくのだけど、ふと「UI と style、UI と script は密接に関わっているけど、style と script が関わることはほぼないから順番変えたほうが見やすい気がする」みたいなことを思った。

UI でどのスタイルを当てるか忘れてしまい、巨大な script タグを通って最下の style タグまでたどり着き、目当てのセレクタを探して、戻って、みたいなのを繰り返して「だるい」となってしまった。

React だと、コンポーネントの関数内にロジックがあり、最後の return で jsx で定義された UI を返すという形なので、そっちのほうが分かりやすいなという気持ちもあった(style に関してはライブラリによるけど)

まあ同じファイルを左右に 2 つ開けば解決するにはするんですけど。

で、template も script も style も、順番は決められていなさそうだし変えていいのかな？と思っていたら、会社のエンジニアの人が Evan さんのツイートを教えてくれた。

I've been moving to <script> first in SFCs myself especially with <script setup>. This tool seems to help you automate that switch :) https://t.co/iSvztldgGj

— Evan You (@youyuxi) August 18, 2021

@KawamataRyo さんの script と template の順番を並び替える CLI コマンドを作って公開したツイートを、「script の順番を変えるのによさそうなツールだよ！」みたいな感じで引用 RT してて、Evan さんが RT してるのであれば大丈夫っぽいな〜と思った。

あと@KawamataRyo さんの考えが僕とまったく一緒だった。やっぱり script が最初にあるほうが分かりやすいし読みやすい気がするな。