VsCode 打开多个标签 文件自动保存 代码自动换行 新建Vue模板

859 阅读1分钟

最近在使用VsCode时每打开一个文件,都会替换前面一个文件标签,而不会打开新的标签页,导致切换文件时很不方便。

打开多个标签,效果如图

  • 打开设置

  • 打开配置文件

  • 在最外的括号添加配置:"workbench.editor.enablePreview": false,
  • 注意:在前面一句最后要加一个逗号,不然会报错,下次就不能正确添加配置


VsCode默认是不会自动保存的,可以设置自动保存文件,实时更新

代码更新后,文件自动保存

  • 如图将“off”换为“afterDelay”即可


有时一行代码较长,屏幕宽度不足以整行显示,需要拖动才能看到后面的内容,很不方便代码的阅读。可以设置代码自动换行

显示宽度不够时,设置代码自动换行

  • 将常用设置中“Word Wrap”设置为“on”即可


VsCode不会像Webstore一样当新建Vue文件时,会默认生成一个模板。这时我们可以自己设置一个模板,当新建一个vue文件时,输入“Vue” + Tab 即可自动生成设置的模板

新建Vue模板

  • 设置 -> 用户代码片吨,输入vue,选择vue.json,在打开的vue.json文件中输入自定义的模板

  • 下面是我常用的模板
{
    "Print to console": {
            "prefix": "vue",
            "body": [
                    "<template>",
                    "    <div class='$1'>",
                    "        ",
                    "    </div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "    name: '$1',",
                    "    data() {",
                    "        return {",
                    "        ",
                    "        }",
                    "    },",
                    "    components: {},",
                    "    methods: {}",
                    "}",
                    "</script>",
                    "",
                    "<style scoped>",
                    "",
                    "</style>",
                    ""
            ],
            "description": "Log output to console"
    }
}