正文

每個(gè)開發(fā)人員都有獨(dú)特的代碼編寫風(fēng)格和不同的文本編輯器。在團(tuán)隊(duì)項(xiàng)目開發(fā)過程，不能強(qiáng)迫每個(gè)團(tuán)隊(duì)成員都寫一樣的代碼風(fēng)格。

可能會(huì)看到以下部分（或全部）內(nèi)容：

• 缺少分號；
• 有單引號、雙引號，風(fēng)格不一致；
• 一些行之間有大量的空格，而其他行之間沒有空格；
• 在使向右滾動(dòng)多年以查看其中包含的所有內(nèi)容的行上運(yùn)行；
• 看似隨意的縮進(jìn)；
• 注釋掉代碼塊；
• 初始化但未使用的變量；
• 一些使用“嚴(yán)格”JS 的文件和其他不使用的文件；
• 代碼塊在任何地方都沒有空格或注釋，這使得閱讀它們和破譯正在發(fā)生的事情變得更加困難。

那么如何解決同一項(xiàng)目中有太多不同編碼風(fēng)格的問題？希望實(shí)現(xiàn)相同的編碼風(fēng)格，避免團(tuán)隊(duì)成員之間的許多警告；有 2 個(gè)非常簡單的利器：ESLint 和 Prettier。

在 Visual Studio Code 中、安裝插件 Prettier 和 ESLint 的幫助下消除一群不同開發(fā)人員的代碼不一致，為開發(fā)團(tuán)隊(duì)提供一套整潔、統(tǒng)一的代碼格式化。

ESLint

ESLint 是一個(gè)開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創(chuàng)建。代碼檢查是一種靜態(tài)的分析，常用于尋找有問題的模式或者代碼，并且不依賴于具體的編碼風(fēng)格。對大多數(shù)編程語言來說都會(huì)有代碼檢查，一般來說編譯程序會(huì)內(nèi)置檢查工具。

ESLint 非常適合希望開發(fā)團(tuán)隊(duì)遵守的更具體、更通用的代碼樣式。除非專門設(shè)置它，否則 ESLint 不會(huì)自動(dòng)修復(fù)或重寫項(xiàng)目的代碼，但它會(huì)以一種直接的方式讓你知道有“規(guī)則”被打破了（不符合）。

VUE 項(xiàng)目的規(guī)則

{
    indent: ["off", 2],
    quotes: [0, "single"],
    "no-mixed-spaces-and-tabs": [2, false], // 禁止混用tab和空格
    "generator-star-spacing": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "space-before-function-paren": "off",
    "no-var": "off", // 使用let和const代替var
    "no-new-func": "error", // 不允許使用new Function
    camelcase: [0, { properties: "never" }],
    "comma-dangle": ["error", "only-multiline"],
    semi: [2, "always"], // 語句強(qiáng)制分號結(jié)尾
    "prettier/prettier": [
        "off",
        {
            singleQuote: false,
            semi: false,
            trailingComma: "none",
            bracketSpacing: true,
            jsxBracketSameLine: true,
        },
    ],
}

Prettier

一個(gè)流行的代碼格式化工具的名稱，它能夠解析代碼，使用你自己設(shè)定的規(guī)則來重新打印出格式規(guī)范的代碼?？梢詾轫?xiàng)目定義一下規(guī)則：

• 將所有單引號更改為雙引號，
• 添加缺少的分號，
• 在大括號或方括號和變量之間放置空格，
• 設(shè)置標(biāo)準(zhǔn)標(biāo)簽寬度。

上面只是 Prettier 規(guī)則的很小部分，在 VS Code 中，可以很容易覆蓋任何你不喜歡的規(guī)則。

Prettier 是為了保持代碼格式一致的 VS Code 插件，它可以 .prettierrc 在項(xiàng)目中有或沒有文件的情況下工作（盡管這對于在代碼庫上工作的開發(fā)團(tuán)隊(duì)來說可能是一個(gè)很好的建議）。它將使項(xiàng)目的代碼保持干凈和易于閱讀，并且在團(tuán)隊(duì)中的所有開發(fā)人員中都一樣。

ESLint 與 Prettier

• ESlint 不僅僅是一個(gè)代碼格式化程序，它還可以幫助開發(fā)人員發(fā)現(xiàn)編碼錯(cuò)誤。例如，如果在沒有聲明的情況下使用變量，ESLint 會(huì)給你一個(gè)警告。Prettier 沒有這樣的能力。
• ESLint 會(huì)讓開發(fā)人員知道代碼格式有什么問題，并為其提供解決問題的選項(xiàng)。然后可以從這些選項(xiàng)中選擇一個(gè)。另一方面，Prettier 根本不關(guān)心你。它只是將所有代碼格式化為不同的結(jié)構(gòu)格式。
• Prettier 中的整個(gè)重寫過程可以防止開發(fā)人員犯任何錯(cuò)誤。
• max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style 是 Prettier 中一些流行的格式規(guī)則。
• 除了上述類型的規(guī)則，ESLint 還考慮了代碼質(zhì)量規(guī)則，例如 no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors。

總的來說，這些方法似乎相互補(bǔ)充，同時(shí)也有一些相似之處。合理使用 ESLint 與 Prettier 可以提升團(tuán)隊(duì)合作的代碼的質(zhì)量，借助工具來提升團(tuán)隊(duì)的代碼質(zhì)量。

以上就是提高團(tuán)隊(duì)代碼質(zhì)量利器ESLint及Prettier詳解的詳細(xì)內(nèi)容，更多關(guān)于ESLint Prettier提高代碼質(zhì)量的資料請關(guān)注腳本之家其它相關(guān)文章！