## 一、概述 我们知道，ESLint大用来进行代码的校验，而Prettier则是用来统一代码风格的利器； ## 二、安装 ``` npm i -D prettier ``` 配合ESLint检测代码风格； ``` npm i -D eslint-plugin-prettier ``` eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。接下来，我们需要在rules中添加，`"prettier/prettier": "error"`，表示被prettier标记的地方抛出错误信息。 ``` //.eslintrc.js { "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } ``` ## 三、配置 一共有三种方式支持对Prettier进行配置： 1. 根目录创建`.prettierrc`文件，能够写入YML、JSON的配置格式，并且支持`.yaml/.yml/.json/.js`后缀； 2. 根目录创建`.prettier.config.js`文件，并对外export一个对象； 3. 在`package.json`中新建`prettier`属性。 一般用.prettierrc文件来配置， ~~~ module.exports = { "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80 "tabWidth": 2, //一个tab代表几个空格数，默认为80 "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减 "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号 "semi": true, //行位是否使用分号，默认为true "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>" "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar } "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。 } ~~~ 实例：