使用 Prettier 美化你的代码
大家好,我是前端西瓜哥。今天带大家来学习 Prettier。
为什么要用 Prettier?
Prettier 是一款流行的代码格式化工具。它支持的语言相当多。
它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。
Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。
Prettier 的优点:
开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;
支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。
但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。
比如有个 printWidth
的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。
上手 Prettier
下面我们就来上手 Prettier。
先是安装:
yarn add --dev --exact prettier
# 或者是
npm install --save-dev --save-exact prettier
这里我们用了 exact 配置项来锁定版本号,这是因为不同版本 prettier 的代码风格可能有细微的不同。prettier 并不保证主版本相同的版本下风格是一致的。
使用命令对项目下所有文件进行格式:
npx prettier --write .
你也可以指定目录,比如 /src
;或是用通配符指定特定的文件,比如 app 目录下的所有 .test.js
结尾的文件可以用 app/**/*.test.js
。
另外,你可以创建 .prettierignore
文件来指定不需要格式化的文件。如:
# Ignore artifacts:
build
coverage# Ignore all HTML files:
*.html
保存时自动格式化
如果你想要在保存时格式化,一般都是要用到编辑器的插件。对于 VSCode 来说,你需要安装一个名为 Prettier 的插件,然后再加上 VSCode 配置(项目下加一个 .vscode/setting.json
文件):
{"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式器改为 prettier"editor.formatOnSave": true // 开启 “保存自动格式化”
}
或者你不开启保存自动格式化,可以在觉得需要的时候右键选择 “Format Document“,或者用快捷键。
Prettier 和 ESLint 比较
ESLint 是一种 Linter,能够分析代码并准确定位错误。它支持 代码质量 以及 代码风格 的检查。
代码质量,比如启用 “no-unused-vars”,变量如果声明却未被使用会被认为不正确。
代码风格的能力类似 Prettier,比如 "semi": "error"
表示必须用分号结尾,对应 Prettier 的 "semi": true
。
Prettier 不会标识哪些地方出问题,在编辑器中用波浪线标出来。我用 ESLint 写新的功能时,因为代码是半成品,总能看到一堆的错误提示,体验确实不好。
总的来说,Prettier 只做代码格式化;ESLint 既能做代码质量检查,也能做代码风格检查和修正。
一般来说,项目最好加上 ESLint,这对我们改善代码质量很有帮助。对于代码格式化,我们可以用 ESLint 或是 Prettier。
如果想用 Prettier 格式化 JS,你需要在 ESLint 配置文件中使用 eslint-config-prettier
,将 eslint 中和 prettier 冲突的规则关闭。否则你会看到代码被格式化了两次,总是会不符合其中一方的规则。
另外,ESLint 不支持格式化 CSS,还是有必要装上 Prettier 或 stylelint 的。
TypeScript 团队在实现 typescript-eslint 时,认为 ESLint 不应该做代码格式化,而应该是一个真正的只检查错误的 Linter(可能他们被格式化的实现弄烦了),而像是 Prettier 这类的 Formatter 才应该做代码格式化工作。具体可以看下面这篇文章:
https://typescript-eslint.io/docs/linting/troubleshooting/formatting/
结尾
Prettier 是一款代码格式化工具,开箱即用,默认支持语言众多,风格优美,可以让我们轻装上阵。如果你自己做一些小项目,用方便的 Prettier 是不错的选择。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。
使用 Prettier 美化你的代码相关推荐
- 更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题 一.问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
- eslint 无法格式化ts_VS Code Prettier + ESlint 格式化Vue代码及遇到问题
介绍 prettierprettier.io prettier是一个专业代码格式化工具,支持JS.TS.sass.less.HTML.java.yaml.md.swift等等,主流的语言大多都支持. ...
- 使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...
- Prettier 一个固执的代码格式化程序
文章目录 Prettier 一.安装 npm 或 yarn 二.配置文件 三.配置参数 1. Print Width 2. Tab Width 3. Tabs 4. Semicolons 5. Quo ...
- 批处理获取当前系统日期及时间及星期转换为数字并加以格式美化的bat代码
代码如下: @echo off&setlocal enabledelayedexpansion ::批处理获取当前系统日期及时间并格式美化的bat代码 echo 读取系统日期和时间(普通) e ...
- 用 Prettier 美化代码
Eslint 解决了代码格式检查的问题,同时,一些有用的提示能让我们发现 bug 和无用代码(如 no-unused-vars, no-extra-bind, no-implicit-globals) ...
- dw html5怎么美化,DW CS5/CS6代码格式化、美化插件 Dreamweaver代码格式化美化插件
这个<DW CS5/CS6代码格式化.美化插件>应该是现在最好用的代码格式化扩展了. 众所周知Dreamweaver CS5 CS6自带的应用源格式只能独自格式化HTML文件与CSS文件, ...
- laravel安装prettier,git hook代码格式化工具
1.安装prettier的php扩展 npm install --global prettier @prettier/plugin-php 2.安装husky,lint-staged(git钩子)使用 ...
- 【WordPress 美化】短代码给文章添加彩色美化框+按钮
看到很多博客都在用这个美化框,感觉不错,也用来试试,这里说的是纯代码版,用插件 G-Shortcode 也是可以实现同样的功能的,只不过本人有个习惯就是能不用插件就不用,因为插件使用太多托累网站速度. ...
最新文章
- hive to mysql_Hive And MySQL安装及设置
- 每日一皮:用户永远不知道怎么用我们的产品...
- 吴恩达深度学习笔记4-Course1-Week4【深层神经网络】
- 数据驱动业务——梦想成真,只差一步
- Laravel 学习笔记之 Query Builder 源码解析(下)
- 场景服务只创建了 Service Difinition 和feature layer
- 求1000以内的所有水仙数c语言,求1000以内的所有水仙花数
- org.elasticsearch.cluster.block.ClusterBlockException: blocked by: [SERVICE_UNAVAILABLE/1/state
- 网络高清视频远程会议系统EasyRTC在Windows10上运行程序无返回信息问题解决
- HERO2009 午夜骚魂
- 以txt为数据源的随机点名系统
- 区块链技术培训—从技术小白到年薪百万区块链工程师的进阶之路
- Pulling is not possible because you have unmerged files
- python 等比例裁剪图片
- html5考试总结300字,中段考试总结作文300精选集锦
- NetSpot Pro一款非常强大的可视化wifi检测工具
- 电影死刑犯的主题歌: Nickelback.-.Savin'.Me
- 下载yutube视频的方法 超方便
- 信息安全技术 个人信息安全工程指南
- MathType公式编辑文本复制粘贴选项
热门文章
- LSM零知识学习四、插桩原理实现细节(2)
- 【Directx3D-4】渲染图片(纹理贴图方式)
- v74.01 鸿蒙内核源码分析(编码方式篇) | 机器指令是如何编码的 | 百篇博客分析OpenHarmony源码
- 手把手教你:jsp中无法使用My97DatePicker的解决方法
- oracle耳机,华为耳机实力登榜中国十大耳机品牌
- C 中出现nan(ind)是啥意思?
- win10网络出现感叹号,但能正常上网
- android程序按home切换到后台,点击launcher的图标切换到前台,当前页面退出回到启动页
- 计算机应用技术教程答案2017,计算机应用技术教程各章书后练习答案.docx
- 鸿蒙渊boss,副本介绍-云光殿