（三十五）代码美化神器 Prettier使用详解

步骤三十五

代码美化神器-Prettier使用详解

多人协作的项目开发中，保持统一的代码风格是一件很重要的事。

可是统一代码风格后的好处又非常明显：

• 整齐的步伐
• 更少的垃圾代码（漂亮的格式意味着更好维护的代码）
• 基于以上两点，更强的团队战斗力

如何使用

prettier作为开发依赖记录在 package.json 里，跟着项目走，版本统一，既可以使用官方的默认配置，也可以指定一套内容的配置项。适合团队协作。

Install

npm install --save-dev --save-exact prettier

Prettier Options

在根目录下 创建 .prettierrc.js 文件，配置如下

// 此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 120, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: false, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: false, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

主要有以下项：

• printWidth. 条件允许时每行字符长度大于该值时进行换行（prettier不会强行换行：比如将一个引号包裹的字符串折行）。默认为80
• tabWidth. 缩进空格数；默认为2
• semi. 语句末尾是否带分号
• singleQuote. 是否将双引号转换为单引号。双引号里包含单引号时不会被格式化。
• quoteProps. 对象属性引号的配置
• jsxSingleQuote. jsx文件里使用单引号
• bracketSpacing. 圆括号之间添加空格，如{ a: b }
• arrowParens. 箭头函数，参数添加圆括号，如(x)=>y
• parser. 指定解析器，我们一般不需要默认的就行

具体可以查看文档

运行命令：

npx prettier --write .

发现代码被格式化了.

.prettierignore

需要忽略格式化的文件，在根目录创建 .prettierignore 文件

# Ignore artifacts:
build/*.js
coverage
public
dist
node_modules
prettierrc
.DS_Store
.eslintrc.json
node_modules

# Ignore all HTML files:
*.html