[TOC] >[success] # Prettier -- 專注于檢查并自動更正代碼風格 ~~~ 1.'ESLint' 主要解決了兩類問題，代碼質量和風格問題這兩個問題，但是在代碼風格解決上如果每次人為 去控制書寫其實是一件痛苦的事，因此希望有一套自動化工具，幫我們檢測代碼是否規范，如果不規范， 則自動能夠幫我們按照既定規范格式化 2.'Prettier' 聲稱自己是一個有主見的代碼格式化工具 (opinionated code formatter)，'Prettier '認為格式很重要， 不需要再思考究竟是用 'single quote'，還是 'double quote'這些亂起的格式問題，'Prettier' 幫處理。最后的結果， 'Prettier '還給予了一部分配置項，可以通過 '.prettierrc' 文件修改 3.'ESLINT' 中： 代碼質量規則 (code-quality rules) no-unused-vars no-extra-bind no-implicit-globals prefer-promise-reject-errors ... 代碼風格規則 (code-formatting rules) max-len no-mixed-spaces-and-tabs keyword-spacing comma-style ~~~ >[danger] ##### ESLint 是否可替代 Prettier ~~~ 1.'Eslint'碼風格檢查和 'Prettier'功能重疊，為什么還會出現' Prettier'， 1.1.'ESLint' 中的 'Formatting rules' 并非都提供了'fixer'， 1.2.'ESLint' 著重于 'JS/TS'，無法兼顧 'CSS、Markdown' 的代碼風格； 因此整體的代碼風格規范化還得交給 Prettier。 ~~~ [前端代碼規范化：EditorConfig + Prettier + ESLint ](https://zhuanlan.zhihu.com/p/366141969) >[info] ## Prettier 快速上手 * 安裝，`npm i prettier -D` * 檢查某個文件并輸出檢查結果，`npx prettier style.css` * 檢查并格式化某個文件，`npx prettier style.css --write` * 檢查并格式化項目所有文件，`npx prettier . --write` >[danger] ##### 插件介紹 * [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)\- 和一般的`eslint-config-xxx`不同，它不是用來共享 ESlint 配置的，而是用來關閉 ESLint 的樣式規則的，避免 ESLint 的樣式規則和 Prettier 沖突。使用該配置后，對代碼進行`prettier`和`eslint`就不會沖突了。但要注意一定要把它放在`extends`中最后的位置，避免后續的配置又把相關規則打開了。 * [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)\- 將 Prettier 集成到 ESlint 工作流中，不需要再單獨使用`prettier`命令。將 Prettier 發現的代碼樣式問題當作一條 ESLint 規則，在運行`eslint`檢查后顯示出來，也同樣可以在`--fix`時修復。需要配合`eslint-config-prettier`使用。個人使用了一下基本 OK，但是由于 Prettier 不像 ESLint 那樣是單獨的一條條規則，因此錯誤的顯示不是很友好。 [# 理解 Prettier 并用它統一你的代碼風格](https://www.meteorlxy.cn/posts/2019/08/05/understand-and-use-prettier.html) >[info] ## 忽略檢查文件.prettierignore 配置`.prettierignore` 忽略格式化文件 ~~~ /dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/* ~~~ >[info] ## Prettier 和 ESLint 沖突 * 安裝這兩個插件 ~~~ npm i eslint-plugin-prettier eslint-config-prettier -D ~~~ ~~~ 1.'eslint' 和 'Prettier' 都是對代碼風格規則上的約束工具二者必然就會出現沖突解決方法: 1.1.使用 'eslint-config-prettier'來關掉 (disable) 所有和 Prettier 沖突的 ESLint 的配置在 .eslintrc 里面將 prettier 設為最后一個 extends // .eslintrc { "extends": ["prettier"] // prettier 一定要是最后一個，才能確保覆蓋 } 1.2.使用插件'eslint-plugin-prettier',之前介紹過'plugin' 是擴展的規則，現在擴展'prettier ' // .eslintrc { "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } 1.3.將上面兩個步驟和在一起就是下面的配置，也是官方的推薦配置 // .eslintrc { "extends": ["plugin:prettier/recommended"] } ~~~ >[danger] ##### 各個配置項 ~~~ // .prettierrc.js module.exports = { // 最大長度80個字符 printWidth: 80, // 使用單引號, 默認false(在jsx中配置無效, 默認都是雙引號) singleQuote: true, // 行末分號, 默認true semi: true, // JSX雙引號 jsxSingleQuote: false, // 盡可能使用尾隨逗號（包括函數參數）,默認none,可選 none|es5|all // es5 包括es5中的數組、對象 // all 包括函數對象等所有可選 trailingComma: 'all', // 在對象文字中打印括號之間的空格。 默認true bracketSpacing: true, // 箭頭函數參數括號 默認avoid 可選 avoid| always // avoid 能省略括號的時候就省略 例如x => x // always 總是有括號 arrowParens: 'avoid', // 在文件頂部插入一個特殊的 @format 標記，指定文件格式需要被格式化。 insertPragma: false, // 行尾換行格式 endOfLine: 'auto', // html空格敏感度 htmlWhitespaceSensitivity: 'ignore', // tab縮進大小,默認為2 tabWidth: 2, // 使用tab縮進還是空格，默認false useTabs: true, // vue縮進腳本和樣式 vueIndentScriptAndStyle: false, // > 標簽放在最后一行的末尾，而不是單獨放在下一行 默認false jsxBracketSameLine: false, }; ~~~ >[danger] ##### Prettier vscode 配置 ~~~ 1.下載'prettier' 插件，然后在vscode 配置文件添加例如此時我只想格式的為'js'配置如下 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, ~~~ >[danger] ##### 注意當eslint 和 prettier 一起搭配的時候 ~~~ 1.此時Prettier不是prettier作為單獨的命令eslint-plugin-prettier運行，而是作為 ESLint 規則運行 ，將任何格式不正確的內容報告為 ESLint 錯誤。 /path/to/locations.ts 31:35 error Replace `·?·toFull(LOCATIONS_LOOKUP[location.parentId])` with `?····?·toFull(LOCATIONS_LOOKUP[location.parentId])?···` prettier/prettier ? 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option. 因此運行eslint --fix不僅可以自動修復常規 ESLint 規則，還可以格式化我們的代碼（Prettier 風格）。不用單獨執行'npx prettier' 一些指令 ~~~ >[danger] ##### 推薦閱讀這個 [參考鏈接](https://www.cnblogs.com/ssaylo/p/12806757.html) [# 搞懂 ESLint 和 Prettier](https://zhuanlan.zhihu.com/p/80574300) [Prettier看這一篇就行了 ](https://zhuanlan.zhihu.com/p/81764012?from_voters_page=true) [vscode 中 eslint prettier 和 eslint -loader 配置關系 ](https://www.cnblogs.com/guangzan/p/14057876.html)