1. vscode中安装插件
在使用vscode编写vue代码的时候，为了让开发效率更高，我们需要安装一些插件，这些插件可以帮助我们更好地编写vue代码。具体可以通过按下快捷键 Ctrl+Shift+X 打开扩展面板，然后输入"vue"等关键词来搜索相关插件。
1.1 vetur插件
本文推荐的第一个插件是vetur。这是一款专门为vue开发者打造的插件，它提供了非常丰富的功能，例如可视化编辑、格式化等等。
安装和使用方法非常简单，只需要在扩展面板里面搜索vetur，然后点击安装即可。
1.2 ESLint插件
本文推荐的第二个插件是ESLint。这是一款非常流行的代码静态分析工具，它可以帮助我们检查代码中的语法错误、代码风格等等。
安装和使用方法也非常简单，只需要在扩展面板里面搜索ESLint，然后点击安装即可。
2. 配置vscode
2.1 配置vetur插件
在安装了vetur插件之后，我们需要对它进行一些配置才能更好地使用。具体方法如下：
打开vscode的Settings，可以按下Ctrl+,来快速打开。
在搜索框中输入vetur，然后点击搜索结果中的Vue。
在Vue选项卡中找到Default Formatter，将其更改为prettier。
这样，我们就可以使用prettier来格式化我们的vue代码了。
2.2 配置ESLint插件
在安装了ESLint插件之后，我们需要对它进行一些配置才能更好地使用。具体方法如下：
进入你的项目根目录下，执行npm install eslint --save-dev命令来安装eslint。
执行.\node_modules\.bin\eslint --init来初始化eslint。（windows下命令，mac下请自行搜索）
按照提示进行配置，完成之后会在你的项目下生成一个.eslintrc.js的文件。
打开vscode的Settings，在搜索框中输入eslint，然后点击搜索结果中的Edit in settings.json，这样就会打开settings.json文件。
在settings.json文件中添加如下设置：
"eslint.options": {
"configFile": ".eslintrc.js"
}
这样就完成了ESLint的配置。
3. vue模板代码编写规范
3.1 HTML代码
在编写HTML代码的时候，我们需要遵循一些规范，这样可以让我们的代码更加易于维护。具体可以参考下面的建议：
尽量避免使用id来选取元素，因为它会产生全局的污染。
使用class来选取元素，可以有效地避免全局污染。
对于v-model来说，尽量避免使用它直接去操作props来修改父组件的状态，因为它破坏了数据流的单向性。
正确使用v-bind和v-on，可以让我们更好地管理组件状态和事件。
3.2 CSS代码
CSS代码的规范同样也非常重要，它可以让我们的代码更加容易维护。具体可以参考下面的建议：
对于scoped和global两种样式来说，尽量避免使用!important，因为这样会使得样式失去可预测性。
尽量使用rem作为单位，这样可以使得网页更加适应不同的设备。
尽量使用Sass或者Less等预处理器，可以使得我们的代码更加简洁易读。
3.3 JavaScript代码
JavaScript代码的规范同样也非常重要，它可以让我们的代码更加易于维护。具体可以参考下面的建议：
使用let和const来声明变量，可以避免变量作用域的问题。
正确使用async和await，可以使得我们的代码更加简洁易读。
正确使用try和catch，可以使得我们的代码更加健壮。
4. 总结
本文介绍了如何在vscode中配置vetur插件和ESLint插件，并且讲述了如何编写规范的vue代码。在实际编写代码的时候，我们需要尽可能遵循这些规范，这样可以使得我们的代码更加易于维护。