笔记-Prettier格式化代码

最新推荐文章于 2024-11-04 22:40:53 发布

33子～

最新推荐文章于 2024-11-04 22:40:53 发布

阅读量232

点赞数

分类专栏：学习笔记📒

本文链接：https://blog.csdn.net/weixin_46254175/article/details/116499342

版权

学习笔记📒 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Prettier是一个强大的代码格式化工具，支持多种编程语言和文件格式，如JavaScript、Vue、CSS等。安装可通过yarn或npm。配置可以通过创建.prettierrc或prettier.config.js文件，设定如tabWidth、semi、singleQuote等选项。同时，可以使用.prettierignore文件或代码注释忽略某些文件或部分代码。

摘要由CSDN通过智能技术生成

Prettier官方文档

Prettier是一个自定义的代码格式化工具，它支持以下文件格式：

JavaScript，including ES2017
JSX
Angular
Vue
Flow
Typescript
CSS，Less and SCSS
HTML
JSON
GraphQL
Markdown，including GFM and MDX
YAML

安装

yarn

yarn add prettier --dev --exact
## or globally
yarn global add prettier

npm

npm install --save-exact prettier
# or globally
npm install --global prettier

配置

Prettier提供了一套默认的配置，类似于eslint的自定义配置，它通过三种方法：

项目根目录下创建.prettierrc文件
项目根目录下创建prettier.config.js文件
在package.json文件中配置prettier属性

举例：

{
	"tabWidth": 2, // tab缩进大小，默认为2
	"useTabs": true, // 使用tab缩进，默认false
	"semi": false, //   使用分号，默认true
	"singleQuote": true, // 使用单引号，默认false（在jsx中配置无效，默认都是双引号）
	"TrailingCooma": "none", // 行尾逗号，默认none，可选 none｜es5｜all，es5包括es5中的数组、对象，all包括函数对象等所有可选
	"bracketSpacing": true, // 对象中的空格 默认false
	"jsxBracketSameLine": false, // JSX标签闭合位置 默认false
	"arrowParens": "avoid", // 箭头函数参数括号，默认avoid 可选avoid｜always，avoid能省略括号的时候就省略 例如x => x，always总是有括号
}

忽略：

如果存在不想格式化的文件，可以忽略格式化。使用方式有两种：

项目根目录下创建.prettiergnore文件
代码注释

<div>
  {/* prettier-ignore */}
  <span   			ugly    format=''   />
</div>