Project-Ideas：前端Prettier代码格式化

Project-Ideas：前端Prettier代码格式化

【免费下载链接】Project-Ideas-And-Resources A Collection of application ideas that can be used to improve your coding skills ❤. 项目地址: https://gitcode.com/GitHub_Trending/pr/Project-Ideas-And-Resources

为什么需要代码格式化工具

在多人协作的前端项目中，代码格式不一致往往导致大量无意义的争论和时间浪费。Prettier（代码格式化工具）通过自动化处理代码格式，让开发者专注于逻辑实现而非样式调整，显著提升团队协作效率。

格式化工具对比

工具	特点	适用场景
Prettier	专注格式化，零配置理念	全前端项目统一格式
ESLint	代码质量检查+基础格式化	需要严格代码规范的场景
Standard.js	强制统一规范，不可配置	小型项目或快速原型

Prettier工作原理

Prettier采用AST（抽象语法树）驱动的代码重写方式，工作流程如下：

这种方式相比传统正则替换更可靠，能处理复杂代码结构而不破坏逻辑。

快速上手

安装与基础配置

# 安装核心包
npm install --save-dev prettier

# 创建配置文件
echo '{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}' > .prettierrc

# 创建忽略文件
echo 'node_modules
dist
build
*.log' > .prettierignore

添加脚本命令

在package.json中添加：

{
  "scripts": {
    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md}'",
    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,css,md}'"
  }
}

核心配置详解

配置项	类型	默认值	说明
printWidth	number	80	每行最大字符数
tabWidth	number	2	缩进宽度
singleQuote	boolean	false	使用单引号
trailingComma	string	"es5"	尾随逗号规则
arrowParens	string	"avoid"	箭头函数参数括号
jsxSingleQuote	boolean	false	JSX使用单引号
bracketSpacing	boolean	true	对象字面量空格

框架集成方案

React项目配置

{
  "printWidth": 100,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

格式化效果对比：

// 格式化前
function App(){return <div className="App"><h1>Hello World</h1></div>;}

// 格式化后
function App() {
  return (
    <div className='App'>
      <h1>Hello World</h1>
    </div>
  );
}

Vue项目配置

{
  "singleQuote": true,
  "trailingComma": "es5",
  "vueIndentScriptAndStyle": true
}

TypeScript项目配置

{
  "parser": "typescript",
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

自动化工作流

编辑器集成（VS Code）

1. 安装插件：

code --install-extension esbenp.prettier-vscode

2. 配置自动格式化：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true
}

Git提交自动化

# 安装依赖
npm install --save-dev husky lint-staged

echo '{"lint-staged": {"*.{js,jsx,ts,tsx,css,md}": ["prettier --write"]}}' >> package.json

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

CI/CD集成（GitHub Actions）

创建.github/workflows/format-check.yml：

name: Format Check
on: [pull_request]
jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run format:check

高级使用技巧

局部禁用格式化

// prettier-ignore
const unformatted = { foo: 'bar', baz: 'qux' };

/* prettier-ignore-start */
const multiLineIgnored = {
  key1: 'value1',
  key2: 'value2'
};
/* prettier-ignore-end */

性能优化（大型项目）

1. 使用.prettierignore排除构建产物
2. 结合--cache参数缓存结果：

prettier --write --cache 'src/**/*.js'

3. 升级到Prettier 3.0+版本

常见问题解决方案

问题	解决方案
与ESLint冲突	安装eslint-config-prettier
Vue单文件组件格式化	配置vueIndentScriptAndStyle: true
特殊文件不格式化	使用.prettierignore或注释忽略

学习资源

• 官方文档：https://prettier.io/docs/en/
• 配置游乐场：https://prettier.io/playground/
• 插件列表：https://github.com/prettier/awesome-prettier

---

点赞👍收藏⭐关注，获取更多前端工程化实践指南！

下期预告：《ESLint+Prettier完美协作指南》

【免费下载链接】Project-Ideas-And-Resources A Collection of application ideas that can be used to improve your coding skills ❤. 项目地址: https://gitcode.com/GitHub_Trending/pr/Project-Ideas-And-Resources