Prettier – Code formatter使用

时间:2021-1-8 作者:admin

Prettier – Code formatter这是一款 格式化js、css代码插件,暂不解释。

Prettier是什么?
Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点:
1.可配置化
2.支持多种语言
3.集成多数的编辑器
4.简洁的配置项
使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。

如何对Prettier进行配置
一共有三种方式支持对Prettier进行配置:

1.根目录创建 .prettierrc 文件,能够写入YML、JSON的配置格式,并且支持.yaml、.yml、.json、.js后缀;
2.根目录创建 .prettier.config.js 文件,并对外export一个对象;
3.在 package.json 中新建prettier属性。

下面我们使用 prettierrc.js 的方式对prettier进行配置,同时讲解下各个配置的作用。

module.exports = {
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符,而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号,而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf'

}

配置大概列出了这些,还有一些其他配置可以在官方文档进行查阅。

注意一点,parser的配置项官网列出了如下可选项:

  • babylon
  • flow
  • typescript Since v1.4.0
  • postcss Since v1.4.0
  • json Since v1.5.0
  • graphql Since v1.5.0
  • markdown Since v1.8.0

但是如果你使用了vue的单文件组件形式,记得将 parser 配置为vue,目前官方文档没有列出来。当然如果你自己写过AST的解析器,也可以用你自己的写的 parser: require(“./my-parser”)。

Prettier + editorConfig 搭配使用处理旧项目文件
editorConfig使用文档

如果你有一个旧项目想通过Prettier + editorConfig来简单规范一下格式也可以使用这个工具:
1.分别安装两个工具不必多说了
2.创建 .prettierrc 配置文件
该配置文件会继承 editorConfig 的配置
3.向 package.json 添加可执行脚本: prettier”: “prettier –write ./*
例如:

prettier”: “prettier –write ‘./src//*.js’ ‘./src//.jsx’ ‘./src/**/.css’ ‘./src/**/*.scss’
4.创建 .prettierignore 文件,用来忽略一些文件 && 目录
5.一切准备就绪之后 !!!! npm run prettier 就可以看到提示文件更改记录了

.prettierrc.js配置文件:

.prettierrc.js 配置文件

// prettier.io/docs/en/opt…

module.exports = {
  trailingComma: "none", // 数组 对象尾随不需要逗号
  bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}
  jsxBracketSameLine: false, // jsx闭标签是否另起一行 <Test></Test>
  arrowParens: 'always', // 箭头函数,只有一个参数的时候,也需要括号
  singleQuote: true, // 单引号
  semi: true, //是否在语句末尾就分号
};

.prettierignore 文件配置

# .prettierignore 文件配置
/node_modules
/dist
/src/lib/
/src/global/fonts


/docs
/.vscode
node_modules
.eslintrc.js
package.json
package-lock.json
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。