用 Prettier 美化代码
Eslint 解决了代码格式检查的问题,同时,一些有用的提示能让我们发现 bug 和无用代码(如 no-unused-vars, no-extra-bind, no-implicit-globals
)。但是,eslint 并不能自动帮我们美化代码,自动让代码风格统一,格式优美。EditorConfig 部分解决了这个问题,它解决了代码缩紧,行末不出现空格符等问题,但是对于统一整个代码的风格,这些做得还是太少了。Prettier 很好地解决了剩下的问题,通过配置,我们可以制定想要的代码风格,然后通过脚本或编辑器插件来一键格式化/美化代码。
安装使用
安装
# 全局或本地安装二选一,都能生效
npm install --save-dev prettier # 本地
npm install --g prettier # 全局
使用
prettier [opts] [filename ...]
# 例子
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
编辑器设置
一般我们配合编辑器使用 Prettier,这样我们在写代码时即可美化代码,及时看到效果。以 sublime 为例,可以这么设置:
1、安装 JsPrettier 插件
首先要确定已经全局或局部安装了 prettier 的 npm 包。
ctrl/cmd + shift + p
输入 Install Package- 然后输入 JsPrettier 找到包并安装
2、使用 JsPrettier
ctrl/cmd + shift + p
输入 JsPrettier: Format Code.
点击即可格式化当前文件代码。
或者设置快捷键 { "keys": ["super+alt+f"], "command": "js_prettier" }
。
3、编写自己的配置文件
如果不编写自己的配置文件,一般会使用 sublime JsPrettier 插件自带的配置文件。我们希望使用项目自己的配置文件,可以在项目根目录下编写 .prettierrc
文件。
prettier 查找配置的方式首先会找当前目录下的 .prettierrc 文件,找不到会一直向上级目录查找,直到找到或找不到。
参考配置
.prettierrc {"printWidth": 120, // 换行字符串阈值"semi": true, // 句末加分号"singleQuote": true, // 用单引号"trailingComma": "none", // 最后一个对象元素加逗号"bracketSpacing": true, // 对象,数组加空格"jsxBracketSameLine": false, // jsx > 是否另起一行"arrowParens": "avoid", // (x) => {} 是否要有小括号"requirePragma": false, // 是否要注释来决定是否格式化代码"proseWrap": "preserve" // 是否要换行
}
参考文档
- Formatting Code with Prettier
- Prettier Options
- react prettier script
- sublime prettier package
用 Prettier 美化代码相关推荐
- 使用 Prettier 美化你的代码
大家好,我是前端西瓜哥.今天带大家来学习 Prettier. 为什么要用 Prettier? Prettier 是一款流行的代码格式化工具.它支持的语言相当多. 它很纯粹,就一个代码格式化工具,并不会 ...
- 【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录 前言 创建项目 安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
- Hexo之Next主题美化代码
我分别美化了几个不同版本的Next主题,这里把美化代码公布出来,第一种Next版本小于7.3可使用 直接修改 \themes\next\source\css\_custom 将以下美化过程复制到cus ...
- Word美化代码块样式
Word美化代码块样式 效果 美化方法只是修改样式,不会自动高亮,高亮是ide完成的,美化只是修改下字体大小,加个底色 新建样式 字体: (中文) 微软雅黑, (默认) 微软雅黑, 字体颜色: 文字 ...
- 使用Prettier格式化代码
Prettier 文档 Prettier Prettier 用来检查代码风格问题,它支持多种语言,我们这里讨论关于 JavaScript 的,它主要解决的问题是:应该使用单引号还是双引号,什么地方 ...
- 不一样的 LaTeX 教程:使用 listings 宏包美化代码
简介 LaTeX 中插入代码常用到 listings 宏包.利用 listing 宏包的相关设置可以大幅美化代码. 获得更好的阅读体验,请关注微信公众号:极与客. 代码基础框架 引入 listings ...
- table表格美化代码实例
表单经常用来阻止数据非常的好用,但是通常默认状态下的表格是很难看的,所以对它最好要有些基本的优化美观,下面就是一段能够对表格进行简单美化的代码实例,希望能够给大家带来借鉴作用. 代码如下: 01 02 ...
- 怎样美化html文本框,HTML/css文本框样式美化代码
HTML/CSS文本框样式美化代码 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: style="width: 106; height: 21" οnmοuseοut=&q ...
- 自己乱改的美化代码……
在原美化代码上修改的-- /*编辑器和代码显示的字体*/ .ace_content, code {} body {display: flex;min-height: 100vh;flex-direct ...
最新文章
- linux用户层驱动--VFIO(五)
- 机器学习-分类算法-逻辑回归13
- ngixn+tomcat负载均衡 动静分离配置 (nginx反向代理)
- DateUtils常用方法
- 互联网晚报 | 8月12日 星期四 | 苏宁易购零售云将迈入“万店时代”;理想汽车今日港股上市;好未来励步推素质教育新产品...
- 半小时让你快速入门linux掌握基础命令
- 找到dht网络的节点了
- Mac adb 安装
- “猿式浪漫”:Java小白也能写出的表白程序
- .Net中加密解密相关知识
- Linux中的基本命令无法使用,报Command not found的错误的解决方法
- 时序预测 | MATLAB实现LSTM长短期记忆神经网络时间序列预测
- MySQL查询优化利刃-EXPLAIN
- sublime 安装扩展 sublimelinter phpmd
- 搜狗开启AI之路:招股书90次提到AI,王小川持股超10亿
- SK-YCC营销软件让我业务量上一台阶
- dnf修改服务器制裁24,DNF关于对非法第三方软件封号制裁的重申
- 简易的HTML网页设计
- vm中装linux换iso文件报错该光盘无法被挂载,虚拟机VMware下安装RedHat Linux 9.0 图解教程...
- 串口服务器(MOXA)配置