用vscode开发vue应用的方法步骤

在你项目的settings.json里文件里添加以下代码：

{
 "eslint.autoFixOnSave": true,
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
 "language": "vue",
 "autoFix": true
 }
 ],
}

这时候所有错误都被标注出来了，注意看左侧，一定要让这个settings.json文件是绿色的，而不能是灰色的，如果是灰色的，请检查你的.gitignore文件：

因为我们在settings.json文件里设置了autoFixOnSave，所以不管多么乱的格式，只要一按Ctrl+S保存，自动就帮我们把代码格式整理好了，是不是很方便呢？

和Prettier的冲突

有些时候我们的vscode里插件装的比较多，譬如还安装了prettier插件，因为我们不只开发vue项目，可能还有其它类型的js项目特别是传统js项目，需要用到prettier进行美化，而prettier的一些功能是会和eslint相冲突的，比如说我们在全局设置了prettier的formatOnSave，这个功能就会和eslint的autoFixOnSave打架，为了避免这个矛盾，我们通常还会在本项目的settings.json文件里再多加几个选项，类似于这样：

 "editor.tabSize": 2,
 "editor.formatOnSave": false,
 "prettier.semi": false,
 "prettier.singleQuote": true

有了这些设置，基本上prettier就不会和eslint打架了。

小结