使用Prettier格式化代码
Prettier 文档
Prettier
Prettier 用来检查代码风格问题,它支持多种语言,我们这里讨论关于 JavaScript 的,它主要解决的问题是:应该使用单引号还是双引号,什么地方可以换行,TAB 键占多少个空格,结尾要不要分号 等等问题,这些都属于代码风格问题,正常情况下并不会有bug,但是在团队合作的时候容易让人暴躁。
单引号也没有没有错,双引号也没有错。但是总是要选择一个代码风格的,Prettier 希望人们放弃关于代码风格的讨论,把代码风格完全交给Prettier来处理,而不是整天把时间浪费在研究应该使用单引号还是双引号这种事情上去。整个团队只需要运行Prettier就行了,没有为什么!!!
ESLint 也可以用来检测代码风格问题,但是没有 Prettier 做的好,Prettier优势在于支持多种语言,而ESLint只支持JS相关的。
在 VSCode 使用Prettier
安装 Prettier - Code formatter 插件,
在文件中右键点击选择使用...格式化文档
,然后选择“Prettier - Code formatter ”就可以格式化文档了,
将Prettier设置为默认格式化程序
在上图中选择配置默认格式化程序
,然后选择Prettier - Code formatter
将Prettier设置为默认格式化程序,之后格式化文档的时候使用 Ctrl + Alt + L
(或者其它自定义的快捷键)就可以格式化文档了。
设置Prettier
- 在编辑器中设置
在VSCode或者其它编辑器中,可以在设置中调整Prettier的设置。
VSCode的配置有时候不会生效,这个时候要检查一下,项目中是否有本地配置例如。prettierrc,editorconfig, 之类的文件,一旦提供了这些文件,VSCode的配置将不会生效。
EditoConfig for VS Code 这个插件读取到 .editorconfig 文件之后会覆盖掉VS Code 中的一部分用户设置。
通过设置文件设置
在项目根目录添加
.prettierrc.js
即可,Prettier 会自动搜索识别相关的配置文件。配置文件有多种,如:.prettierrc.json,.prettierrc.js 等等。选择一种即可,不同的配置文件写法不同,最终效果是一样的。如果添加了配置文件那么编辑器中的所有Prettier设置就会被覆盖掉。
// .prettierrc.js module.exports = {tabWidth: 2, // tab 占据两个空格semi: true // 语句结尾的分号 };
也可以增加一些其他规则,具体配置详见 Prettier 的配置,Prettier的配置非常的少。
忽略文件
在项目根目录添加.prettierignore
,即可。
.prettierignore基于.gitignore和.eslintignore(如果有的话)。所以如果把一个文件添加到了.gitignore或者.eslintignore中,即使.prettierignore没有这个文件,该文件也会被忽略的。
插件
prettier支持安装一些插件,用于扩展支持的语言,具体见plugin
ESLint和Prettier组合使用
ESLint可以用来处理代码风格问题,Prettier也可以用来处理代码风格。ESLint相对于Prettier的话比较自由。而Prettier正如其官网写的那样,它是个有态度的格式化器,它支持少量的配置,需要我们适应它,有的地方说,ESLint有点像Android它的下面返回键可以在左边也可在右边随意配置,而Prettier则是苹果就一个按钮,需要使用者去适应(*^▽^*)。
ESLint和Prettier组合使用的时候,既然选择了Prettier来处理代码风格问题,就需要把ESLint中的和Prettier冲突的规则关闭掉。否则就会出现Prettier将代码格式化成了双引号的的然后ESLint又把双引号格式化成了单引号这类问题,所以需要给ESLint安装上一个 eslint-config- prettier
的插件,它可以使 ESLint 和 Prettier 相互配合。它关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。如果使用Stylelint的话,Stylelint也有一个类似的配置:stylelint-config-prettier
.
使用 ESLint 检查语法,Prettier 来格式化代码风格
组合使用的时候可以像上面的操作一样,通过快捷键调用Prettier格式化代码,然后配置VSCode在保存的时候调用ESLint修复代码的问题,两者互相独立格式化代码,记得给ESLint添加对应的插件来避免冲突。
使用 ESLint 检查语法,将 Prettier作为ESLint 的插件调用
这种方式是ESLint把Prettier作为插件加载并执行的,这样的话相应的速度就会慢一些。
安装 eslint 以及 prettier
npm i eslint prettier -D
初始化 ESLint
配置 Prettier
配置 ESLint 使其调用 Prettier
使用
npm i eslint-plugin-prettier -D
安装eslint-plugin-prettier
。修改 ESLint 的配置文件,使ESLint把Prettier视为一个插件调用 。// .eslintrc.js module.exports = {plugins: ["prettier"], // 这里增加prettier插件。rules: {"prettier/prettier": "error" // prettier 检测到的标红展示} };
eslint 的配置
后面的操作就和ESLint是一样的了。
这些调用的缺点是:
- 您最终会在编辑器中看到很多红色波浪线,这很烦人。Prettier 应该让你忘记格式化——而不是面对它!
- 它们比直接运行 Prettier 慢。
还有一种组合使用的方法是,大致是在eslint --fix 之后立即调用prettier。需要使用prettier-eslint有兴趣的可以了解一下。
使用Prettier格式化代码相关推荐
- vue3项目使用prettier格式化代码
因为开了新项目,所以用了vue3 ,并且选了Prettier 1.先在 vscode安装 Prettier - Code formatter 2.在项目根目录创建:.prettierrc.js mo ...
- 更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题 一.问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
- 【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录 前言 创建项目 安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
- 用 TS + Vue 写了一个在 Chrome 中运行 Prettier 格式化的扩展程序
在介绍 prettier-chrome 之前请允许我先介绍一下什么是 Prettier 如果你已经知道这是什么了并且已经会配置了,那么你可以直接跳到 prettier-chrome 的介绍 什么是 P ...
- idae 格式化代码 设置eslint_vscode 中格式化代码[vue2支持,插件ESLint、Prettier、Vetur]...
1. 安装vscode插件ESLint Prettier formatter for Visual Studio Code Vetur 2. 配置文件 .editorconfigroot = true ...
- VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 配置 ESLInt.js vscode软件下载一个ESLint,在到 ...
- 从esLint+Prettier开始格式化代码
1. 促使我要代码格式化的原因 代码格式化和代码规范对研发者来说,都并不陌生.随手的保存,随手的格式化代码,总让我们的代码更加漂亮.但是我们在一次次的格式化中,偶尔也有一些问题. 在开发同一个项目时, ...
- vscode 格式化某一段代码_VSCode格式化代码功能失效的bug解决方法
VSCode格式化代码功能失效的bug解决方法 前不久我装上了 黑苹果,那么为了快速转移开发环境,我使用了VSCode(Visual Studio Code下面简称VSCode)的插件 Setting ...
- vscode --- 快捷键格式化代码时,分号消失
问题复现 最近在vscode中,格式化代码(快捷键 alt + shift + F)时,分号会莫名奇妙的消失 对于习惯打分号的我来说,看起来很别扭- 解决方案. 我使用的是prettier这个插件来设 ...
最新文章
- 最简单易懂的对拍讲解
- Elasticsearch kibana一些基本概念
- apisix实际应用_Apache APISIX 的高性能实践
- getOrDefault()和subList()
- 一篇小文带你走进RabbitMQ的世界
- MySQL高级之事务
- java操作ElasticSearch(es)进行增删查改操作
- 天思 erp win7安装提示服务器上没有文件信息,关于天思ERP 9.2客户端无法安装的问题...
- 精品谷歌浏览器chrome插件大汇总!值得收藏
- 9张图看懂AI人工智能现状!从事AI职业女性稀缺!
- Ubuntu系统直接拷贝硬盘克隆
- B树,B+树,树,二叉树,满二叉树,完全二叉树,二叉搜索树,平衡二叉树,
- 浪子回头,不是因你,而是他心已倦
- 2022春招第一波投递时间预测,早看早知道
- 流行音乐网站 /音乐网站
- 知乎高赞:无人驾驶什么时候才会凉凉,估计还要多久?
- 佛祖保佑永无BUG python版本
- Linux系统下如何在防火墙开放指定端口
- Uniapp苹果登录
- 绝妙的 channel
热门文章
- 读写AT24C512的问题
- C语言结构体的存储空间分配
- 诺基亚手机运行linux,诺基亚专业相机安装包泄露:非诺基亚手机也可运行
- 电脑上打开WORD总是出现microsoft Office Word 已停止工作,键盘ctrl+v 复制粘贴时崩溃问题解决办法
- 关于duilib的按钮响应函数/C360SafeFrameWnd
- 【HTML粒子波浪特效】(效果+代码)
- R 多变量数据预处理_数据科学 | 第3讲 数据清洗与预处理
- 计算机应用基础考试高起专,计算机应用基础试题(高起专)
- WPF实现ScrollViewer平滑滚动效果
- 屌炸天 — 国外同行这样用ChatGPT提高Flutter开发的效率