用vscode开发vue应用(2)

注意：这里一定要设置到项目的设置里，而不要只是设置到你自己个人的设置里，否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个.vscode文件夹，而vue最讨厌的地方是它居然会把这个文件夹放到.gitignore里，这个错误你必须要纠正过来，也就是说从.gitignore文件里把.vscode删掉。切切。

在你项目的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打架了。

小结

以上就是用vscode开发vue程序的标配，并不像网上有些文章说的那么简单，不是只需要配一个eslint就能解决的事情，这里还用到了vetur，eslint和prettier，把几个工具综合用好，才能真正达到我们的错误随时可见，保存自动修改，更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手，漂亮简洁干净。

（编辑：ASP站长网）