开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

ESLint 可以让我们的代码格式变得更加规范，但是同样的它也会带来开发时编码复杂度上升的问题。在写代码过程中经常会被eslint搞得头疼，代码不符合规范就报警告，之前的做法就是直接禁用掉Eslint，如今了解到Prettier之后，才发现Prettier和eslint配合使用真香。

什么是Prettier

Prettier官网

一个代码格式化工具
直接集成到 VSCode 之中
保存时让代码直接符合 ESLint 标准

`Prettier` + `eslint`

要实现保存时让代码直接符合Eslint标准，需要进行一些配置

安装Prettier

在VSCode中搜索安装Prettier

在根目录新建perttier 配置文件.prettierrc

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

勾选`Format On Save`

在VSCode中打开设置面板，搜索save，勾选

设置prettier为默认格式化

鼠标右键点击，选择使用...格式化文档，选择prettier为默认

解决冲突

完成以上配置后，还需要解决prettier和默认配置的一些冲突

VSCode 默认一个 tab 等于 4 个空格，而 ESLint 为两个空格

在设置中，将下图位置设置为2

`ESLint`默认方法名和小括号之间加空格，prettier默认不加

在.eslintrc.js 配置文件中新加一条规则

'space-before-function-paren': 'off'

重启项目后，perttier 和 ESLint 便可以完美的的配合使用

之后只要保存代码，prettier会帮我们自动格式化代码，使其符合Eslint标准

代码格式化工具Prettier

前言

什么是Prettier

Prettier + eslint