在開發(fā)人員中，關(guān)于最佳編輯器之爭(zhēng)從來都是一個(gè)無休止的話題，從古至今，這個(gè)話題從來沒有探討出一個(gè)滿意的結(jié)果。

對(duì)于代碼的格式，自古以來也是每個(gè)人都有自己的偏好，為了統(tǒng)一代碼格式，人們想盡了辦法，這也是golang為什么自帶了一個(gè)格式化代碼的工具，就是為了讓代碼格式變得統(tǒng)一，變得更加容易所有人閱讀。

而我們今天要討論的eslint和prettier就是兩個(gè)前端統(tǒng)一代碼樣式的工具。

[[439052]]

ESLint

eslint是在2013年誕生的，現(xiàn)在它已經(jīng)成為了最著名的代碼格式化工具，每天都有百萬的下載量。

eslint這個(gè)工具它會(huì)分析我們的代碼樣式，然后它會(huì)找出錯(cuò)誤格式和代碼中的錯(cuò)誤。

使用它非常方便，你只需要通過npm安裝就可以，然后在項(xiàng)目中通過初始化來使用它，最后在package.json添加運(yùn)行代碼：

npm i -g eslint eslint --init 

script:{ "lint":"eslint" }//npm run lint 

eslint的所有設(shè)置都可以進(jìn)行配置，你可以讓它只是檢查語法，也可以讓它不僅檢查語法還要找出錯(cuò)誤，當(dāng)然你還可以配置它對(duì)代碼樣式進(jìn)行修改。

eslint支持三大前端框架，你可以輕松地在項(xiàng)目中集成使用它。

eslint默認(rèn)提供了谷歌，airbnb，官方三種代碼樣式供選擇，當(dāng)然對(duì)于具體的配置，你也可以根據(jù)自己的項(xiàng)目進(jìn)行適當(dāng)調(diào)整。

下面是eslint初始化后生成的js文件。

module.exports = { 
    'env': { 
        'browser': true, 
        'es2021': true, 
        'node': true 
    }, 
    'extends': 'eslint:recommended', 
    'parserOptions': { 
        'ecmaVersion': 13, 
        'sourceType': 'module' 
    }, 
    'rules': { 
        'indent': [ 
            'error', 
            4 
        ], 
        'linebreak-style': [ 
            'error', 
            'unix' 
        ], 
        'quotes': [ 
            'error', 
            'single' 
        ], 
        'semi': [ 
            'error', 
            'never' 
        ] 
    } 
} 

Prettier

Prettier是在2016年創(chuàng)建的，它是一個(gè)固執(zhí)的有自己主見的代碼格式化工具，它支持很多語言，并且支持很多編輯器，它的配置很少，你甚至可以安裝完之后，零配置使用它。

它誕生的目的就是為了讓你不用關(guān)系你的代碼書寫結(jié)構(gòu)，因?yàn)楫?dāng)你保存代碼的時(shí)候，它會(huì)自動(dòng)幫助你格式化你的代碼，并且不會(huì)修改你的代碼內(nèi)容，因?yàn)樗薷牡闹R(shí)代碼的結(jié)構(gòu)視圖。

Prettier的最主要的目的就是為了讓人們不在糾結(jié)代碼的樣式，而是全神貫注去考慮代碼的性能和功能。

Prettier可以說是前端格式化的神器，除了html，css，js外，它還支持ts，json，yml，graphql等，此外，前端三大框架vue，angular，react它都是支持的。

ESLint Vs Prettier

[[439053]]

相比于Prettier，ESlint不僅僅可以格式化代碼，更主要的是它可以幫助開發(fā)者發(fā)現(xiàn)代碼中的錯(cuò)誤。當(dāng)一個(gè)變量聲明之后但是沒有使用，它會(huì)給出警告。當(dāng)一個(gè)數(shù)字類型變量賦值了字符串時(shí)，它會(huì)給出錯(cuò)誤提示。

ESlint會(huì)在格式化代碼的時(shí)候，去修復(fù)代碼中的錯(cuò)誤，而Prettier更多地是去格式化代碼而忽略代碼中的錯(cuò)誤。

Prettier可以定制很多代碼格式化的選項(xiàng)，你可以控制代碼的寬度，可以控制代碼中空格的長(zhǎng)度，你可以控制是否使用分號(hào)結(jié)尾，當(dāng)然了，這些在ESlint中也可以定制，這么看來，似乎ESlint應(yīng)該是最佳選擇。

但是術(shù)業(yè)有專攻，Prettier就是專門為了格式化代碼而生的。對(duì)于代碼中的一些問題，ESlint可能無法正確格式化，這個(gè)時(shí)候，Prettier就可以很好的完成格式化的任務(wù)。

一個(gè)擅長(zhǎng)格式化代碼，一個(gè)擅長(zhǎng)發(fā)現(xiàn)代碼的錯(cuò)誤，那么它們倆可以結(jié)合使用嗎?答案是肯定的。

在Prettier的官網(wǎng)中，官方已經(jīng)給出了集成ESLint的解決方案，你可以參照文檔將兩者合二為一。

如果你的代碼還沒有使用它們，那么我強(qiáng)烈建議你去嘗試使用它們，在團(tuán)隊(duì)化的項(xiàng)目中，你會(huì)發(fā)現(xiàn)使用了它們會(huì)讓你真?zhèn)€團(tuán)隊(duì)的代碼看起來整齊劃一。

總結(jié)

無論是prettier還是eslint，它們都是通過配置文件來進(jìn)行運(yùn)行的，因此在使用它們的時(shí)候，你要格外留意配置文件的各個(gè)選項(xiàng)和使用方式，此外，因?yàn)閑slint有些時(shí)候過于緩慢，人們還提出了eslint_d這個(gè)工具，它的用法和eslint一樣，但是性能速度上卻比前者快很多，你可以親自嘗試下。

所有的工具都是為了提升開發(fā)效率，提高編碼效率，如果你真的覺得這些工具妨礙了你的效率，你完全可以不使用它們，但是我相信大多時(shí)候，使用這些工具一定會(huì)提升你的開發(fā)效率，否則它們就不會(huì)誕生，也不會(huì)有這么多人來使用它們了。