整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用 Prettier 美化你的代码

使用 Prettier 美化你的代码

家好,我是前端西瓜哥。今天带大家来学习 Prettier。

为什么要用 Prettier?

Prettier 是一款流行的代码格式化工具。它支持的语言相当多。

它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。

Prettier 的优点:

  1. 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;
  2. 支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。

但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。

比如有个 printWidth 的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。

上手 Prettier

下面我们就来上手 Prettier。

先是安装:

yarn add --dev --exact prettier
# 或者是
npm install --save-dev --save-exact prettier

这里我们用了 exact 配置项来锁定版本号,这是因为不同版本 prettier 的代码风格可能有细微的不同。prettier 并不保证主版本相同的版本下风格是一致的。

使用命令对项目下所有文件进行格式:

npx prettier --write .

你也可以指定目录,比如 /src;或是用通配符指定特定的文件,比如 app 目录下的所有 .test.js 结尾的文件可以用 app/**/*.test.js

另外,你可以创建 .prettierignore 文件来指定不需要格式化的文件。如:

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

保存时自动格式化

如果你想要在保存时格式化,一般都是要用到编辑器的插件。对于 VSCode 来说,你需要安装一个名为 Prettier 的插件,然后再加上 VSCode 配置(项目下加一个 .vscode/setting.json 文件):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式器改为 prettier
  "editor.formatOnSave": true // 开启 “保存自动格式化”
}

或者你不开启保存自动格式化,可以在觉得需要的时候右键选择 “Format Document“,或者用快捷键。

Prettier 和 ESLint 比较

ESLint 是一种 Linter,能够分析代码并准确定位错误。它支持 代码质量 以及 代码风格 的检查。

代码质量,比如启用 "no-unused-vars",变量如果声明却未被使用会被认为不正确。

代码风格的能力类似 Prettier,比如 "semi": "error" 表示必须用分号结尾,对应 Prettier 的 "semi": true

Prettier 不会标识哪些地方出问题,在编辑器中用波浪线标出来。我用 ESLint 写新的功能时,因为代码是半成品,总能看到一堆的错误提示,体验确实不好。

总的来说,Prettier 只做代码格式化;ESLint 既能做代码质量检查,也能做代码风格检查和修正

一般来说,项目最好加上 ESLint,这对我们改善代码质量很有帮助。对于代码格式化,我们可以用 ESLint 或是 Prettier。

如果想用 Prettier 格式化 JS,你需要在 ESLint 配置文件中使用 eslint-config-prettier,将 eslint 中和 prettier 冲突的规则关闭。否则你会看到代码被格式化了两次,总是会不符合其中一方的规则。

另外,ESLint 不支持格式化 CSS,还是有必要装上 Prettier 或 stylelint 的。

TypeScript 团队在实现 typescript-eslint 时,认为 ESLint 不应该做代码格式化,而应该是一个真正的只检查错误的 Linter(可能他们被格式化的实现弄烦了),而像是 Prettier 这类的 Formatter 才应该做代码格式化工作。具体可以看下面这篇文章:

https://typescript-eslint.io/docs/linting/troubleshooting/formatting/

结尾

Prettier 是一款代码格式化工具,开箱即用,默认支持语言众多,风格优美,可以让我们轻装上阵。如果你自己做一些小项目,用方便的 Prettier 是不错的选择。

我是前端西瓜哥,欢迎关注我,学习更多前端知识。

作者:田小波
来源:https://www.cnblogs.com/nullllun/p/8358146.html

. 背景

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。相对于另一种数据交换格式 XML,JSON 有着诸多优点。比如易读性更好,占用空间更少等。在 web 应用开发领域内,得益于 JavaScript 对 JSON 提供的良好支持,JSON 要比 XML 更受开发人员青睐。所以作为开发人员,如果有兴趣的话,还是应该深入了解一下 JSON 相关的知识。

本着探究 JSON 原理的目的,我将会在这篇文章中详细向大家介绍一个简单的JSON解析器的解析流程和实现细节。由于 JSON 本身比较简单,解析起来也并不复杂。所以如果大家感兴趣的话,在看完本文后,不妨自己动手实现一个 JSON 解析器。

好了,其他的话就不多说了,接下来让我们移步到重点章节吧。

2. JSON 解析器实现原理

JSON 解析器从本质上来说就是根据 JSON 文法规则创建的状态机,输入是一个 JSON 字符串,输出是一个 JSON 对象。一般来说,解析过程包括词法分析和语法分析两个阶段。词法分析阶段的目标是按照构词规则将 JSON 字符串解析成 Token 流,比如有如下的 JSON 字符串:

{
 "name" : "小明",
 "age": 18
}

结果词法分析后,得到一组 Token,如下:

{、 name、 :、 小明、 ,、 age、 :、 18、 }



词法分析解析出 Token 序列后,接下来要进行语法分析。语法分析的目的是根据 JSON 文法检查上面 Token 序列所构成的 JSON 结构是否合法。

比如 JSON 文法要求非空 JSON 对象以键值对的形式出现,形如 object={string : value}。如果传入了一个格式错误的字符串,比如

{
 "name", "小明"
}

那么在语法分析阶段,语法分析器分析完 Token name后,认为它是一个符合规则的 Token,并且认为它是一个键。

接下来,语法分析器读取下一个 Token,期望这个 Token 是 :。但当它读取了这个 Token,发现这个 Token 是,,并非其期望的:,于是文法分析器就会报错误。



这里简单总结一下上面两个流程,词法分析是将字符串解析成一组 Token 序列,而语法分析则是检查输入的 Token 序列所构成的 JSON 格式是否合法。这里大家对 JSON 的解析流程有个印象就好,接下来我会详细分析每个流程。

2.1 词法分析

在本章开始,我说了词法解析的目的,即按照“构词规则”将 JSON 字符串解析成 Token 流。请注意双引号引起来词--构词规则,所谓构词规则是指词法分析模块在将字符串解析成 Token 时所参考的规则。

在 JSON 中,构词规则对应于几种数据类型,当词法解析器读入某个词,且这个词类型符合 JSON 所规定的数据类型时,词法分析器认为这个词符合构词规则,就会生成相应的 Token。

这里我们可以参考http://www.json.org/对 JSON 的定义,罗列一下 JSON 所规定的数据类型:

  • BEGIN_OBJECT({)
  • END_OBJECT(})
  • BEGIN_ARRAY([)
  • END_ARRAY(])
  • NULL(null)
  • NUMBER(数字)
  • STRING(字符串)
  • BOOLEAN(true/false)
  • SEP_COLON(:)
  • SEP_COMMA(,)

当词法分析器读取的词是上面类型中的一种时,即可将其解析成一个 Token。我们可以定义一个枚举类来表示上面的数据类型,如下:

在解析过程中,仅有 TokenType 类型还不行。我们除了要将某个词的类型保存起来,还需要保存这个词的字面量。所以,所以这里还需要定义一个 Token 类。用于封装词类型和字面量,如下:

public class Token {
 private TokenType tokenType;
 private String value;
 // 省略不重要的代码
}

定义好了 Token 类,接下来再来定义一个读取字符串的类。如下:

有了 TokenType、Token 和 CharReader 这三个辅助类,接下来我们就可以实现词法解析器了。

上面的代码是词法分析器的实现,部分代码这里没有贴出来,后面具体分析的时候再贴。先来看看词法分析器的核心方法 start,这个方法代码量不多,并不复杂。其通过一个死循环不停的读取字符,然后再根据字符的类型,执行不同的解析逻辑。

上面说过,JSON 的解析过程比较简单。原因在于,在解析时,只需通过每个词第一个字符即可判断出这个词的 Token Type。比如:

  • 第一个字符是{、}、[、]、,、:,直接封装成相应的 Token 返回即可
  • 第一个字符是n,期望这个词是null,Token 类型是NULL
  • 第一个字符是t或f,期望这个词是true或者false,Token 类型是BOOLEAN
  • 第一个字符是",期望这个词是字符串,Token 类型为String
  • 第一个字符是0~9或-,期望这个词是数字,类型为NUMBER

正如上面所说,词法分析器只需要根据每个词的第一个字符,即可知道接下来它所期望读取的到的内容是什么样的。如果满足期望了,则返回 Token,否则返回错误。

下面就来看看词法解析器在碰到第一个字符是n和"时的处理过程。先看碰到字符n的处理过程:

private Token readNull() throws IOException {
 if (!(charReader.next()=='u' && charReader.next()=='l' && charReader.next()=='l')) {
 throw new JsonParseException("Invalid json string");
 }
 return new Token(TokenType.NULL, "null");
}

上面的代码很简单,词法分析器在读取字符n后,期望后面的三个字符分别是u,l,l,与 n 组成词 null。如果满足期望,则返回类型为 NULL 的 Token,否则报异常。readNull 方法逻辑很简单,不多说了。

接下来看看 string 类型的数据处理过程:

string 类型的数据解析起来要稍微复杂一些,主要是需要处理一些特殊类型的字符。JSON 所允许的特殊类型的字符如下:

\"
\
\b
\f
\n
\r
\t
\u four-hex-digits
\/

最后一种特殊字符\/代码中未做处理,其他字符均做了判断,判断逻辑在 isEscape 方法中。在传入 JSON 字符串中,仅允许字符串包含上面所列的转义字符。如果乱传转义字符,解析时会报错。

对于 STRING 类型的词,解析过程始于字符",也终于"。所以在解析的过程中,当再次遇到字符",readString 方法会认为本次的字符串解析过程结束,并返回相应类型的 Token。

上面说了 null 类型和 string 类型的数据解析过程,过程并不复杂,理解起来应该不难。至于 boolean 和 number 类型的数据解析过程,大家有兴趣的话可以自己看源码,这里就不在说了。

2.2 语法分析

当词法分析结束后,且分析过程中没有抛出错误,那么接下来就可以进行语法分析了。语法分析过程以词法分析阶段解析出的 Token 序列作为输入,输出 JSON Object 或 JSON Array。语法分析器的实现的文法如下:

object={} | { members }
members=pair | pair , members
pair=string : value
array=[] | [ elements ]
elements=value | value , elements
value=string | number | object | array | true | false | null

语法分析器的实现需要借助两个辅助类,也就是语法分析器的输出类,分别是 JsonObject 和 JsonArray。

代码如下:

语法解析器的核心逻辑封装在了 parseJsonObject 和 parseJsonArray 两个方法中,接下来我会详细分析 parseJsonObject 方法,parseJsonArray 方法大家自己分析吧。

parseJsonObject 方法实现如下:

parseJsonObject 方法解析流程大致如下:

  1. 读取一个 Token,检查这个 Token 是否是其所期望的类型
  2. 如果是,更新期望的 Token 类型。否则,抛出异常,并退出
  3. 重复步骤1和2,直至所有的 Token 都解析完,或出现异常

上面的步骤并不复杂,但有可能不好理解。这里举个例子说明一下,有如下的 Token 序列:

{、 id、 :、 1、 }

parseJsonObject 解析完 { Token 后,接下来它将期待 STRING 类型的 Token 或者 END_OBJECT 类型的 Token 出现。于是 parseJsonObject 读取了一个新的 Token,发现这个 Token 的类型是 STRING 类型,满足期望。

于是 parseJsonObject 更新期望Token 类型为 SEL_COLON,即:。如此循环下去,直至 Token 序列解析结束或者抛出异常退出。

上面的解析流程虽然不是很复杂,但在具体实现的过程中,还是需要注意一些细节问题。比如:

在 JSON 中,字符串既可以作为键,也可以作为值。作为键时,语法分析器期待下一个 Token 类型为 SEP_COLON。而作为值时,则期待下一个 Token 类型为 SEP_COMMA 或 END_OBJECT。

所以这里要判断该字符串是作为键还是作为值,判断方法也比较简单,即判断上一个 Token 的类型即可。如果上一个 Token 是 SEP_COLON,即:,那么此处的字符串只能作为值了。否则,则只能做为键。

对于整数类型的 Token 进行解析时,简单点处理,可以直接将该整数解析成 Long 类型。但考虑到空间占用问题,对于 [Integer.MIN_VALUE, Integer.MAX_VALUE]范围内的整数来说,解析成 Integer 更为合适,所以解析的过程中也需要注意一下。

3. 测试及效果展示

为了验证代码的正确性,这里对代码进行了简单的测试。测试数据来自网易音乐,大约有4.5W个字符。为了避免每次下载数据,因数据发生变化而导致测试不通过的问题。我将某一次下载的数据保存在了 music.json 文件中,后面每次测试都会从文件中读取数据。

关于测试部分,这里就不贴代码和截图了。大家有兴趣的话,可以自己下载源码测试玩玩。

测试就不多说了,接下来看看 JSON 美化效果展示。这里随便模拟点数据,就模拟王者荣耀里的狄仁杰英雄信息吧(对,这个英雄我经常用)。如下图:



关于 JSON 美化的代码这里也不讲解了,并非重点,只算一个彩蛋吧。

4. 写作最后

到此,本文差不多要结束了。本文对应的代码已经放到了 github 上,需要的话,大家可自行下载。(微信不支持外跳,可点击文末阅读原文直达)

传送门:https://github.com/code4wt/JSONParser

这里需要声明一下,本文对应的代码实现了一个比较简陋的 JSON 解析器,实现的目的是探究 JSON 的解析原理。JSONParser 只算是一个练习性质的项目,代码实现的并不优美,而且缺乏充足的测试。

同时,限于本人的能力(编译原理基础基本可以忽略),我并无法保证本文以及对应的代码中不出现错误。如果大家在阅读代码的过程中,发现了一些错误,或者写的不好的地方,可以提出来,我来修改。如果这些错误对你造成了困扰,这里先说一声很抱歉。

最后,本文及实现主要参考了一起写一个JSON解析器和如何编写一个JSON解析器两篇文章及两篇文章对应的实现代码,在这里向着两篇博文的作者表示感谢。好了,本文到此结束,祝大家生生活愉快!再见。

参考

一起写一个JSON解析器

http://www.cnblogs.com/absfree/p/5502705.html

如何编写一个JSON解析器

https://www.liaoxuefeng.com/article/994977272296736

介绍JSON

http://json.org/json-zh.html

写一个 JSON、XML 或 YAML 的 Parser 的思路是什么?

www.zhihu.com/question/24640264/answer/80500016

在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的:

因为很多接口它对参数有要求,比如只能是字符串之类的。

这时候,就需要我们将对象转换为字符串进行输出,JSON.stringify() 方法就可以帮我们实现将对象转为字符串的过程。

方法描述

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。

语法

JSON.stringify(value[, replacer [, space]])

参数说明:

  • value 将要序列化成 一个 JSON 字符串的值。
  • replacer(可选)如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。
  • space(可选) 指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。如果省略space,则将生成返回值文本,而没有任何额外空格。如果 space是一个数字,则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10,则文本缩进 10 个空格。如果 space是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。如果 space 是长度大于 10个字符的字符串,则使用前 10 个字符。

返回值

一个表示给定值的JSON字符串。

常规用法

console.log(JSON.stringify({name: "obj"}))
// '{"name": "obj"}'

repalacer 参数

replacer 参数可以是一个函数或者一个数组。作为函数,它有两个参数,键(key)和值(value),它们都会被序列化。

在开始时, replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

  • 如果返回一个 Number,转换成相应的字符串作为属性值被添加入 JSON 字符串。
  • 如果返回一个 String,该字符串作为属性值被添加入 JSON 字符串。
  • 如果返回一个 Boolean, "true" 或者 "false" 作为属性值被添加入 JSON 字符串。
  • 如果返回任何其他对象,该对象递归地序列化成 JSON 字符串,对每个属性调用 replacer 方法。除非该对象是一个函数,这种情况将不会被序列化成 JSON 字符串。
  • 如果返回 undefined,该属性值不会在 JSON 字符串中输出。

有以下对象:

const data=[
    {
        name: "person1",
        sex: 0,
        age: 18,
        isStudent: true
    },
    {
        name: "person2",
        sex: 1,
        age: 25,
        isStudent: false
    },
    {
        name: "person3",
        sex: 0,
        age: 15,
        isStudent: true
    }
]

接下来我们针对这个对象做各种需求实现。

只输出姓名和性别

const res=JSON.stringify(data, ["name", "sex"])
console.log(res);
// `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]`

JSON.stringify() 提供了分离出自己需要的那部分数据。

将性别转为中文字符

const res=JSON.stringify(data, (key, value)=> {
    if (key=='sex') {
        return ["女", '男'][value];
    }
    return value;
})
console.log(res);
// `[{"name":"person1","sex":"女","age":18,"isStudent":true},{"name":"person2","sex":"男","age":25,"isStudent":false},{"name":"person3","sex":"女","age":15,"isStudent":true}]`

JSON.stringify() 提供了回调函数做一个映射关系。

space 参数

const res=JSON.stringify(data, ["name", "sex"],4)
console.log(res);

输出如下:

这里使用了 4 个空格作为层级缩进。

注意:使用 “\t” 得到的结果和使用 4 个空格得到的结果看起来很像,但实际不是一回事。

总结

JSON.stringify() 方法可以通过参数控制输出的数据和格式,灵活应用它会大大提高我们的工作效率。

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!