@vue/cli 構建得項目eslint配置2

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

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

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

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

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

Prettier是什麼？

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

下面開始安利，Prettier。

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

看看Prettier乾的好事。

能支持jsxreact

也能支持csswebpack

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

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進行配置：

根目錄建立.prettierrc文件，可以寫入YML、JSON的配置格式，而且支持.yaml/.yml/.json/.js後綴；
根目錄建立.prettier.config.js文件，並對外export一個對象；
在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。

具體實例：

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'prettier/prettier': 'error',
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    quotes: ['error', 'single'],
    semi: ['error', 'always']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

// .prettierrc

{  "semi": true,  "singleQuote": true,  "endOfLine": "crlf"}