当前位置：首页 > news >正文

vscode和cursor中引入prettierrc进行格式化

news 2025/9/28 7:23:50

一、安装cdoe formatter扩展

二、安装依赖

npm install --save-dev prettier

三、配置文件

1、.vscode中配置settings.json文件

{// ==================== 自动格式化配置 ====================// 保存文件时自动格式化代码"editor.formatOnSave": true,// 粘贴代码时自动格式化"editor.formatOnPaste": true,// 输入代码时实时格式化（如输入分号、括号等触发格式化）"editor.formatOnType": true,// ==================== 默认格式化工具设置 ====================// 设置全局默认格式化工具为Prettier"editor.defaultFormatter": "esbenp.prettier-vscode",// ==================== 针对不同文件类型的格式化配置 ====================// JavaScript文件格式化配置"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化JS文件"editor.formatOnSave": true // JS文件保存时自动格式化},// TypeScript文件格式化配置"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化TS文件"editor.formatOnSave": true // TS文件保存时自动格式化},// Vue单文件组件格式化配置"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化Vue文件"editor.formatOnSave": true // Vue文件保存时自动格式化},// JSON文件格式化配置"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化JSON文件"editor.formatOnSave": true // JSON文件保存时自动格式化},// 带注释的JSON文件格式化配置（如VS Code配置文件）"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化JSONC文件"editor.formatOnSave": true // JSONC文件保存时自动格式化},// HTML文件格式化配置"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化HTML文件"editor.formatOnSave": true // HTML文件保存时自动格式化},// CSS文件格式化配置"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化CSS文件"editor.formatOnSave": true // CSS文件保存时自动格式化},// SCSS文件格式化配置"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化SCSS文件"editor.formatOnSave": true // SCSS文件保存时自动格式化},// Markdown文件格式化配置"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode", // 使用Prettier格式化Markdown文件"editor.formatOnSave": true // Markdown文件保存时自动格式化},// ==================== 自动保存配置 ====================// 自动保存模式：延迟保存（在停止输入一段时间后自动保存）"files.autoSave": "afterDelay",// 自动保存延迟时间：1000毫秒（1秒）后自动保存"files.autoSaveDelay": 1000,// ==================== 代码提示和智能感知配置 ====================// 智能建议配置"editor.quickSuggestions": {"other": true, // 在其他情况下显示建议（如变量名、函数名等）"comments": false, // 在注释中不显示建议"strings": true // 在字符串中显示建议（如路径提示）},// ==================== 括号配对和缩进配置 ====================// 启用括号对颜色化（不同层级的括号显示不同颜色）"editor.bracketPairColorization.enabled": true,// 显示活跃的括号对指导线"editor.guides.bracketPairs": "active",// 自动缩进模式：完全自动缩进（根据语法和上下文智能缩进）"editor.autoIndent": "full",// ==================== Vue特殊配置（兼容旧版Vetur扩展） ====================// Vetur扩展的HTML格式化工具设置为Prettier"vetur.format.defaultFormatter.html": "prettier",// Vetur扩展的JavaScript格式化工具设置为Prettier"vetur.format.defaultFormatter.js": "prettier",// Vetur扩展的TypeScript格式化工具设置为Prettier"vetur.format.defaultFormatter.ts": "prettier",// ==================== 保存时自动修复配置 ====================// 保存文件时自动执行的代码修复操作"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit", // 自动修复所有ESLint错误（需要安装ESLint扩展）"source.fixAll": "explicit" // 自动修复所有可修复的问题},// ==================== 文件关联配置 ====================// 文件扩展名与语言的关联设置"files.associations": {"*.vue": "vue" // 将.vue文件关联为Vue语言模式},// ==================== Prettier扩展专用配置 ====================// Prettier忽略文件的路径（指定哪些文件不进行格式化）"prettier.ignorePath": ".prettierignore",// 要求必须有Prettier配置文件才进行格式化（确保团队统一）"prettier.requireConfig": true,// ==================== Prettier格式化规则配置 ====================// 注意：这些配置会覆盖.prettierrc文件中的设置// 每行最大字符数：120字符（超过则换行）"prettier.printWidth": 180,// 缩进宽度：2个空格"prettier.tabWidth": 2,// 不使用制表符，使用空格进行缩进"prettier.useTabs": false,// 语句结尾添加分号"prettier.semi": true,// 使用单引号而不是双引号"prettier.singleQuote": true,// 在所有可能的地方添加尾随逗号（便于版本控制）"prettier.trailingComma": "all"
}

2、配置.prettierrc文件

{"printWidth": 180,"tabWidth": 2,"useTabs": false,"singleQuote": true,"quoteProps": "as-needed","trailingComma": "none","bracketSpacing": true,"arrowParens": "always","semi": false,"rangeStart": 0,"requirePragma": false,"insertPragma": false,"proseWrap": "preserve","htmlWhitespaceSensitivity": "css","vueIndentScriptAndStyle": true,"endOfLine": "auto","embeddedLanguageFormatting": "auto","singleAttributePerLine": false,"bracketSameLine": true
}

3、配置.prettierignore文件

# Dependencies
node_modules/# Build outputs
dist/
build/
*.min.js
*.min.css# Generated files
.vite/
coverage/# Package files
package-lock.json
yarn.lock
pnpm-lock.yaml# IDE files (保留.vscode/settings.json等配置文件)
.idea/# OS files
.DS_Store
Thumbs.db# Logs
*.log# Environment files
.env
.env.local
.env.*.local# Public assets (optional)
public/# Documentation
README.md
CHANGELOG.md

四、添加脚本到 package.json