Prettier介绍与基本用法
前言
最近在空闲时间在搭建Vue3+Ts+Vite搭建的管理后台,准备尝试一下Prettier,学习的同时也正好总结了一些经验,在这里做一些记录
什么是Prettier
prettier是一个代码格式化工具,它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。
1、安装到开发依赖上
//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier
2、在根目录下创建.prettierrc.js配置文件
//此处的规则供参考,其中多半其实都是默认值,可以根据个人习惯改写
module.exports = {printWidth: 100, //单行长度tabWidth: 2, //缩进长度useTabs: false, //使用空格代替tab缩进semi: true, //句末使用分号singleQuote: true, //使用单引号quoteProps: 'as-needed', //仅在必需时为对象的key添加引号jsxSingleQuote: true, // jsx中使用单引号trailingComma: 'all', //多行时尽可能打印尾随逗号bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }jsxBracketSameLine: true, //多属性html标签的‘>’折行放置arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => xrequirePragma: false, //无需顶部注释即可格式化insertPragma: false, //在已被preitter格式化的文件顶部加上标注proseWrap: 'preserve', //不知道怎么翻译htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进endOfLine: 'lf', //结束行形式embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};
格式化规则还可以写在如下文件中(按优先级由高至低排列):
- 项目的package.json文件中
- .prettierrc.json或 .prettierrc.yml文件中
{"trailingComma": "es5","tabWidth": 4,"semi": false,"singleQuote": true
}
- .prettierrc.js或 prettier.config.cjs文件中
module.exports = {trailingComma: 'es5',tabWidth: 4,semi: false,singleQuote: true,
};
Prettier会检查配置文件并自动读取文件中的配置,我们只需要选一种方法配置就好了,我现在选的是第三种。
3、忽略不想格式化的文件
创建 .prettierignore忽略你不希望格式化的文件,node_modules是默认会被忽略的目录。他的用法就类似于.gitignore
# Ignore artifacts:
build
coverage# Ignore all HTML files:
*.html
4、命令行格式化
- 格式化全部文档
npx prettier --write .
//或
yarn prettier --write .
- 格式化指定文档
npx prettier --write src/components/Button.js
//或
yarn prettier --write src/components/Button.js
- 检查文档是否已格式化(检查指定文件同上)
npx prettier --check .
//或
yarn prettier --check .
5、与eslint的区别
prettier的配置项比较少(容易配置),且只专注于代码样式,而eslint还提供语法检查,现在的eslint也集成了formatter功能。
prettier相比eslint支持更多文件的格式化。
6、解决和eslint的冲突
安装 eslint-config-prettier,这个插件会把eslint中可能导致冲突的规则关掉,这样两者就能兼容使用了。
//1. 安装 eslint-config-prettier 插件
npm i -D eslint-config-prettier
//2. 在eslint的配置文件中写入以下内容extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突
7、git hooks
可以设置在git提交之前执行一次格式化( pre-commit hook ),这样我们仓库里的代码就都是格式化好的了。
只需要在package.json里面加入一些配置。
{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"**/*": "prettier --write --ignore-unknown"}
}
如果你使用eslint,lint-staged里eslint的执行顺序要放在前面
需要安装husky 和 lint-staged这两个依赖才能实现,其中husky是帮助我们添加git hooks的工具,而lint-staged则是筛选那些staged的git文件执行lint。
执行 npx mrm lint-staged 就会把两个工具都安装好,也会自动生成package.json配置。
Prettier介绍与基本用法相关推荐
- html图片标签img的介绍以及基本用法详解
<img> 元素向网页中嵌入一幅图像.<img> 标签有两个必需的属性:src 属性 和 alt 属性. 必需的属性 属性 值 描述 alt text 规定图像的替代文本. s ...
- jQuery框架的介绍以及基本用法--操作dom
jQuery框架的介绍以及基本用法–操作dom 概念 jQuery是一个优秀的javascript轻量级框架之一,兼容css3和各大浏览器,提供了dom,events,animate,ajax等简易操 ...
- java中dynamic_介绍@dynamic的用法
介绍@dynamic的用法 Objective-C 2.0提供了属性(@property),可以让编译器自动生成setter和getter方法.如果不想编译器自作主张生成这些setter和getter ...
- shell介绍及基本用法
8.1:shell介绍: shell是一个命令解释器,提供用户和机器之间的交互,支持特定语法,支持逻辑判断.循环,并且每个用户都可以有自己的shell: Centos默认的shell是bash(Bou ...
- 求介绍matlab函数用法的书,MATLAB初学者教程--函数用法的简单介绍
1.4 函数用法的简单介绍 1.4.1什么是函数 似乎很多人一听到函数这个词就会想到数学中的某个概念,然后对于恐惧数学的同学就开始打退堂鼓.在matlab当中到处可以用到函数,它的出现可以让我们用很简 ...
- django之ORM介绍与基本用法(一)
文章目录 ORM介绍 ORM用法 字段类型: 字段选项: 关系字段类型 元选项: 模型成员 Manager:管理器类 自定义管理器类:1.修改原始查询集 自定义管理器类:2.新增管理器方法 ORM介绍 ...
- POCO C++ Libraies介绍及常见用法
POCO C++ Libraies属于功能广泛.轻量级别的开源框架库,它拥有媲美Boost库的功能以及较小的体积广泛应用在物联网平台.工业自动化等领域. POCO C++ Libraies由多个功能模 ...
- Netty5的例子,简单介绍Netty的用法
转自:http://blog.csdn.net/tjbsl/article/details/51038947 这是一个netty快速入门的例子,也是我的学习笔记,比较简单,翻译于官方的文档整理后把所有 ...
- ①HTML介绍及标签用法
如果您对前端的其它内容的学习感兴趣,可以前往 我的个人主页 翻阅.具体专栏内容如下: HTML和CSS JavaScript jQuery Vue Vue3 React TypeScript uni- ...
最新文章
- 彻底理解H5的DOM事件
- python封装工具类多个项目使用_【arcpy项目实战】将多个点两两生成的最短路径pyhon代码封装入script中...
- xml转化为kml_借助ogr2ogr工具实现shp文件转换kml格式
- 工信部高级软件工程师证书有用吗_考bim工程师证书有用吗
- 正则表达式的三种模式【贪婪、勉强、侵占】的分析
- 统计自然语言处理基础——学习摘要(1)
- myBatis --(3)数据的增删改查
- 湖北工业大学计算机导论考试试题,湖北工业大学计算机二级考试时间
- 程序员常用资源工具集合(建议收藏)
- python筛选excel符合条件的数据——python处理excel数据(四)
- 安装CentOS找不到硬盘,无法分区,No disks selected
- uni-app项目(分类页)
- 语音信号处理之语音特征提取(1)机器学习的语音处理
- 1067 – Invalid default value for ‘id’
- 麻省理工学院计算机硕士几年制,2020年麻省理工读研几年
- 估值85亿,年复合增长率超92%,以萨技术为何还要坚持上市?
- 使用AIDEGen进行AOSP开发
- 零基础可以考软考高级吗?
- 猴子补丁 - Monkey Patching
- 实现卡片翻转的动画效果