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

这一行命令把它们全部修正过来！

在vscode里格式化

事情还没有完，我们注意到虽然

yarn lint

命令能在编写完代码之后帮我们格式化，但是既然我们是用

vscode

进行开发，我们当然希望能在

vscode

里直接看到对于错误的标注。

这时候我们需要在

vscode

里再安装一个插件eslint。

你以为安装上

eslint

插件就行了吗？不行的。因为

eslint

并不知道我们的

.vue

文件里面包含了

js

语法，所以还需要打开我们的

vscode

设置文件。

注意：这里一定要设置到项目的设置里，而不要只是设置到你自己个人的设置里，否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个

.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

项目，可能还有其它类型的