文档章节

Prettier - Code formatter使用

o
 osc_zoa3moe9
发布于 2019/12/08 00:15
字数 878
阅读 46
收藏 0

精选30+云产品,助力企业轻松上云!>>>

更多VSCode插件使用请访问:VSCode常用插件汇总


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

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

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

如何对Prettier进行配置

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

1.根目录创建 .prettierrc 文件,能够写入YMLJSON的配置格式,并且支持.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 配置文件

// https://prettier.io/docs/en/options.html


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
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
一步一步,统一项目中的编码规范(vue, vscode, vetur, prettier, eslint)

团队开发中,多人开发同一个项目,由于个人编码习惯不同,一个项目中最终的代码风格可能差别很大,所以需要通过工具进行约束来保证代码风格的统一。同时也希望通过工具尽可能的减少低级错误出...

wfz
2019/04/25
0
0
vscode 自动添加分号, 双引号

1.安装 Prettier插件 Prettier - Code formatter 2.在setting.json配置里 "prettier.useEditorConfig": false,  "prettier.semi": true,  // 是否带分号"prettier.singleQuote": true  ......

AlanTao
03/23
0
0
使用 VS Code 编写小程序的姿势

官方的小程序开发工具使用起来非常难受, 尤其是长期使用 插件的人, 使用任何 或者 必须先装 插件, 所以总结一些使用 编写小程序可以提高效率的方法以及插件推荐. 插件推荐 minapp minapp 这个...

剑仙6
04/13
0
0
让你的代码更Prettier!代码风格统一终极方案!

让你的代码更Prettier!代码风格统一终极方案! 编辑于 2018-05-31

陈龙
2018/06/21
0
0
VSCode杂记

1.预览 Markdown快捷键:Ctrl + Shift + V,会新生成一个预览页; 2.VSCode显示所有函数列表 方法一:显示大纲 方法二:Shift+Ctl+O 3.vscode vue es6语法配置检测 插件下载 ESLint,JavaScr...

夏碌冬藏
2018/10/28
21
0

没有更多内容

加载失败,请刷新页面

加载更多

如何获取NuGet以安装/更新packages.config中的所有软件包?

问题: I have a solution with multiple projects in it. 我有一个包含多个项目的解决方案。 Most of the third party references are missing, yet there are packages.config file for e......

fyin1314
9分钟前
0
0
Xcode中的版本与版本 - Version vs build in Xcode

问题: I have an app that I developed with Xcode 3 and recently started editing with Xcode 4. In the target summary I have the iOS application target form with fields: identifie......

javail
39分钟前
7
0
如何在Python中将字典键作为列表返回? - How to return dictionary keys as a list in Python?

问题: In Python 2.7 , I could get dictionary keys , values , or items as a list: 在Python 2.7中 ,我可以将字典键 , 值或项作为列表获取: >>> newdict = {1:0, 2:0, 3:0}>>> newd......

技术盛宴
今天
17
0
2020世界人工智能大会开幕首日 百度与浦发银行达成战略合作

本文作者:y****n 7月9日,2020世界人工智能大会开幕首日,百度与浦发银行签署战略合作协议,将在人工智能、金融科技等多个领域进一步深化合作。双方将优势互补,实现人工智能技术在金融领域...

百度开发者中心
昨天
26
0
Java中C ++ Pair 的等价物是什么? - What is the equivalent of the C++ Pair in Java?

问题: Is there a good reason why there is no Pair<L,R> in Java? 有没有一个很好的理由说明Java中没有Pair<L,R> ? What would be the equivalent of this C++ construct? 这个C ++构造的......

富含淀粉
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部