.prettierrc 典型配置（通用版）

文章目录一、完整版标准配置推荐二、极简版配置新手够用三、常用配置项说明一看就懂四、配套使用必看五、总结.prettierrc 典型配置通用版是前端项目Vue/React/TS/JS/HTML/CSS最常用、最规范的 Prettier 配置直接复制到项目根目录的.prettierrc文件即可使用。一、完整版标准配置推荐{printWidth:100,// 一行最大字符数超过自动换行tabWidth:2,// 缩进空格数前端通用 2 格useTabs:false,// 不使用 Tab 缩进用空格semi:true,// 代码末尾保留分号singleQuote:true,// 使用单引号代替双引号quoteProps:as-needed,// 对象属性仅必要时加引号jsxSingleQuote:false,// JSX 中使用双引号React 规范trailingComma:es5,// 数组/对象最后一项保留尾逗号ES5 兼容bracketSpacing:true,// 对象字面量两侧加空格 { name: xxx }bracketSameLine:false,// HTML/JSX 标签的 单独一行arrowParens:always,// 箭头函数参数始终加括号 (x) xendOfLine:lf,// 换行符统一为 LFLinux/Mac 格式htmlWhitespaceSensitivity:cssless,// HTML 空格敏感度embeddedLanguageFormatting:auto// 自动格式化内嵌代码}二、极简版配置新手够用{printWidth:100,tabWidth:2,semi:true,singleQuote:true,trailingComma:es5,arrowParens:always,endOfLine:lf}三、常用配置项说明一看就懂配置项作用推荐值printWidth代码一行最长长度100tabWidth缩进空格数2semi末尾是否加分号truesingleQuote是否用单引号truetrailingComma数组/对象最后一项加尾逗号es5arrowParens箭头函数参数加括号alwaysendOfLine统一换行符解决跨平台冲突lf四、配套使用必看安装 Prettiernpminstallprettier --save-dev# 或 yarn add prettier -D忽略文件新建 .prettierignore/dist /node_modules .git .envpackage.json 加格式化命令scripts:{format:prettier --write .}运行npm run format一键格式化整个项目。五、总结直接用完整版标准配置适配绝大多数前端项目搭配.prettierignore忽略不需要格式化的文件执行命令一键统一代码风格避免团队格式冲突。