那些使用vue做的网站上海今天刚刚发生的新闻
一、快速生成页面骨架
文件 > 首选项 > 配置用户代码片段
选择需要的代码片段或者创建一个新的，这里以 vue.json 举例：
下面为我配置的代码片段，仅供参考：
{"Print to console": {"prefix": "vue","body": ["<script>","export default {"," data() {"," return {}"," },"," computed: {},"," methods: {}","}","</script>","","<template>"," <div class='$1'></div>","</template>","","<style lang='scss' scoped>","","</style>",""],"description": "Log output to console"}
}
二、格式化配置
这一块有很多配置，就不一一介绍了，直接放上配置项并加上注释，自己选择需要的去配置，以下是我个人的配置习惯
settings.json
{// 编辑器配置"workbench.colorTheme": "Atom One Dark","workbench.iconTheme": "vscode-icons","editor.fontSize": 15,"editor.links": false,"editor.detectIndentation": true,"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// eslint 配置"eslint.validate": ["javascript", "javascriptreact", "vue"],// vue 格式化程序"[vue]": {"editor.defaultFormatter": "octref.vetur" // 使用 vetur 替换默认格式化},// 配置 vetur 格式化规则"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.options.tabSize": 2,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto" // html 标签自动换行（这样设置不会频繁换行）}},// js 格式化程序"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// json 格式化程序"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}三、界面美化配置
1. 取消默认链接显示下划线
这种密密麻麻的下划线，看着是不是很难受？取消这个配置，即可隐藏它。
文件 > 首选项 > 设置 ，中找到 Links 配置，取消它即可。
2. 取消标签频繁换行
明明很短的标签，一行就可以显示，但是格式化后却频频换行，看着是不是别扭，别着急，按照下面的配置，轻松搞定它。
- 安装
Vetur插件，注意版本号，有些最新的版本可能会出现莫名其妙的bug，如果遇到了，卸载后安装低版本即可，（我安装的是v0.36.1版本，未遇到 bug） - 打开设置的 json 文件，在里面进行编辑，打开方法和配置如下
"[vue]": {"editor.defaultFormatter": "octref.vetur" // 使用vetur取代vscode默认配置},"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},},