Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >你的代码好看吗

你的代码好看吗

作者头像
Daotin
发布于 2022-05-07 13:16:26
发布于 2022-05-07 13:16:26
1.4K00
代码可运行
举报
运行总次数:0
代码可运行

阅读本文大概需要 12 分钟。

今天介绍的是一款代码格式化工具,特别适合团队协作开发的时候使用。想必你应该正在使用,它叫 prettier。在 Github 上已达 31.4k star,如果你还不知道它的话就太可惜了。

prettier 介绍

官方自己介绍说,prettier是一款强势武断的代码格式化工具,它几乎移除了编辑器本身所有的对代码的操作格式,然后重新显示。就是为了让所有用这套规则的人有完全相同的代码。在团队协作开发的时候更是体现出它的优势。与eslint,tslint等各种格式化工具不同的是,prettier只关心代码格式化,而不关心语法问题。

prettier 的优势也很明显,它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。下面这张图可以很好的进行说明:

也支持目前市面上所有主流的编辑器:

prettier 的使用

prettier的使用可分为两种方式:

1、使用编辑器的插件

使用编辑器插件是最为方便的一种方法,编写完代码,只需要一键即可格式化编写的代码,非常方便。

这里已vscode为例进行说明,下面的配置是我自己的对于HTML/CSS/JS/LESS文件的prettier格式化规则:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
// 使能每一种语言默认格式化规则
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
    
/*  prettier的配置 */
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab,使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
"prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器,默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
"prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

上面只是一些基本的语言的格式化规范,prettier 每一个属性的配置都有详细的说明,大家可以根据自己的情况进行调整。

相信每个在vscode上编写vue的都会下载 Vetur 插件,它目前是 vscode 上面最好用的一款vue插件。现在要说的是,如何使用prettier格式化vue的代码。你没法使用类似格式化html/css/js的方式来格式化vue格式的代码,像下面这样子的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

这样prettier是不认识的。不过幸运的是,Vetur插件内部默认使用prettier进行格式化的,但是由于Vetur的默认格式化配置与我们期望的有所出入,所以我们需要单独对Vetur的prettier进行配置,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatterOptions": {
  "prettier": {
  "printWidth": 160,
  "singleQuote": true, // 使用单引号
  "semi": true, // 末尾使用分号
  "tabWidth": 4,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "proseWrap": "preserve" // 代码超出是否要换行 preserve保留
        }
    },
}

这些配置是不会和之前配置的prettier规则冲突的。

值得提一句的是,Vetur对于html文件默认使用的是 prettyhtml,但是由于prettier也可以支持html的格式化,所以我觉得统一使用prettier对全语言的格式化是比较简洁的,也希望prettier能够对更多的语言进行支持。

2、使用脚本的方式

这种方式就是使用prettier指令在命令行窗口对单一文件进行格式化。

首先需要安装prettier全局指令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g prettier

可以使用 prettier -v 检查是否安装完成。

安装好之后,使用下面指令对xxx.js文件进行格式化(使用的是prettier默认的配置规则)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// prettier--write <文件路劲+文件名>


prettier --write ./xxx.js

当然,默认的配置规则是不符合我们的需求的,我们需要自定义配置规则。

书写自定义规则的文件需要是下面几种文件和格式:

  • .prettierrc 文件,支持yaml和json格式;或者加上 .yaml/.yml/.json 后缀名
  • .prettierrc.toml 文件(当为toml格式的时候,后缀是必须的)
  • prettier.config.js 或者 .prettierrc.js,需要返回一个对象
  • package.json 文件中加上"prettier"属性

每种文件的书写格式如下:

JSON

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

JS

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true
};

YAML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

TOML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true

prettier 查找配置的方式首先会找当前目录下,使用以下指令格式化代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//prettier --config --write <文件路劲+文件名>
 prettier --config --write ./xxx,js

如果prettier在当前目录找不到配置文件,会一直向上级目录查找,直到找到或找不到。如果我们配置文件放在别的地方,则需要手工指定配置文件的路径:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// prettier --config <配置文件路径+文件名> --write <文件路劲+文件名>
prettier --config ./prettier/.prettierrc --write ./xxx.js

如果觉得每次格式化一个文件比较麻烦,可以使用下面的指令,一次格式化所有文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
prettier --config ./prettier/.prettierrc --write './*.{ts,js,css,json}'

我们一般使用这种方式的时候,就把这个配置文件写在项目根路径下,然后使用命令行一次性格式化项目下的所有文件。

以上两种方式对比

上面两种方式各有优劣,我们来分析一下各自的使用场景和一些问题:

第一种方式其实适合个人开发,第二种方式适合团队开发。

至于为什么这么说,就要考虑到二者的优先级问题了。上面两种方式如果同时存在的话,会有优先级的问题。

.prettierrc 的优先级会高于在vscode全局配置settings.json中格式化配置的优先级。

也就是说,如果你在一个项目中有 .prettierrc 配置文件,然后你又在settings.json也配置了格式化规则,那么当你在vscode编辑器中对一个文件点击鼠标右键[格式化文档]的时候,格式化规则会以 .prettierrc 为准。

所以,由于编辑器settings.json每个人的设置可能都不一样,要求每个人统一设置也不方便操作,而嵌入在项目中的配置文件则可以随着项目到达各个开发者,而且会覆盖每个开发者的不同代码喜好,真正做到团队代码统一的效果。

以上就是所有我对prettier理解的内容,希望对你有帮助。

参考链接:

https://blog.csdn.net/wxl1555/article/details/82857830

https://juejin.im/post/5bfcdee25188251d9e0c40f2

https://segmentfault.com/a/1190000012909159

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-04-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
是时候提高你的编码效率了【VSCode篇】
俗话说得好,工欲善其事必先利其器,要想工作效率高,码代码的工具用的好是必须的,这里主要说一下 Mac 上 VScode 的快捷键,帮助大家快速搭建良好的开发工具。
石燕平
2019/12/02
1.4K0
【开发工具】前端开发者更换新电脑,需要做哪些准备?
最近从Windows换到MacOS系统,借此记录一下作为前端入手新的系统需要做哪些准备:
且陶陶
2023/04/12
4060
【开发工具】前端开发者更换新电脑,需要做哪些准备?
VSCode合理配置ESLint+Prettier
昨天,我的开源项目成员给我提交了代码,我在用webstorm看他的代码时发现了一堆跟代码格式相关的黄色报错,我就问他这一堆黄色报错你的编辑器就没给你提示吗?他说他用的vscode没有提示这些报错。
神奇的程序员
2022/04/10
1.8K0
VSCode合理配置ESLint+Prettier
前端工程师vscode必备插件(20个)
按需安装。考虑到有些插件对于一些新手来说暂时用不上,因此我将分为 前端新手→前端程序员→前端工程师 三个阶段来推荐需要安装的插件。
全栈程序员站长
2022/09/17
3.2K0
前端工程师vscode必备插件(20个)
Vue 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格
安装Vetur,ESlint, Prettier - Code formatter插件
授客
2021/03/16
7.2K0
Vue 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格
协调eslint和prettier,让代码书写更加流畅
最近在和同事合作开发一个项目,忘记一开始约定好项目的规范和格式,导致大家都按照自己的习惯去配置了eslint,prettier,当合并代码后就有了下面的情形:
Jou
2022/11/07
1.7K0
协调eslint和prettier,让代码书写更加流畅
vscode 插件配置_vscode常用插件有哪些
分享一下本人目前正在使用的一套超级舒服的Vs Code插件与配置(只有开发写代码时用的,没有摸鱼时用的),每一个插件的功能就不一一介绍了,直接上菜!!!
全栈程序员站长
2022/11/09
1.2K0
vscode 插件配置_vscode常用插件有哪些
一套标准的前端代码工作流
工欲善其事,必先利其器。对于写代码而言,也是需要有一套完善的工作流(工具和流程)。
逆锋起笔
2021/03/17
1.3K0
15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化
当前,前端项目支持代码规范校验、代码格式化已经必不可少,同时需要支持代码提交前对代码格式校验预检查,这里提供一份最简单的配置供大家参考。
蓓蕾心晴
2022/05/09
4.8K2
15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化
VSCode支持Vue自动保存格式化的配置
安装三个插件:Prettier - Code formatter、ESLint、Vetur。对应的插件图片如下:
kai666666
2020/10/17
7.5K0
前端老项目接入 eslint 从配置到上线的一些思考
大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。
若川
2022/11/11
1.5K0
前端老项目接入 eslint 从配置到上线的一些思考
prettier使用指南(包含所有配置项)
prettier的配置项比较少(容易配置),且只专注于代码样式,而eslint还提供语法检查,现在的eslint也集成了formatter功能。
治电小白菜
2022/07/08
10.6K0
前端团队代码规范最佳实践,个人成长必备!
本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队的实践应用。
coder_koala
2021/12/01
7400
前端团队代码规范最佳实践,个人成长必备!
前端老项目接入 eslint 从配置到上线的一些思考
在日常需求迭代中,代码的规范与质量是编码的重要一环。Eslint 作为规则扫描器,能够对前端代码进行有效管控,避免出现低级错误,对于前端项目或多或少肯定都会看到 eslint 的相关配置。
windliang
2022/12/21
1.1K0
前端老项目接入 eslint 从配置到上线的一些思考
VSCode代码格式化设置
Vetur对于html文件默认使用的是prettyhtml,但是由于prettier也可以支持html的格式化,所以我觉得统一使用prettier对全语言的格式化是比较简洁的。
用户6094182
2020/08/18
4.3K0
vscode 前端最佳插件配置
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125833.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/22
5.8K0
vscode 前端最佳插件配置
webpack5 + webpack-chain 构建一个大型应用系列 2(附 vscode 跟 prettier 配置)
笔者使用了 webpack5 将项目进行了重构,并全程使用的 webpack-chain 来配置 webpack,每个功能也都是独立文件,可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战亦可当成 webpack 手册来学习。我开发这个项目的目的就是无论你是新手还是有经验的大佬都可以从中有所收获。此项目为想学 webpack 的同学提供了很好的实战平台,每一个 插件 每一个 loader 都会有详细的讲解及使用背景。
null仔
2020/03/02
4.1K0
【Vscode】 前端项目文件自动格式化(.Vue,.js)
【工欲善其事,必先利其器】大家用什么来开发前端项目呢,WebStorm, Atom, 还是Sublime ,这里面哪个不是大名鼎鼎,但是论轻量级,论不要钱的,论生态,Visual Studio Code都是相当强大的,VSCode这款超级编辑器,正在蚕食市场上所有IDE和编辑器的市场。只要插件运用得当,vscode也能达到商业软件效果。
DDGarfield
2022/06/23
3.1K0
Vue3入门:Vite创建项目和使用
vite是下一代前端开发与构建工具,目前官方推荐使用vite来构建项目。下面我们来看看如何创建vue3项目。
BennuCTech
2023/09/01
1.1K0
Vue3入门:Vite创建项目和使用
Prettier+Vscode setting提高前端开发效率
Qiuner
2024/09/09
2680
Prettier+Vscode setting提高前端开发效率
推荐阅读
相关推荐
是时候提高你的编码效率了【VSCode篇】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验