團隊開發的項目，如果沒有對代碼風格作要求，有多少團隊成員，就當然會出現多少種不同的代碼風格。因此，我們需要一種能夠統一團隊代碼風格的工具，作為強制性的規范，統一整個項目的代碼風格。
幸好，我們有 eslint 和 prettier 。
eslint VS prettier
應該大多數項目都已經采用eslint來對代碼進行質量檢查，可能少部分還會采用其進行一定程度上的統一風格。那為什么還需要prettier呢？我們先來對它們作一個簡單的了解。
各種linters
總體來說，linters有兩種能力：
其中，eslint文檔中，帶扳手圖標的規則就是eslint能夠自動修復的規則。而不帶該圖標的規則，eslint則只能給出錯誤或警告，隨后由開發者人工修復。
prettier
pretter沒有對代碼的質量進行檢查的能力，其只會對代碼風格按照指定的規范進行統一，避免一個項目中出現多種不同的代碼風格。
項目配置
此處使用vue項目作為例子
一、首先配置eslint
如果大家的項目是使用vue cli生成的，并且選擇使用eslint的話，那么默認在項目根目錄下就會生成.eslintrc.js。如果沒有，也可以在項目根目錄下創建該文件以及.eslintignore文件
此處我使用eslint-plugin-vue，選擇的是vue/strongly-recommended規則。
npm install --save-dev eslint eslint-plugin-vue@next// .eslintrc.jsextends: { 'plugin:vue/strongly-recommended'}// .eslintignore/build//config//dist//*.js/test/unit/coverage/如果希望在重新編譯的時候eslint自動修復代碼，需要在webpack配置中加入eslint，并且設置 fix: true ，并且在devserver中開啟eslint。
// config/index.jsmodule.exports = { dev: { useEslint: true, }}// webpack.base.conf.jsconst createLintingRule = () => ({ test: //.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay, fix: true, }})二、配置prettier
由于使用eslint，并不能最大程度地統一代碼風格，因此我們需要引入prettier。
npm install --save-dev prettier
按照實際需要配置prettier
//prettier.config.js
module.exports = { "printWidth": 80, // 每行代碼長度（默認80） "tabWidth": 2, // 每個tab相當于多少個空格（默認2） "useTabs": false, // 是否使用tab進行縮進（默認false） "singleQuote": true, // 使用單引號（默認false） "semi": true, // 聲明結尾使用分號(默認true) "trailingComma": "all", // 多行使用拖尾逗號（默認none） "bracketSpacing": true, // 對象字面量的大括號間使用空格（默認true） "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的結尾，而不是另起一行（默認false） "arrowParens": "avoid" // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid）};需要在package.json里面配置調用prettier進行格式化的命令
// package.json
"scripts": { "format": "prettier --write /"src/**/*.js/" /"src/**/*.vue/"",}至此，可以在命令行中輸入npm run format對代碼進行格式化了。
配置husky和lint-staged
由于直接使用prettier進行代碼格式化仍存在一些弊端，例如：
一次性對所有文件進行格式化，如果是項目中途加入prettier，會對一些早已經編寫完成的代碼進行格式化，可能會造成沖突或者一些不可預知的問題，降低項目穩定性。
每次都要鍵入npm run format進行代碼格式化，多了額外的操作，開發體驗不良好。
故此，我們可以修改代碼格式化的時機，僅對本次提交的代碼進行格式化，并且在代碼提交之前進行格式化，確保存入倉庫的代碼都是格式化后的良好的代碼。
husky是一款可以幫助我們使用git hooks的第三方庫，可以根據package.json文件里定義的鉤子和鉤子執行的命令將要執行的操作寫對應的鉤子腳本里。
lint-staged，官方說明是一款可以對git提交的代碼使用linter的第三方庫，其依賴于husky使用git hooks。此處我們不僅僅可以利用其調用linters，還可以調用prettier對代碼進行格式化。
npm install --save-dev lint-staged husky
// package.json
"scripts": { "precommit": "lint-staged" // precommit鉤子執行lint-staged},"lint-staged": { "src/**/*.{js,json,css,vue}": [ "prettier --write", // 先執行prettier，再執行eslint，保證代碼質量 "eslint --fix", "git add" ]},同時使用eslint和prettier的配置
由于需要同時使用prettier和eslint，而prettier的一些規則和eslint的一些規則可能存在沖突，所以需要將eslint的一些可能與prettier發生沖突的代碼格式化規則關閉。這里使用eslint-plugin-prettier和eslint-config-prettier。
eslint-plugin-prettier可以將prettier的規則設置為eslint的規則，對不符合規則的進行提示。（與eslint-plugin-vue相同）
eslint-config-prettier可以關閉eslint可能與prettier發生沖突的代碼格式化規則。官方稱eslint-plugin-prettier需要與eslint-config-prettier搭配食用才能獲得最佳效果。
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
// .eslintrc.jsmodule.exports = { extends: [ 'plugin:vue/strongly-recommended', 'plugin:prettier/recommended' ] rules: { "prettier/prettier": "error" }}經過上述配置，每次git commit的時候，都會先執行prettier以及eslint對代碼進行格式化和質量檢查，確保代碼沒有問題之后再提交
整體配置文件
npm install -D prettier husky lint-staged eslint-config-prettier eslint-plugin-prettier// package.json{ "scripts": { "format": "prettier --write /"src/**/*.js/" /"src/**/*.vue/"", "precommit": "lint-staged" }, "lint-staged": { "src/**/*.{js,json,css,vue}": [ "prettier --write", "eslint --fix", "git add" ] }, "devDependencies": { "eslint": "^4.15.0", "eslint-config-prettier": "^2.9.0", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-vue": "^4.0.0", "husky": "^0.14.3", "lint-staged": "^7.2.0", "prettier": "^1.14.2", },}// eslintrc.js// https://eslint.org/docs/user-guide/configuringmodule.exports = { extends: [ 'plugin:vue/strongly-recommended', 'plugin:prettier/recommended' ], // add your custom rules here rules: { // ...other codes "prettier/prettier": "error" }}//prettier.config.jsmodule.exports = { "printWidth": 80, // 每行代碼長度（默認80） "tabWidth": 2, // 每個tab相當于多少個空格（默認2） "useTabs": false, // 是否使用tab進行縮進（默認false） "singleQuote": true, // 使用單引號（默認false） "semi": true, // 聲明結尾使用分號(默認true) "trailingComma": "all", // 多行使用拖尾逗號（默認none） "bracketSpacing": true, // 對象字面量的大括號間使用空格（默認true） "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的結尾，而不是另起一行（默認false） "arrowParens": "avoid" // 只有一個參數的箭頭函數的參數是否帶圓括號（默認avoid）};寫在最后
一般IDE集成了eslint或者prettier工具的話，會默認根據項目根目錄下相關配置文件進行代碼檢查。
如果使用vscode，vetur的默認代碼風格化使用的就是prettier，會自動檢索項目根目錄下的prettier配置文件進行格式化。eslint檢索工具推薦使用eslint插件，安裝后也會自動檢索eslint配置文件進行代碼檢查，非常方便。
總結
以上所述是小編給大家介紹的Vue項目使用eslint + prettier規范代碼風格，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
