用Prettier美化程式碼
Eslint 解決了程式碼格式檢查的問題,同時,一些有用的提示能讓我們發現 bug 和無用程式碼(如 no-unused-vars, no-extra-bind, no-implicit-globals
)。但是,eslint 並不能自動幫我們美化程式碼,自動讓程式碼風格統一,格式優美。EditorConfig 部分解決了這個問題,它解決了程式碼縮緊,行末不出現空格符等問題,但是對於統一整個程式碼的風格,這些做得還是太少了。Prettier 很好地解決了剩下的問題,通過配置,我們可以制定想要的程式碼風格,然後通過指令碼或編輯器外掛來一鍵格式化/美化程式碼。
安裝使用
安裝
# 全域性或本地安裝二選一,都能生效
npm install --save-dev prettier # 本地
npm install --g prettier # 全域性
使用
prettier [opts] [filename ...]
# 例子
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
編輯器設定
一般我們配合編輯器使用 Prettier,這樣我們在寫程式碼時即可美化程式碼,及時看到效果。以 sublime 為例,可以這麼設定:
1、安裝 JsPrettier 外掛
首先要確定已經全域性或區域性安裝了 prettier 的 npm 包。
-
ctrl/cmd + shift + p
輸入 Install Package - 然後輸入 JsPrettier 找到包並安裝
2、使用 JsPrettier
ctrl/cmd + shift + p
輸入 JsPrettier: Format Code.
點選即可格式化當前檔案程式碼。
或者設定快捷鍵 { "keys": ["super+alt+f"], "command": "js_prettier" }
。
3、編寫自己的配置檔案
如果不編寫自己的配置檔案,一般會使用 sublime JsPrettier 外掛自帶的配置檔案。我們希望使用專案自己的配置檔案,可以在專案根目錄下編寫 .prettierrc
檔案。
prettier 查詢配置的方式首先會找當前目錄下的 .prettierrc 檔案,找不到會一直向上級目錄查詢,直到找到或找不到。
參考配置
.prettierrc
{
"printWidth": 120, // 換行字串閾值
"semi": true, // 句末加分號
"singleQuote": true, // 用單引號
"trailingComma": "none", // 最後一個物件元素加逗號
"bracketSpacing": true, // 物件,陣列加空格
"jsxBracketSameLine": false, // jsx > 是否另起一行
"arrowParens": "avoid", // (x) => {} 是否要有小括號
"requirePragma": false, // 是否要註釋來決定是否格式化程式碼
"proseWrap": "preserve" // 是否要換行
}
參考文件
相關文章
- 用 Prettier 美化程式碼
- Prettier美化css/scss/sass程式碼CSS
- 使用 ESLint + Prettier 美化程式碼EsLint
- 程式碼線上美化工具
- 超人氣程式碼格式化工具prettier
- prettier 把我程式碼弄的很醜
- 【實用小技巧】idea程式碼格式美化快捷鍵Idea
- table表格美化程式碼例項
- input range美化程式碼例項
- 使用 prettier 統一程式碼格式化
- 使用 ESLint + Prettier 簡化程式碼 Review 過程EsLintView
- vscode + prettier 專治程式碼潔癖(一)VSCode
- 使用htmlprettify美化您的HTML程式碼HTML
- radio美化程式碼例項
- <input type="file">美化例項程式碼
- 單選按鈕美化效果程式碼
- 15 款程式碼語法高亮工具 美化你的程式碼
- 5分鐘學會用 ESLint+Prettier 統一前端程式碼風格EsLint前端
- 團隊程式碼規範 ESLint + Prettier + EditorConfigEsLint
- prettier + lint-staged 提交時格式化程式碼
- 美化滾動條效果程式碼例項
- <input type="file">美化效果程式碼例項
- 表單提示美化效果程式碼例項
- Vue專案使用eslint + prettier規範程式碼風格VueEsLint
- select下拉選單美化程式碼例項
- 15個原始碼語法著色來美化你的程式碼原始碼
- 建立TypeScript程式碼模板(NVS+Yarn+ESLint+Prettier+Husky)TypeScriptYarnEsLint
- 使用ESLint+Prettier來統一前端程式碼風格EsLint前端
- checkbox核取方塊美化程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- 美化<input type="range">控制元件程式碼例項控制元件
- JS Nice – JavaScript 程式碼美化和格式化工具JSJavaScript
- 借用Snippet外掛美化部落格中的程式碼
- 我為什麼推薦Prettier來統一程式碼風格
- 模擬美化select下拉選單程式碼例項
- PPT文件實用美化技巧
- Prettier 1.15程式碼格式化工具新增Angular和Vue.js支援AngularVue.js
- 程式碼風格統一: 使用husky, prettier, eslint在程式碼提交時自動格式化,並檢查程式碼。EsLint