什么是Prettier？

2024-03-29 17:55:52

什么是Prettier？

一、介绍Prettier

Prettier 的原理非常简单，不管你写的代码是个什么鬼样子，Prettier 会去掉你代码里的所有样式风格，然后用统一固定的格式重新输出。

1.1 代码格式化（An opinionated code formatter）
官方首先告诉你，Prettier 是一个 Opinionated 的代码格式化工具。Prettier 说自己是一个 Opinionated code formatter，就是说：你必须认同我的观点，按照我说的做。且在很多地方，你都可以看见opinionated和unopinionated的影子，例如：

1.2 支持多种语言（Supports many languages）
HTML,CSS,JS,JAVA,PHP,Ruby,Swift,Python基本上目前世界上的流行语言，prettier都可以支持代码格式化。
1.3 支持多种IDE（Integrates with most editors）
1.4 及其少的设置（Has few options）

二、Prettier的用法

2.1 手动格式化

npm下载：npm install prettier --save-dev --save-exact

// 命令行输入：npx prettier --write 文件路径，例如：
npx prettier --write src/App.vue

2.2 集成IDE格式化（这里列举vscode）

先安装扩展插件。

配置保存或者粘贴自动格式化即可。

三、Prettier和Linters之间的关系

各种 Linters 其实更多的是帮助你检查代码而不是格式化，Linters是按照规则(Rules)去检查代码的，遇到不符合规则的代码就会提示你，有的规则还能自动帮你解决冲突。例如 ESLint 遇到 incorrect code 的时候，会提示你违反规则，让你修改代码以符合规则。

而 Prettier 与Linters的区别就是，它根本不管你之前符不符合什么规则，都先把你的代码解析成 AST，然后按照它自己的风格给你重新输出代码。换句话说，Prettier 对应的是各种 Linters 的 Formatting rules 这一类规则。而且你用了 Prettier 之后，就不会再违反这类规则了！不需要你自己手动修改代码。

什么是Prettier？相关推荐

idae 格式化代码设置eslint_vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]...
1. 安装vscode插件ESLint Prettier formatter for Visual Studio Code Vetur 2. 配置文件 .editorconfigroot = true ...
VScode配置prettier和eslint
前端工具中如果使用prettier进行代码格式化,eslint进行错误检测.对前端工作有极大的帮助原则: prettier和eslint配置可以分成两种,一种是本地配置,一种是全局配置.VScode ...
【代码规范】prettier
prettier 每个开发人员都有自己的撸码风格,例如: 示例一 function foo(items) {return items.filter(item => item.checked).m ...
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题一.问题痛点在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
用 TS + Vue 写了一个在 Chrome 中运行 Prettier 格式化的扩展程序
在介绍 prettier-chrome 之前请允许我先介绍一下什么是 Prettier 如果你已经知道这是什么了并且已经会配置了,那么你可以直接跳到 prettier-chrome 的介绍什么是 P ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
Prettier 1.15代码格式化工具新增Angular和Vue.js支持
Prettier 1.15代码格式化工具新增HTML.Vue.js.Angular.MDX支持以及多项语法优化和改进. 对于Angular和Vue,Prettier现在可以格式化这些扩展HTML的框架 ...
代码规范之eslint+prettier实践
eslint:code quality linter prettier: code formatter 二者结合使用既能达到团队代码协作风格一致(比如空格宽度,缩进等),又能做代码检查. 今天遇到一个 ...
dw项目符号空心圆怎么设置_项目规范配置之editorconfigamp;prettier
前言一个项目从创建到被重构,必定会经手很多人,每个人的代码风格迥异,就算是一个人从头到尾开发同一个项目,也无法保证前后开发的代码风格的相同. 约束,至关重要!不能让代码在不同的机器不同的IDE上出现 ...
eslint 无法格式化ts_VS Code Prettier + ESlint 格式化Vue代码及遇到问题
介绍 prettierprettier.io prettier是一个专业代码格式化工具,支持JS.TS.sass.less.HTML.java.yaml.md.swift等等,主流的语言大多都支持. ...

最新文章

热门文章