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

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

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

想起本身剛入行的時候，從svn上把代碼checkout下來，看到同事寫的代碼，大括號竟然換行了。心中暗罵，這我的是否是個**，大括號爲何要換行？年輕氣盛的我，竟然滿腔怒火，將空行一一刪掉。 可是關於代碼風格，咱們很難區分誰對誰錯，不一樣的人有不一樣偏好，惟有強制要求才能規避爭論。

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

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

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

Prettier是什麼？

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

下面開始安利，Prettier。

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

看看Prettier乾的好事。

能支持jsx

也能支持css

惟一的遺憾是，暫時還不能格式化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.0
• 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。

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