文章目录一、先做基础4步排查80%问题直接解决1. 打开设置开启保存格式化2. 写入最终版 settings.json 配置复制直接用3. 检查必备插件是否安装并启用4. 项目本地安装依赖关键只装插件不够二、解决「部分代码格式化、部分不动」核心原因ESLint与Prettier规则打架1. 修改项目根目录 .eslintrc.js2. 新建 .prettierrc 统一格式化规则避免局部规则不生效三、其他高频疑难场景修复场景1Vue文件template不格式化场景2代码有语法报错导致格式化直接中断最容易忽略场景3工作区配置覆盖用户配置场景4插件损坏/缓存异常场景5WSL/远程SSH项目失效场景6Python/Go等其他语言不格式化四、终极一键自检步骤按顺序执行一、先做基础4步排查80%问题直接解决1. 打开设置开启保存格式化快捷键Ctrl,打开设置搜索Format On Save✅ 勾选Default Formatter下拉选择Prettier - Code formatter前端通用2. 写入最终版 settings.json 配置复制直接用CtrlShiftP→ 输入Preferences: Open Settings (JSON)粘贴{// 开启保存自动格式化editor.formatOnSave:true,// 每次保存格式化整个文件解决局部只改片段不格式化editor.formatOnSaveMode:file,// 全局默认格式化器统一为Prettiereditor.defaultFormatter:esbenp.prettier-vscode,// 单独绑定各文件类型格式化器避免语言调用内置工具[javascript]:{editor.defaultFormatter:esbenp.prettier-vscode},[typescript]:{editor.defaultFormatter:esbenp.prettier-vscode},[vue]:{editor.defaultFormatter:esbenp.prettier-vscode},[json]:{editor.defaultFormatter:esbenp.prettier-vscode},[html]:{editor.defaultFormatter:esbenp.prettier-vscode},[css]:{editor.defaultFormatter:esbenp.prettier-vscode},// ESLint保存自动修复只修语法错误不抢格式化editor.codeActionsOnSave:{source.fixAll.eslint:true},// 禁用ESLint自带格式化防止和Prettier冲突导致部分代码不格式化eslint.format.enable:false,// 粘贴也格式化可选editor.formatOnPaste:true}3. 检查必备插件是否安装并启用必须安装Prettier - Code formatterESLint冲突插件直接禁用/卸载Beautify、JS-CSS-HTML Formatter、VeturVue3改用Volar4. 项目本地安装依赖关键只装插件不够打开项目终端执行npmi-Dprettier eslint-config-prettier eslint-plugin-prettier二、解决「部分代码格式化、部分不动」核心原因ESLint与Prettier规则打架1. 修改项目根目录.eslintrc.jsmodule.exports{env:{browser:true,es2021:true,node:true},extends:[eslint:recommended,plugin:vue/vue3-recommended,// 放在最后关闭所有和Prettier冲突的格式规则prettier],plugins:[prettier],rules:{// 关闭ESLint引号、分号、逗号等格式校验全权交给Prettierquotes:off,semi:off,comma-dangle:off,space-before-function-paren:off,prettier/prettier:warn}};2. 新建.prettierrc统一格式化规则避免局部规则不生效{semi:true,singleQuote:true,tabWidth:2,trailingComma:es5,printWidth:100}三、其他高频疑难场景修复场景1Vue文件template不格式化卸载Vetur安装Vue Language Features (Volar)设置中开启vue.format.enable: true确保vue文件绑定默认格式化器为Prettier场景2代码有语法报错导致格式化直接中断最容易忽略文件存在ESLint红波浪语法错误 → Prettier直接终止格式化表现为后半段代码不排版解决先修复所有语法错误再保存。场景3工作区配置覆盖用户配置左下角设置 → 切换到用户设置和工作区设置删除工作区重复冲突的formatOnSave配置。场景4插件损坏/缓存异常命令行重启VSCodecode --disable-extensions安全模式测试测试正常则逐个启用插件定位冲突插件彻底解决卸载Prettier、ESLint重装重启VSCode场景5WSL/远程SSH项目失效远程服务器重新安装VS Server项目内必须本地安装prettier依赖不能只靠编辑器插件。场景6Python/Go等其他语言不格式化Python安装Black Formatter指定[python]默认格式化器为blackGo安装Go官方插件开启go.formatOnSave: true四、终极一键自检步骤按顺序执行粘贴完整settings.json配置项目安装prettier、eslint-config-prettier配置.eslintrc和.prettierrc删除冲突格式化插件修复文件内所有语法错误重启VSCodeCtrlS测试保存格式化
文章目录一、先做基础4步排查80%问题直接解决1. 打开设置开启保存格式化2. 写入最终版 settings.json 配置复制直接用3. 检查必备插件是否安装并启用4. 项目本地安装依赖关键只装插件不够二、解决「部分代码格式化、部分不动」核心原因ESLint与Prettier规则打架1. 修改项目根目录 .eslintrc.js2. 新建 .prettierrc 统一格式化规则避免局部规则不生效三、其他高频疑难场景修复场景1Vue文件template不格式化场景2代码有语法报错导致格式化直接中断最容易忽略场景3工作区配置覆盖用户配置场景4插件损坏/缓存异常场景5WSL/远程SSH项目失效场景6Python/Go等其他语言不格式化四、终极一键自检步骤按顺序执行一、先做基础4步排查80%问题直接解决1. 打开设置开启保存格式化快捷键Ctrl,打开设置搜索Format On Save✅ 勾选Default Formatter下拉选择Prettier - Code formatter前端通用2. 写入最终版 settings.json 配置复制直接用CtrlShiftP→ 输入Preferences: Open Settings (JSON)粘贴{// 开启保存自动格式化editor.formatOnSave:true,// 每次保存格式化整个文件解决局部只改片段不格式化editor.formatOnSaveMode:file,// 全局默认格式化器统一为Prettiereditor.defaultFormatter:esbenp.prettier-vscode,// 单独绑定各文件类型格式化器避免语言调用内置工具[javascript]:{editor.defaultFormatter:esbenp.prettier-vscode},[typescript]:{editor.defaultFormatter:esbenp.prettier-vscode},[vue]:{editor.defaultFormatter:esbenp.prettier-vscode},[json]:{editor.defaultFormatter:esbenp.prettier-vscode},[html]:{editor.defaultFormatter:esbenp.prettier-vscode},[css]:{editor.defaultFormatter:esbenp.prettier-vscode},// ESLint保存自动修复只修语法错误不抢格式化editor.codeActionsOnSave:{source.fixAll.eslint:true},// 禁用ESLint自带格式化防止和Prettier冲突导致部分代码不格式化eslint.format.enable:false,// 粘贴也格式化可选editor.formatOnPaste:true}3. 检查必备插件是否安装并启用必须安装Prettier - Code formatterESLint冲突插件直接禁用/卸载Beautify、JS-CSS-HTML Formatter、VeturVue3改用Volar4. 项目本地安装依赖关键只装插件不够打开项目终端执行npmi-Dprettier eslint-config-prettier eslint-plugin-prettier二、解决「部分代码格式化、部分不动」核心原因ESLint与Prettier规则打架1. 修改项目根目录.eslintrc.jsmodule.exports{env:{browser:true,es2021:true,node:true},extends:[eslint:recommended,plugin:vue/vue3-recommended,// 放在最后关闭所有和Prettier冲突的格式规则prettier],plugins:[prettier],rules:{// 关闭ESLint引号、分号、逗号等格式校验全权交给Prettierquotes:off,semi:off,comma-dangle:off,space-before-function-paren:off,prettier/prettier:warn}};2. 新建.prettierrc统一格式化规则避免局部规则不生效{semi:true,singleQuote:true,tabWidth:2,trailingComma:es5,printWidth:100}三、其他高频疑难场景修复场景1Vue文件template不格式化卸载Vetur安装Vue Language Features (Volar)设置中开启vue.format.enable: true确保vue文件绑定默认格式化器为Prettier场景2代码有语法报错导致格式化直接中断最容易忽略文件存在ESLint红波浪语法错误 → Prettier直接终止格式化表现为后半段代码不排版解决先修复所有语法错误再保存。场景3工作区配置覆盖用户配置左下角设置 → 切换到用户设置和工作区设置删除工作区重复冲突的formatOnSave配置。场景4插件损坏/缓存异常命令行重启VSCodecode --disable-extensions安全模式测试测试正常则逐个启用插件定位冲突插件彻底解决卸载Prettier、ESLint重装重启VSCode场景5WSL/远程SSH项目失效远程服务器重新安装VS Server项目内必须本地安装prettier依赖不能只靠编辑器插件。场景6Python/Go等其他语言不格式化Python安装Black Formatter指定[python]默认格式化器为blackGo安装Go官方插件开启go.formatOnSave: true四、终极一键自检步骤按顺序执行粘贴完整settings.json配置项目安装prettier、eslint-config-prettier配置.eslintrc和.prettierrc删除冲突格式化插件修复文件内所有语法错误重启VSCodeCtrlS测试保存格式化
