Skip to content

Instantly share code, notes, and snippets.

@riskers riskers/README.md
Last active Aug 1, 2019

Embed
What would you like to do?
从 prettier 看前端工程化

prettier 是更强大的 editorconfig ,读取根目录的 .editorconfig.prettierrc 去执行格式化代码的命令。


从之前的 editorconfig + ESLint + husky 来组成的前端代码风格的实践因为 TypeScript 的到来,前端的工程体系又加入了 TSLint 。

而 TSLint 远远不如 ESLint,很多 ESLint 上有的比如 = 两边的空格数量在 TSLint 上是不检查的。这时候 prettier 又出来了,它仅仅做 Lint 里代码风格检查的那一部分,至于代码质量检查它是不管的:

Lint = 风格检查 + 质量检查

整体来看,prettier 是比 editorconfig 强大的,可以代替 editorconfig,而 ESLint / TSLint 只配置质量检查的那一部分就好了。

最后,ESLint / TSLint 对于 prettier 还有一些配置兼容问题( TSLint 里的默认的风格检查部分 ),使用他们解决:

这样,就变成了 prettier + ESLint / TSLint + husky


editorconfig 以后只能在非前端项目用了

@riskers

This comment has been minimized.

Copy link
Owner Author

commented Mar 13, 2019

EditorConfig

What is EditorConfig?
官网给出的答案是:editorconfig帮助开发人员在不同的编辑器和ide之间定义和维护一致的编码风格。
简单来说就是跨编辑器使用同一份代码缩进等配置

Prettier

有了一些基本的配置,以后写的代码就可以比较规范一点点点,但是原来的旧代码怎么办呢?
不可能一个文件一个文件去打开吧,不完全统计 项目有上千个编辑的文件….一个一个去手动打开不符合程序员的风格

Prettier就是为我们做这些事情的:

  1. install: npm i --save-dev prettier
  2. .prettierrc: https://prettier.io/docs/en/configuration.html
  3. package.json 添加脚本:
"prettier": "prettier --write ./src"
  1. 创建 .prettierignore 文件,用来忽略一些文件 && 目录
  2. npm run prettier 呼呼 看到提示一千个文件更改记录 哈哈哈

ESLint

有了上面介绍的 editor、prettier还是远远不够的,因为 js语法 不是很严格,比如有没有分号啊 之类的问题还是要用 eslint 来约束的。


@riskers

This comment has been minimized.

Copy link
Owner Author

commented Aug 1, 2019

EditorConfig VS Prettier:

  • EditorConfig 是编辑器绑定
  • Prettier 是项目绑定
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.