## 一、概述 我們知道，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相同。 } ~~~ 實例：