用NPM Init -Y初始化該項目，然後安裝Eslint，Prettier，Eslint-Config-Prettier和Eslint-Plugin-Prettier作為DEV依賴項。 2。創(chuàng)建一個.eslintrc.cjs文件，以配置具有建議的規(guī)則和更漂亮的集成ESLINT，並設(shè)置一個.prettierrc文件，以與.prettierignore文件一起格式化偏好，以排除特定文件。 3。添加棉絨，棉絨：修復(fù)和格式腳本到包裝。 4。可選，在每個提交之前，在上演的文件上安裝Husky and Lint階段，以運行ESLINT，並更漂亮，以確保在GIT工作流程中執(zhí)行代碼質(zhì)量。此設(shè)置可以保證團隊和項目之間的一致，清潔和可維護的JavaScript代碼。

設(shè)置專業(yè)的JavaScript項目不僅僅是編寫代碼 - 它是關(guān)於確保團隊和代碼庫的一致性，可讀性和可維護性。實現(xiàn)這一目標的兩個基本工具是Eslint和更漂亮的。 ESLINT有助於捕獲錯誤並強制執(zhí)行編碼標準，而Prettier會自動格式化代碼以使您的代碼看起來乾淨(jìng)和一致。

這是在現(xiàn)代JavaScript項目中將它們設(shè)置在一起的方法。

1。初始化您的項目並安裝依賴項

首先初始化一個新項目（如果還沒有）：

 npm init -y

然後安裝核心軟件包：

 npm安裝 -  save-dev eslint Prettier Eslint-Config-Prettier Eslint-Plugin-Prettier

• eslint ：襯裡本身。
• prettier ：代碼格式。
• eslint-config-prettier ：禁用與漂亮的Eslint規(guī)則。
• eslint-plugin-prettier ：將更漂亮的ESLINT規(guī)則運行，因此您可以在伸長期間解決格式化問題。

可選：如果您使用的是React，TypeScript或其他工具，則需要其他插件，例如eslint-plugin-react ， @typescript-eslint/eslint-plugin ，等等。

2。配置Eslint和Prettier

在您的項目root中創(chuàng)建一個.eslintrc.cjs文件：

 // .eslintrc.cjs
Module.exports = {
  env：{
    瀏覽器：是的，
    ES2021：是的，
    節(jié)點：是的，
  }，，
  擴展：[
    'Eslint：推薦'，
    “插件：更漂亮/推薦”，//啟用更漂亮並關(guān)閉衝突規(guī)則
  ]，，
  parsoptions：{
    Ecmaversion：“最新”，
    SourceType：“模塊”，
  }，，
  規(guī)則：{
    //自定義ESLINT規(guī)則轉(zhuǎn)到此處
    “無康斯”：“警告”，
    'no-debugger'：'錯誤'，
  }，，
};

此配置：

• 使用Eslint的推薦規(guī)則。
• 通過plugin:prettier/recommended ，其中包括prettier和eslint-config-prettier自動。
• 設(shè)置環(huán)境和語言選項。

現(xiàn)在創(chuàng)建一個.prettierrc文件以自定義格式：

 // .prettierrc
{
  “ semi”：是的，
  “ trailingComma”：“ ES5”，
  “單樣”：是的，
  “ printwidth”：80，
  “ TabWidth”：2
}

您可以根據(jù)團隊的喜好進行調(diào)整。

另外，創(chuàng)建一個.prettierignore以跳過格式化某些文件：

 ＃.prettierignore
node_modules
區(qū)
建造
*.min.js

3。設(shè)置腳本和編輯器集成

將有用的腳本添加到您的package.json ：

 “腳本”：{
  “ lint”：“ eslint。-ext.js，.jsx”，
  “ lint：fix”：“ eslint。-ext.js，.jsx -fix”，
  “格式”：“更漂亮 - 寫?！?}

現(xiàn)在您可以：

• 運行npm run lint以檢查覆蓋問題。
• 運行npm run lint:fix自動修復(fù)的問題。
• 運行npm run format以格式化所有文件。

編輯設(shè)置（VS代碼）

對於實時反饋，請安裝以下擴展名：

• Microsoft的Eslint
• 漂亮 - 代碼格式

然後更新您的VS代碼settings.json ：

 {
  “ editor.defaultformatter”：“ esbenp.prettier-vscode”，
  “ editor.formatonsave”：是的，
  “ editor.codeactionsave”：{
    “ source.fixall.eslint”：true
  }，，
  “ eslint.validate”：[“ JavaScript”，“ JavasCripTreact”]
}

這樣可以確保：

• 文件在保存上格式化。
• ESLINT修復(fù)程序?qū)⒆詣討?yīng)用。
• Prettier是默認的格式化器。

確保您沒有啟用衝突的格式化器（例如Beautify）。

4。 （可選）添加帶有沙啞和絨毛的git鉤

為了在提交之前執(zhí)行代碼質(zhì)量，請使用husky和lint-staged 。

安裝它們：

 NPM安裝 -  suve-dev沙啞的絨毛階段

啟用git鉤和配置：

 NPX HUSKY安裝
npm pkg設(shè)置腳本。

添加一個預(yù)加入鉤子：

 NPX HUSKY ADD .HUSKY/預(yù)先承諾的“ NPX絨毛階段”

然後在package.json中配置lint-staged ：

 “絨毛階段”：{
  “*。{JS，JSX}”：[
    “ eslint -fix”，
    “漂亮 - 寫”
  這是給出的
}

現(xiàn)在，每當(dāng)您提交JavaScript文件時，它們都會自動覆蓋並格式化。

就是這樣。您已經(jīng)為清潔，一致的JavaScript代碼建立了強大的基礎(chǔ)。憑藉Eslint捕捉錯誤和更漂亮的處理方式，您的團隊可以專注於邏輯 - 而不是格式化辯論。

基本上，只要確保工具彼此一致，您的編輯器就會支持它們，而您的GIT工作流程會強制執(zhí)行它們。不是浮華，但對於專業(yè)工作絕對必不可少。

以上是建立一個專業(yè)的JavaScript項目，具有Eslint和Prettier的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！