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

設(shè)置專業(yè)的JavaScript項(xiàng)目不僅僅是編寫代碼 - 它是關(guān)于確保團(tuán)隊(duì)和代碼庫的一致性，可讀性和可維護(hù)性。實(shí)現(xiàn)這一目標(biāo)的兩個(gè)基本工具是Eslint和更漂亮的。 ESLINT有助于捕獲錯(cuò)誤并強(qiáng)制執(zhí)行編碼標(biāo)準(zhǔn)，而Prettier會(huì)自動(dòng)格式化代碼以使您的代碼看起來干凈和一致。

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

1。初始化您的項(xiàng)目并安裝依賴項(xiàng)

首先初始化一個(gè)新項(xiàng)目（如果還沒有）：

 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ī)則運(yùn)行，因此您可以在伸長(zhǎng)期間解決格式化問題。

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

2。配置Eslint和Prettier

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

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

此配置：

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

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

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

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

另外，創(chuàng)建一個(gè).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)在您可以：

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

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

對(duì)于實(shí)時(shí)反饋，請(qǐng)安裝以下擴(kuò)展名：

• 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ū)⒆詣?dòng)應(yīng)用。
• Prettier是默認(rèn)的格式化器。

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

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

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

安裝它們：

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

啟用git鉤和配置：

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

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

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

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

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

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

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

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

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