用 Prettier 美化代码

简介: Eslint 解决了代码格式检查的问题,同时,一些有用的提示能让我们发现 bug 和无用代码(如 `no-unused-vars, no-extra-bind, no-implicit-globals`)。但是,eslint 并不能自动帮我们美化代码,自动让代码风格统一,格式优美。EditorConfig 部分解决了这个问题,它解决了代码缩紧,行末不出现空格符等问题,但是对于统一整个代码的风格,这

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、安装 Js​Prettier 插件

首先要确定已经全局或局部安装了 prettier 的 npm 包。

  • ctrl/cmd + shift + p 输入 Install Package
  • 然后输入 JsPrettier 找到包并安装

2、使用 Js​Prettier

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"          // 是否要换行
}

参考文档

相关文章
|
Ubuntu Linux 网络安全
Linux系统初始化脚本
一款支持Rocky、CentOS、Ubuntu、Debian、openEuler等主流Linux发行版的系统初始化Shell脚本,涵盖网络配置、主机名设置、镜像源更换、安全加固等多项功能,适配单/双网卡环境,支持UEFI引导,提供多版本下载与持续更新。
395 0
Linux系统初始化脚本
|
6月前
|
前端开发 开发工具 开发者
HarmonyOS NEXT实战:加载本地网页资源
本教程介绍如何在HarmonyOS中使用Web组件加载本地页面和资源,通过实战示例展示如何优化应用启动体验、实现页面跳转及动态加载HTML内容,适用于教育和开发学习场景。
231 0
|
消息中间件 Java Kafka
开发者如何使用云消息队列 Kafka 版
【10月更文挑战第15天】开发者如何使用云消息队列 Kafka 版
531 98
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
1191 2
|
开发工具 uml git
AOSP源码下载方法,解决repo sync错误:android-13.0.0_r82
本文分享了下载AOSP源码的方法,包括如何使用repo工具和处理常见的repo sync错误,以及配置Python环境以确保顺利同步特定版本的AOSP代码。
2527 0
AOSP源码下载方法,解决repo sync错误:android-13.0.0_r82
|
SQL 缓存 数据库连接
拯救php性能的神器webman-数据库
Webman 框架与这些最佳数据库管理实践的结合,可为应用程序提供快速响应的用户体验,高吞吐量,提升应用程序的整体性能表现。在对数据库交互进行设计和开发时,持续关注性能指标和优化,确保数据库层面不会成为应用程序的瓶颈,这样便能充分利用 Webman 来提升 PHP 应用的性能。
537 4
|
存储 安全 测试技术
【超实用却暗藏杀机】sshpass:一键免密SSH登录的神器,为何生产环境却要敬而远之?探秘背后的安全隐患与替代方案!
【8月更文挑战第16天】sshpass 是一款便捷工具,可实现自动化SSH登录,简化脚本中的远程连接流程。通过后台自动处理密码输入,便于执行远程操作,如 `sshpass -p 'yourpassword' ssh user@remotehost`。也可结合更多SSH选项使用,例如指定私钥文件。然而,因需明文传递密码,存在较大安全隐患,不适于生产环境;推荐使用公钥认证以增强安全性。
1148 4
|
算法
《黑神话:悟空》中的环境渲染技术
【8月更文第26天】 随着游戏行业的不断发展,玩家对于游戏画面质量的要求也越来越高。《黑神话:悟空》作为一款备受期待的游戏大作,其精美的画质和细腻的环境渲染效果无疑给玩家带来了前所未有的视觉体验。本文将重点探讨《黑神话:悟空》中所采用的一些高级渲染技术及其背后的实现原理。
470 0
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
502 1
|
索引 Python
BackTrader 中文文档(十二)(2)
BackTrader 中文文档(十二)
410 0