使用ESLint+Prettier來統一前端代碼風格

來自專欄自然醒的前端圈5 人贊了文章

加分號還是不加分號？tab還是空格？你還在為代碼風格與同事爭論得面紅耳赤嗎？

正文之前，先看個段子放鬆一下： 去死吧！你這個異教徒！

想起自己剛入行的時候，從svn上把代碼checkout下來，看到同事寫的代碼，大括弧居然換行了。心中暗罵，這個人是不是個**，大括弧為什麼要換行？年輕氣盛的我，居然滿腔怒火，將空行一一刪掉。

所以，團隊關於代碼風格必須遵循兩個基本原則：

1. 少數服從多數；
2. 用工具統一風格。

本文將介紹，如何使用ESLint + Prettier來統一我們的前端代碼風格。

Prettier是什麼？

首先，對應ESLint大多都很熟悉，用來進行代碼的校驗，但是Prettier（直譯過來就是"更漂亮的"??）聽得可能就比較少了。js作為一門靈活的弱類型語言，代碼風格千奇百怪，一千個人寫js就有一千種寫法。雖然js沒有官方推薦的代碼規範，不過社區有些比較熱門的代碼規範，比如standardjs、airbnb。使用ESLint配合這些規範，能夠檢測出代碼中的潛在問題，提高代碼質量，但是並不能完全統一代碼風格，因為這些代碼規範的重點並不在代碼風格上（雖然有一些限制）。

下面開始安利，Prettier。

Prettier是一個能夠完全統一你和同事代碼風格的利器，假如你有個c++程序員轉行過來寫前端的同事，你發現你們代碼風格完全不一樣，你難道要一行行去修改他的代碼嗎，就算你真的去改，你的需求怎麼辦，所以沒有人真的願意在保持代碼風格統一上面浪費時間。選擇Prettier能夠讓你節省出時間來寫更多的bug（不對，是修更多的bug），並且統一的代碼風格能保證代碼的可讀性。

看看Prettier乾的好事。

唯一的遺憾是，暫時還不能格式化vue模版文件中template部分。

ESLint 與 Prettier配合使用

首先肯定是需要安裝prettier，並且你的項目中已經使用了ESLint，有eslintrc.js配置文件。

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" }}

藉助ESLint的autofix功能，在保存代碼的時候，自動將拋出error的地方進行fix。因為我們項目是在webpack中引入eslint-loader來啟動eslint的，所以我們只要稍微修改webpack的配置，就能在啟動webpack-dev-server的時候，每次保存代碼同時自動對代碼進行格式化。

const path = require(path)module.exports = { module: { rules: [ { test: /.(js|vue)$/, loader: eslint-loader, enforce: pre, include: [path.join(__dirname, src)], options: { fix: true } } ]}

如果你的eslint是直接通過cli方式啟動的，那麼只需要在後面加上fix即可，如：eslint --fix。

如果與已存在的插件衝突怎麼辦

npm i -D eslint-config-prettier

通過使用eslint-config-prettier配置，能夠關閉一些不必要的或者是與prettier衝突的lint選項。這樣我們就不會看到一些error同時出現兩次。使用的時候需要確保，這個配置在extends的最後一項。

//.eslintrc.js{ extends: [ standard, //使用standard做代碼規範 "prettier", ],}

這裡有個文檔，列出了會與prettier衝突的配置項。

同時使用上面兩項配置

如果你同時使用了上述的兩種配置，那麼你可以通過如下方式，簡化你的配置。

//.eslintrc.js{ "extends": ["plugin:prettier/recommended"]}

最後貼一下我們項目中的完整配置，是在vue-cli生成的代碼基礎上修改的，並且使用standard做代碼規範：

module.exports = { root: true, parserOptions: { parser: babel-eslint }, env: { browser: true, es6: true }, extends: [ // https://github.com/standard/standard/blob/master/docs/RULES-en.md standard, // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. plugin:vue/essential, "plugin:prettier/recommended", ], // required to lint *.vue files plugins: [ vue ], // add your custom rules here rules: { "prettier/prettier": "error", // allow async-await generator-star-spacing: off, // allow debugger during development no-debugger: process.env.NODE_ENV === production ? error : off }}

什麼？你們項目沒有啟用ESLint

不要慌，沒有ESLint也不要怕，可以通過onchange進行代碼的監聽，然後自動格式化代碼。只要在package.json的scripts下添加如下代碼，然後使用npm run format，我們就能監聽src目錄下所有的js文件並進行格式化：

"scripts": { "format": "onchange src/**/*.js -- prettier --write {{changed}}"}

當你想格式化的文件不止js文件時，也可以添加多個文件列表。

"scripts": { "format": "onchange test/**/*.js src/**/*.js src/**/*.vue -- prettier --write {{changed}}"}

當然，你也能夠在編輯器中配置對prettier的支持，具體支持哪些編輯器，請戳這裡

如何對Prettier進行配置

一共有三種方式支持對Prettier進行配置：

1. 根目錄創建.prettierrc文件，能夠寫入YML、JSON的配置格式，並且支持.yaml/.yml/.json/.js後綴；
2. 根目錄創建.prettier.config.js文件，並對外export一個對象；
3. 在package.json中新建prettier屬性。

下面我們使用prettierrc.js的方式對prettier進行配置，同時講解下各個配置的作用。

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相同。}

配置大概列出了這些，還有一些其他配置可以在官方文檔進行查閱。

注意一點，parser的配置項官網列出了如下可選項：

• babylon
• flow
• typescript Since v1.4.0
• postcss Since v1.4.
• json Since v1.5.0
• graphql Since v1.5.0
• markdown Since v1.8.0

但是如果你使用了vue的單文件組件形式，記得將parser配置為vue，目前官方文檔沒有列出來。當然如果你自己寫過AST的解析器，也可以用你自己的寫的parser: require("./my-parser")。

總結

有了prettier我們在用不用羨慕隔壁寫golang的同事，保存後就能自動format，也不用為了項目代碼不統一和同事爭論得面紅耳赤，因為我們統一使用prettier的風格。可能剛開始有些地方你看不慣，不過不要緊，想想這麼做都是為了團隊和睦，世界和平，我們做出的犧牲都是必要的。而且prettier的樣式風格已經在很多大型開源項目中被採用，比如react、webpack、babel。

你看，他們都在用了，你還在等什麼，想變成異教徒被燒死嗎，還不快行動起來。更多精彩內容請看官方鏈接