JS代碼風格自動規整工具Prettier

問題背景

通常使用 ESLint做代碼風格檢查檢查， 和部分代碼質量檢查。

但是使用ESLint在入庫時候， 會產生很多的代碼修正工作， 需要開發者一個一個的修改。

如果很多，並且時間緊迫，甚是尷尬。

 

ESLint

http://eslint.cn/

ESLint最初是由Nicholas C. Zakas 於2013年6月創建的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。

代碼檢查是一種靜態的分析，常用於尋找有問題的模式或者代碼，並且不依賴於具體的編碼風格。對大多數編程語言來說都會有代碼檢查，一般來說編譯程序會內置檢查工具。

JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯。因為沒有編譯程序，為了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。

ESLint 的初衷是為了讓程序員可以創建自己的檢測規則。ESLint 的所有規則都被設計成可插入的。ESLint 的默認規則與其他的插件並沒有什么區別，規則本身和測試可以依賴於同樣的模式。為了便於人們使用，ESLint 內置了一些規則，當然，你可以在使用過程中自定義規則。

ESLint 使用 Node.js 編寫，這樣既可以有一個快速的運行環境的同時也便於安裝。

 

所有都是可拔插的

• 內置規則和自定義規則共用一套規則 API
• 內置的格式化方法和自定義的格式化方法共用一套格式化 API
• 額外的規則和格式化方法能夠在運行時指定
• 規則和對應的格式化方法並不強制捆綁使用

每條規則:

• 各自獨立
• 可以開啟或關閉（沒有什么可以被認為“太重要所以不能關閉”）
• 可以將結果設置成警告或者錯誤

另外:

• ESLint 並不推薦任何編碼風格，規則是自由的
• 所有內置規則都是泛化的

項目:

• 通過豐富文檔減少溝通成本
• 盡可能的簡單透明
• 相信測試的重要性

http://eslint.cn/docs/rules/

如下等等，很多對應使用場景都有對應的規則。

		array-bracket-newline	在數組開括號后和閉括號前強制換行
		array-bracket-spacing	強制數組方括號中使用一致的空格
		array-element-newline	強制數組元素間出現換行
		block-spacing	禁止或強制在代碼塊中開括號前和閉括號后有空格
		brace-style	強制在代碼塊中使用一致的大括號風格
		camelcase	強制使用駱駝拼寫法命名約定

 

Prettier

https://github.com/prettier/prettier

對代碼的風格進行自動格式化處理，例如 縮進使用4個空格。

 

Prettier 是一個前端的代碼格式化工具，支持列表如下：

• JavaScript，包括 ES2017
• JSX
• Flow
• TypeScript
• CSS, LESS, and SCSS
• JSON
• GraphQL

簡而言之，這個工具能夠使輸出代碼保持風格一致。（詳見這篇博文：A Prettier JavaScript Formatter）

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

 

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

 

Output

foo(
  reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne() );

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

---

 

與ESlint集成

https://www.jianshu.com/p/d6a69eb08f07

https://zhuanlan.zhihu.com/p/38267286

此兩篇文章介紹的都是與代碼嵌入 ESlint配置中，作為ESlint檢查的一部分使用。

 

CI集成

還有其它使用方法

https://prettier.io/docs/en/why-prettier.html

https://prettier.io/docs/en/precommit.html

在入庫的動作執行的時候，將改動的代碼進行修正， 真正到庫中的代碼，則是完全符合要求的。

Pre-commit Hook

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via git add before you commit.

 

Option 1. lint-staged

Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)

Install it along with husky:

yarn add lint-staged husky --dev

and add this config to your package.json:

{
  "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,json,css,md}": ["prettier --write", "git add"] } } 

See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.

 

 

工具集成

https://prettier.io/docs/en/editors.html

Sublime Text

Sublime Text support is available through Package Control and the JsPrettier plug-in.

 

 

 

 

https://prettier.io/docs/en/editors.html