概述

Prettier 是一个代码格式化工具，核心作用是：

自动统一代码风格
按固定规则重排代码
减少团队里关于“代码怎么排版”的争论
让你把精力放在逻辑上，而不是空格、分号、换行这些细节上

支持的语言：

JavaScript / TypeScript
JSX / TSX
HTML
CSS / SCSS / Less
JSON
Markdown
YAML
GraphQL 等

vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

vue-element-admin 虽然内置了 ESLint 来协助代码的格式检查，比如：

缩进
引号
分号
空格
换行

但它本质更擅长的是：

语法问题
潜在 bug
不规范写法
最佳实践约束

如果把“格式化”也全交给 ESLint：

规则会比较多
容易和已有规则冲突
维护成本高
自动格式化体验通常不如 Prettier 稳定

基于以上的原因，推荐ESLint + Prettier：

Prettier：负责格式化
ESLint：负责代码质量和规范检查

安装及部署

安装依赖

1	npm install -D prettier eslint-config-prettier

如果还希望 ESLint 能识别 Prettier 问题（不建议），也可以再装：

1	npm install -D eslint-plugin-prettier

添加 Prettier 配置

创建 .prettierrc.js 文件

// 配置项后续说明
module.exports = {
	printWidth: 120,
	tabWidth: 2,
	useTabs: false,
	semi: true,
	singleQuote: true,
	trailingComma: "all",
	bracketSpacing: true,
	bracketSameLine: false,
	arrowParens: "always",
	htmlWhitespaceSensitivity: "ignore",
	endOfLine: "lf",
	singleAttributePerLine: false,
	vueIndentScriptAndStyle: false,
};

添加忽略文件

创建 .prettierignore 文件

dist/
node_modules/
public/
src/icons/svg/

package.json配置调整

新增脚本，用于快捷格式化源码

{
	"scripts": {
		// ...
		"format": "prettier --write \"src/**/*.{js,vue,css,scss,json}\"",
		"format:check": "prettier --check \"src/**/*.{js,vue,css,scss,json}\""
	}
}

可以使用以下命令来做代码格式化了：

1
2
3

npm run format
// 仅检查，不更新文件
npm run format:check

配置lint-staged

当执行 git commit 时，lint-staged 会根据配置内容，对对应的文件依次执行对应的命令

{
	"lint-staged": {
		"src/**/*.{js,vue}": [
			// 前置加入
			"prettier --write"
			// ...
		],
		// 针对的文件
		"src/**/*.{css,scss,json}": [
			"prettier --write",
			"git add"
		]
	}
}

配置eslintrs.js

module.exports = {
	// 当前为根目录
	root: true,
	parserOptions: {
		// 用 babel-eslint 解析器，支持 ES6+ 装饰器等实验性语法
		parser: "babel-eslint",
		// 代码使用 ES Module
		sourceType: "module"
	},
	// 声明运行环境，启用对应全局变量：
	env: {
		browser: true,
		node: true,
		es6: true
	},
	// 集成的规则集
	extends: ["plugin:vue/essential", "prettier"],
	// 部分规则禁用，根据自己的需要调整
	rules: {
		"no-unused-vars": "off",
		"no-console": "off",
		"no-debugger": "off"
	}
};

Prettier配置项

在 .prettierrc.js 中可以根据团队或自己的编码习惯调整代码风格

配置项一览表

配置项	类型	可选值 / 示例	默认值	说明
`printWidth`	`number`	`80`、`100`、`120`	`80`	每行目标最大宽度，超过时尽量换行
`tabWidth`	`number`	`2`、`4`	`2`	缩进空格数
`useTabs`	`boolean`	`true` / `false`	`false`	是否使用 Tab 缩进
`semi`	`boolean`	`true` / `false`	`true`	是否在语句末尾添加分号
`singleQuote`	`boolean`	`true` / `false`	`false`	JS / TS 等是否使用单引号
`quoteProps`	`string`	`"as-needed"` / `"consistent"` / `"preserve"`	`"as-needed"`	对象属性何时加引号
`jsxSingleQuote`	`boolean`	`true` / `false`	`false`	JSX 属性值是否使用单引号
`trailingComma`	`string`	`"all"` / `"es5"` / `"none"`	`"all"`	是否添加尾随逗号
`bracketSpacing`	`boolean`	`true` / `false`	`true`	对象大括号内是否保留空格
`bracketSameLine`	`boolean`	`true` / `false`	`false`	多行 HTML / JSX 标签的 `>` 是否与最后一个属性同一行
`arrowParens`	`string`	`"always"` / `"avoid"`	`"always"`	箭头函数参数是否总是加括号
`proseWrap`	`string`	`"always"` / `"never"` / `"preserve"`	`"preserve"`	Markdown 文本换行方式
`htmlWhitespaceSensitivity`	`string`	`"css"` / `"strict"` / `"ignore"`	`"css"`	HTML 空白敏感度
`vueIndentScriptAndStyle`	`boolean`	`true` / `false`	`false`	Vue 单文件组件中是否缩进 `script` 和 `style` 内容
`endOfLine`	`string`	`"lf"` / `"crlf"` / `"cr"` / `"auto"`	`"lf"`	换行符风格
`embeddedLanguageFormatting`	`string`	`"auto"` / `"off"`	`"auto"`	是否格式化嵌入式语言代码
`singleAttributePerLine`	`boolean`	`true` / `false`	`false`	HTML / Vue / JSX 标签属性是否一行一个
`overrides`	`array`	见下方示例	`[]`	按文件类型覆盖配置

各配置项可选值说明表

quoteProps

as-needed：仅在需要时给对象属性加引号
consistent：如果一个属性需要引号，则整个对象的属性都加引号
preserve：保持原始写法，不强制改动

trailingComma

-all：尽可能添加尾随逗号，包括函数参数等
-es5：仅在 ES5 支持的语法中添加尾随逗号
-none：不添加尾随逗号

arrowParens

-always：箭头函数参数始终加括号，如 (x) => x
-avoid：仅单参数时省略括号，如 x => x

proseWrap

-always：按 printWidth 主动换行
-never：不主动换行
-preserve：保留原始换行方式

htmlWhitespaceSensitivity

-css：按 CSS 显示规则判断空白是否敏感
-strict：空白始终敏感
-ignore：空白不敏感

endOfLine

-lf：Unix/Linux/macOS 常见换行
-crlf：Windows 常见换行
-cr：老式 Mac 换行，基本很少用
-auto：自动保持当前文件已有风格

embeddedLanguageFormatting

auto：自动格式化嵌入语言
off：不格式化嵌入语言

Prettier常用命令

参数	示例	说明
`--write`	`prettier --write .`	直接修改文件
`--check`	`prettier --check .`	检查格式，不修改
`--list-different`	`prettier --list-different .`	列出格式不一致的文件
`--config`	`prettier --config .prettierrc.json --write src`	指定配置文件
`--ignore-path`	`prettier --ignore-path .prettierignore --write .`	指定 ignore 文件
`--parser`	`prettier --parser babel file.js`	手动指定解析器
`--log-level`	`prettier --log-level warn --write .`	设置日志级别
`--with-node-modules`	`prettier --with-node-modules --write .`	连 `node_modules` 也处理
`--ignore-unknown`	`prettier --ignore-unknown --write .`	忽略无法识别的文件
`--no-config`	`prettier --no-config --write file.js`	不读取配置文件
`--find-config-path`	`prettier --find-config-path src/index.js`	查找配置文件路径

vue-element-admin配合Prettier实现前端代码格式化

概述