TL；DR配合eslint和prettier可以优化代码质量和跨IDE协同安装插件和npm包使用eslint和prettier准备配置文件.eslintrc.js和.prettierrc.js（可以借助工具生成或者手写)为了提高效率，开启IDE的保存和自动格式化功能，使用npm更方便的管理eslint和prettier。在配置场景之前，我解释了eslint和prettier的区别。VScode与jetbrainsIDE的协作。jetbrains输入html标签名后，如果后面有属性，换行符会自动对齐标签名的长度，但如果属性后面没有换行符，则会定位到正常缩进位置。如图，第一种情况是el-select，第二种情况是el-option。即使你用IDE格式化，还是会按照这个“设置”来格式化。但是，在vscode中没有办法配置这个缩进。要实现两种IDE和所有开发者的格式统一，自然而然会想到eslint和prettier，这也是前端项目中非常常用的代码管理工具。.这里有个小问题，是eslint不够用吗？在某些情况下，这确实是不够的。eslint虽然也可以管理代码格式，但毕竟是ESlint。。。他不关心vue文件中模板部分的缩进，所以如果要求是vsc和jb配合，只有eslint不是够了，模板部分依赖更漂亮的统一。如果用vsc，短时间没什么大问题，但是随着vsc版本的升级，格式化算法可能会被修改，所以加个prettier还是靠谱的。安装插件vscode插件页面，找到这两个：Prettier-CodeformatterESLintwebstormwebstormeslint自带，prettier可以在settings-plugins中搜索安装（ws好像默认安装了prettier）。https://www.jetbrains.com/hel...https://www.jetbrains.com/hel...安装核心程序IDE插件不包含两个格式化程序的核心算法，只提供与IDE通信的桥梁，它们的运行依赖于node_modules目录下的程序，所以需要安装npm包。npminstall--save-deveslinteslint-plugin-vueprettier其中eslint-plugin-vue是Vue专用的lint规则，它也有对应的react。并且还需要在两个IDE中都安装相应的插件。您可以在设置中设置更漂亮的路径：初始化配置eslintESLint执行传统的linting（寻找有问题的模式）和样式检查（约定的执行）。您可以将ESLint用于所有事情，或者您可以结合使用Prettier来格式化代码和使用ESLint来捕获可能的错误。npxeslint--init初始化建议选择检查语法、发现问题和强制代码风格。输出格式当然是js，由eslint自己管理，可以根据程序自定义输出结果。module.exports={env:{browser:true,es2021:true,node:true,},extends:['eslint:recommended','plugin:vue/essential'],parserOptions:{ecmaVersion:13,sourceType:'module',},plugins:['vue'],rules:{indent:['error',2],'linebreak-style':['error','windows'],引号:['error','single'],semi:['error','never'],},}看似配置很少，但都浓缩在extends中的默认规则集中。prettier官网自带的playground可以帮你生成json文件。搞定后直接新建一个js文件，module.exports=output。您可以看到所有可选配置的详细说明。这里https://prettier.io/docs/en/o...module.exports={arrowParens:'always',bracketSameLine:true,bracketSpacing:true,embeddedLanguageFormatting:'auto',htmlWhitespaceSensitivity:'css',insertPragma:false,jsxSingleQuote:false,printWidth:80,proseWrap:'preserve',quoteProps:'as-needed',requirePragma:false,semi:false,singleQuote:true,tabWidth:2,trailingComma:'es5',useTabs:false,vueIndentScriptAndStyle:false,}其他问题prettier和eslint的冲突有时候prettier和eslint的规则会冲突。Prettier官网上有相关的topic来描述这个问题，但是我个人认为不需要额外添加兼容软件，因为prettier的配置很少。手动兼容并不困难，添加这些工具可能会增加维护负担。比如格式化switch时默认生成的eslint规则和prettier规则不同，但是prettier规则不够细化，无法控制switch的缩进，所以需要更改eslint以适应prettier:indent：[2,2,{SwitchCase:1}]，自动格式化的快捷键虽然很方便，但是没有ctrlS那么直接。webstorm可以在settings中搜索保存时的行为，勾选eslint和prettier。vscode可以直接写这个配置（默认格式化工具使用prettier）：{"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"editor.formatOnSave":true}提交项目检查时不使用代码格式化工具，后面接的项目不需要马上打开提交检查，可以用于增量修改。husky可以帮助我们运行一些脚本来检查代码质量或者在提交前进行代码测试。安装过程大概是在npxhusky-init初始化后安装husky依赖，在package.json文件中加入lint命令。{“脚本”：{“lint”：“节点./node_modules/eslint/bin/eslint.js--ext.vue，.jssrc”，“修复”：“节点./node_modules/eslint/bin/eslint。js--ext.vue,.jssrc--fix","prepare":"huskyinstall"}}然后在.husky文件夹下的pre-commit文件中添加npmrunlint运行eslint再提交，代码不能提交失败。配置共享一般来说，一个团队可以为所有项目共享一套配置。您可以跳过生成配置的步骤，直接复制配置文件并共享。通过npm管理配置文件更方便，如下（eslint同理）：module.exports={...require('@company/prettier-config'),semi:false,}探究其工作原理ESLint
