现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但是很多时候我们看到的代码都是乱七八糟的。作为前端工程师，单引号和双引号是乱用的。第一段没有分号，有的地方有逗号有的地方没有逗号，空格和回车没有对齐。他还表示，他工作认真。这不是一个玩笑。今天就从头说起，全面讲述一个重度代码洁癖患者如何使用vscode开发Vue，以及如何将一个各种格式错误数万个、已经可以判死刑的项目，变成一个标准的美女。从安装开始，为了准确起见，我们禁用了vscode中的所有插件，并清除了用户设置，尽可能恢复到原来的样子：作为代码洁癖患者，对系统版本的要求一定是要求最高的，不管什么时候，让我们把所有能升级到***版本的系统都升级一下：npminstall-g@vue/cli然后，我们开始创建项目：vuecreatehello-world在这里，一定要选择***项：babel+eslint，这两个必不可少。看到有人觉得eslint麻烦，建好项目就手动关掉eslint，无语了。安装完成：我们不急于执行它。执行代码是最简单的事情。我们打开代码看看：嗯，至少我们需要先安装vetur插件。这几乎可以肯定是开发vue项目的标准配置。就算我不说，vscode也会强烈推荐你安装。安装好vetur之后，看起来有点人性化。接下来试试能不能自动格式化，这部分最适合洁癖患者了。随便加几个空格，然后保存试试：不能格式化，连提示都没有！用lint格式化就算vscode里的vetur不能帮我们自动格式化，幸好package.json命令里有lint命令，我们看看lint命令能不能帮我们自动格式化：lint居然说没有错误！明明是空格多了就报错多了，为什么呢？这是因为默认的vue-cli没有帮我们安装@vue/prettier插件，我们手动安装：yarnadd-D@vue/eslint-config-prettier然后添加到package.json或者.eslintrc.js或者无论你在哪里设置eslint:"extends":["plugin:vue/essential","eslint:recommended","@vue/prettier"]，尤其是***这个@vue/prettier，非常重要。然后再次运行yarnlint。多余的空格被自动去掉了，但是我们发现有些地方同时被篡改了：所有的单引号都改成了双引号，在行尾没有分号的时候加了分号。为什么是这样？因为我们虽然介绍了prettier，但是我们还没有设置prettier。我们在项目的根目录下创建一个.prettierrc.js文件，然后添加：module.exports={semi:false,singleQuote:true}再次执行yarnlint，现在我们看到lint开始工作了。它不仅可以删除我们插入的多余空格，还可以按照规则把双引号变成单引号，删除行尾多余的分号。当然，是否在行尾加分号是哲学上的***，大家可以根据个人喜好自行决定。这里，我们只是按照vue-cli的标准配置。这一步非常关键。假设你拿到一个已经不错的vue项目了。里面有几千个.vue文件，几万个各种格式错误，你可以用yarnlint命令全部改正。过来！vscode中的格式化还没有结束。我们注意到，虽然yarnlint命令可以在写完代码后帮我们格式化代码，但是既然我们是用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项目，其他类型的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来组合几个工具。只有用好，才能真正达到随时看到自己的错误，保存并自动修改，更正过去错误的目的。希望每一位前端工程师写出的代码都像一个人写出来的一样漂亮、简洁、干净。
