eslint根据eslint规则检查js代码，规范团队的代码编写。业界比较流行的js代码规范有airbnb和JavaScriptStandardStyle。这里主要介绍在Vue项目中使用Eslint+airbnb来规范团队代码。在项目根目录新建一个.vscode/settings.json，配置“editor.codeActionsOnSave”如下：{"source.fixAll.eslint":true//保存时修复lint}，这里的eslint规则是vue-cli生成的配置airbnb规范。//.eslintrc.jsmodule.exports={root:true,env:{node:true},extends:['plugin:vue/essential','@vue/airbnb','@vue/typescript/recommended'],parserOptions:{ecmaVersion:2020},rules:{'no-console':process.env.NODE_ENV==='production'?'警告'：'关闭'，'无调试器'：process.env.NODE_ENV==='生产'？'警告'：'关闭'}};好的，这里项目是根据预期的airbnb规范格式化的。但是这一步还没有结束，只是对script标签中的代码生效，vue模板和style无能为力。我们还需要标准化其他类型的代码。另外，当一行代码过长（超过100行）时，eslint无法自动修复，见stackoverflow，所以额外使用prettier辅助格式化。prettierprettier只是格式化和写入，并不校验文件内容。不仅支持js格式化，还支持json、css、scss、less、typescript、markdown等各种文件类型的格式化。先安装prettier插件。可以在vscode->File->Preferences->Settings中设置。如果要使用json配置，可以点击右上角打开json文件。{//格式化指定文件类型"[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"editor.formatOnSave":true,//保存时使用默认的格式化插件格式Change"prettier.tabWidth":4,//缩进字节数}然后vue文件是4个空格。PrettierOptionalConfigurationPriority经常会发现项目中多处配置了代码格式化，比如.prettierrc,.editorconfig,.vscode/settings.json和上面的全局编辑器配置，prettier插件默认配置，当它们同时存在时它们会如何表现？.prettierrc>editorconfig>.vscode/settings.json>User/settings.json>default.json如果.prettierrc和.editorconfig共存，则合并，对于相同的属性，前者会覆盖后者。只有当.prettierrc和.editorconfig不存在时，vscode的配置才会生效。反之，只要这两者之一存在，vscode的配置就不会生效（注意：prettier相关的设置不会生效）。看官方Issuestips：prettier在格式化的时候，会把日志输出到OUTPUT，此时可以看到工作的PrettierOptions。新问题查看.vscode/settings.json文件{"editor.codeActionsOnSave":{"source.fixAll.eslint":true//保存时修复lint},"editor.formatOnSave":true,//保存时使用Defaultformatting插件formatting//格式化指定文件类型"[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},}我们发现格式化占了上风，airbnb的规范被eslint自动修复后，又被prettier格式化了，导致了一些问题：单引号变成双引号Expectedalinebreakbeforethisclosingbrace.eslintobject-curly-newline'&&'shouldbeplacedatthebeginningoftheline.eslintoperator-linebreak注意：这个问题已经存在了18年，至今没有修复。所以修改prettier和自己改单引号配置的方案有2种。在规则中增加新的规则，覆盖airbnb的规则。比如逻辑运算符应该在语句之前还是之后，比如//.eslintrc.jsmodule.exports={...rules:{'operator-linebreak':'off'}}使用PrettierESLint插件（推荐）直接使用prettier按照eslint规则进行格式化安装官网vscode后，修改格式化工具，即可..."[vue]":{"editor.defaultFormatter":"rvest.vs-code-prettier-eslint"}此时设置prettier属性不生效，暂时没有更多问题。如果还是热门，建议直接改规则。.（airbnb太严格了）
