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

我谈山美，我说你媚

848人浏览 · 2025-09-27 18:45:12

我谈山美，我说你媚 · 2025-09-27 18:45:12 发布

一、安装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