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

参考文档

相关文章
|
JavaScript 前端开发
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。 下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
1262 29
在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
|
2月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
10月前
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
96 0
|
JavaScript 前端开发
ESlint + Stylelint + VSCode自动格式化代码(2023)
ESlint + Stylelint + VSCode自动格式化代码(2023)
237 0
|
4月前
|
JavaScript
VueCli3+TypeScript3项目显示Markdown内容
VueCli3+TypeScript3项目显示Markdown内容
94 0
|
前端开发 JavaScript API
使用 Prism.js 对代码进行语法高亮
通常我们在开发博客网站或者技术社区(类似掘金)这类网站的时候,就会有需求“对代码进行语法高亮”,本文主要记录笔者在开发的时候遇到的问题以及解决方案。
1528 0
|
JavaScript
VSCode格式化html标签代码
VSCode问题总结
1142 0
VSCode格式化html标签代码
|
自然语言处理 前端开发 JavaScript
开发一个 vscode 插件,提升 markdown 排版可读性🌿
开发一个 vscode 插件,提升 markdown 排版可读性🌿
440 0
|
前端开发 Shell API
使Prettier一键格式化WXSS(下集)
今天介绍利用 Git Hooks 钩子实现提交代码自动执行此前的 ESLint、Prettier 命令,以保证我们提交的代码是不丑的。
156 0
使Prettier一键格式化WXSS(下集)
|
JSON 资源调度 前端开发
使Prettier一键格式化WXSS(上集)
使Prettier一键格式化WXSS(上集)
249 0
使Prettier一键格式化WXSS(上集)