要配置更漂亮的VSCODE中的ESLINT，請首先安裝所需的軟件包：Eslint，Prettier，Eslint-Config-Prettier和Eslint-Plugin-Prettier通過NPM；接下來，將您的.eslintrc.js文件更新以包含“插件：漂亮/推薦”，以集成兩個工具；然後創(chuàng)建一個.prettierrc文件以定義格式偏好；之後，配置VSCODE設(shè)置以啟用“保存”格式，將更漂亮的設(shè)置為默認格式設(shè)置，並確保啟用ESLINT並在Type上運行；最後，通過檢查配置文件並確保使用Eslint和Prettier的工作區(qū)版本，可以選擇解決衝突。

在VSCODE中配置Prettier以與ESLINT一起使用，這是想要一致的代碼格式和覆蓋的JavaScript/Typescript開發(fā)人員的常見設(shè)置。關(guān)鍵是要確保它們不會衝突，並且一個不會覆蓋另一個。這是正確做的方法。

安裝所需的軟件包

在VSCODE中配置設(shè)置之前，您需要在項目中安裝正確的NPM軟件包：

• eslint
• prettier
• eslint-config-prettier （禁用衝突規(guī)則）
• eslint-plugin-prettier （使Eslint和Prettim Plosis一起工作）

在您的項目root中運行此命令：

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

如果您使用的是Typescript或React，則可能需要其他插件，例如@typescript-eslint/eslint-plugin或eslint-plugin-react 。

配置Eslint和Prettier一起工作

使用以下設(shè)置創(chuàng)建或更新您的.eslintrc.js （或.eslintrc.json ）文件：

 Module.exports = {
  根：是的，
  env：{
    ES2021：是的，
    節(jié)點：是的，
  }，，
  擴展：[
    'Eslint：推薦'，
    “插件：漂亮/推薦”，//此行進行大部分集成工作
  ]，，
  parsoptions：{
    Ecmaversion：“最新”，
    SourceType：“模塊”，
  }，，
  規(guī)則：{
    //自定義規(guī)則轉(zhuǎn)到此處
  }，，
};

該設(shè)置告訴ESLINT尊重Prettier的格式規(guī)則，並禁用ESLINT規(guī)則，這些規(guī)則本來會與更漂亮的相衝突。

另外，請確保您的項目root中有一個.prettierrc文件以定義格式的首選項，例如：

 {
  “ semi”：false，
  “單樣”：是的，
  “ trailingComma”：“ ES5”
}

設(shè)置VSCODE以使用兩個工具的保存格式

現(xiàn)在，軟件包和配置文件已經(jīng)到位，您需要告訴VSCODE如何應(yīng)用它們。

1. 打開VSCODE設(shè)置（ Cmd , Mac或Ctrl , Windows上）。
2. 搜索“保存格式”並啟用它。
3. 搜索“默認格式化器” ，並將其設(shè)置為Prettier - Code formatter 。
4. 在您的項目中創(chuàng)建或更新.vscode/settings.json 。

 {
  “ editor.defaultformatter”：“ esbenp.prettier-vscode”，
  “ editor.formatonsave”：是的，
  “ eslint.enable”：是的，
  “ eslint.run”：“ ontype”，
  “ eslint.format.enable”：true
}

這確保了：

• ESLINT在輸入時檢查您的代碼。
• 保存的格式更漂亮。
• 通過更漂亮的集成，將ESLINT規(guī)則作為格式規(guī)則應(yīng)用。

可選：手動修復(fù)衝突（如果需要）

有時，尤其是在較舊的項目中，您可能仍然會遇到衝突。在這種情況下：

• 檢查兩個工具是否都使用相同的配置文件。
• 確保沒有其他ESLINT配置覆蓋plugin:prettier/recommended行。
• 您可以暫時禁用Eslint或更漂亮的測試，以測試哪個引起問題。

另外，請確保您的項目使用的是Eslint和Prettier的工作空間版本，而不是全局。您可以在Eslint下的Vscode中配置此內(nèi)容：使用Workspace版本。

那是核心設(shè)置。一旦您正確地完成了配置文件，它就不會太複雜，但是如果版本或設(shè)置不匹配，它可能會以微小的方式出錯。

以上是如何配置更漂亮以與VSCODE中的ESLINT一起使用？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！