VSCode中Prettier与ESLint协同需:一、安装二者扩展并禁用其他格式化工具,启用format on save;二、安装eslint-config-prettier并在.eslintrc.js的extends末尾添加'prettier';三、创建.prettierrc并设"editor.defaultFormatter"为Prettier;四、开启eslint.autoFixOnSave但避免格式类规则冲突;五、配置.editorconfig统一基础编辑行为。

如果您在VSCode中同时使用Prettier与ESLint,但发现代码保存后格式化行为不一致、规则冲突或未自动执行,则可能是由于插件配置未协同、优先级未明确或扩展设置缺失。以下是实现二者协同工作的具体配置步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装必要扩展并禁用冲突格式化工具
确保VSCode仅依赖Prettier与ESLint进行格式化,避免其他格式化插件(如JavaScript Standard Style、Beautify)干扰其执行顺序和结果。
1、打开VSCode扩展市场,搜索并安装Prettier与ESLint官方扩展。
2、在扩展列表中查找已启用的其他代码格式化类插件,逐个点击右键选择禁用。
3、进入设置(Cmd+,),搜索format on save,确认已勾选Editor: Format On Save。
二、配置ESLint以识别Prettier规则
通过eslint-config-prettier关闭ESLint中与Prettier重叠的样式类规则,防止二者报错冲突或重复修正。
1、在项目根目录执行命令:npm install eslint-config-prettier --save-dev。
2、打开项目中的.eslintrc.js文件,在extends数组末尾添加'prettier'。
3、确认该配置项位于所有可能启用样式规则的配置之后,例如:['eslint:recommended', 'plugin:react/recommended', 'prettier']。
三、设置Prettier为默认格式化工具
强制VSCode在保存时调用Prettier执行格式化,并将ESLint保留为仅校验逻辑错误与潜在问题的工具。
1、在项目根目录创建.prettierrc文件,写入基础配置如:{"semi": true, "singleQuote": true, "tabWidth": 2}。
启科网络商城系统由启科网络技术开发团队完全自主开发,使用国内最流行高效的PHP程序语言,并用小巧的MySql作为数据库服务器,并且使用Smarty引擎来分离网站程序与前端设计代码,让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。
2、在VSCode工作区设置settings.json中添加:"editor.defaultFormatter": "esbenp.prettier-vscode"。
3、同时设置:"editor.formatOnSave": true与"editor.formatOnSaveMode": "file"。
四、启用ESLint自动修复且不覆盖Prettier格式
让ESLint在保存时仅修复其职责范围内的问题(如变量未使用、函数定义错误),而不触碰缩进、引号、分号等由Prettier接管的格式项。
1、在settings.json中添加:"eslint.autoFixOnSave": true。
2、添加配置项:"eslint.validate": ["javascript", "typescript", "vue"](按实际语言调整)。
3、在.eslintrc.js中确保rules内未启用任何与eslint-config-prettier禁用项重复的格式类规则,例如'no-unused-vars'可保留,而'quotes'应被禁用。
五、使用.editorconfig统一基础编辑器行为
作为Prettier与ESLint之外的补充层,.editorconfig可提前约束换行符、缩进风格等底层编辑器行为,减少格式化前的原始差异。
1、在项目根目录创建.editorconfig文件。
2、写入以下内容:root = true\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true。
3、确认VSCode已安装EditorConfig for VS Code扩展并启用。









