迫于龟毛，写 vue 单文件组件的时候，你们都习惯怎么放<template><script>和<style>的顺序？

[shintendo]

官方的 style guide 推荐 template、script、style 或者 script、template、style，并且强调 style 放最后（因为是可选的）。

我从来没试过把 script 写最上面，因为这块通常是最长的，放头上怎么想都觉得很奇怪。

我自己用过 template、style、script 和 template、script、style 这两种写法，都用了相当长时间，我觉得 template 放第一位最大的好处在于，打开一个文件的时候，看 template 更能一目了然地知道它是什么组件。但是不爽的地方在于，如果我把 script 放中间，那么写样式的时候就要上下滚动很长的距离（写样式需要在 style 和 template 之间来回看）；反之如果把 style 放中间，写 script 又不方便了。

我现在的写法是 style、template、script，因为写 style 和写 script 的时候经常都需要对照 template，这样把 template 夹在中间让两者都很方便，而 style 和 script 通常互不影响，离得远也没事。但是坏处是，首先看上去比较别扭（不过习惯了也还好，而且我后来一想，这不就是传统 html 里的书写顺序吗，head 里放样式，body 里放内容，body 底部放脚本，这么一想，还越看越顺眼了）。还有一个问题是打开一个文件，首先看到的是 CSS，无法一目了然地看出这是个什么组件。而且我翻遍了相关讨论，也没见过一个像我这么写的。

不知道各位大佬的习惯是怎么样。

[phpcxy]

用 IDE，随便啦~

[imherer]

template、style、script
因为一般 style 都比较短，基本上小于另外两者

[shuirong1997]

template、script、style （至于楼主提到对照的事儿，我一般通过再开一个 Tab 解决）

[Lxxyx]

style, templates, script，好处在于 template 会引用到 style 和 script 的代码，这样可以鼠标少滚动一点点

[V2exUser]

vscode，左侧列表有大纲，点击直达。如果没有，升级版本