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