vscode解決prettier和eslint的規則衝突

2022-01-01 前端和大數據

許多項目使用 vscode 的 prettier 插件, 當保存時會自動格式化代碼
如果也配置了 eslint 規則, 則 eslint 與 prettier 的規則可能會有衝突

比如當兩者配置的縮進, 空格, 單雙引號的規則有差異.


解決方法

禁用 prettier, 用 Eslint 來自動格式化代碼,

安裝插件

npm install eslint-plugin-prettier --save-dev
配置 eslint 的 prettier 規則.
{
  // 繼承 eslint-config-prettier 的默認配置, 會關掉與 eslint 衝突的規則
  "extends": ["eslint:recommended", "prettier"],
  "rules": {
   "prettier/prettier": [
    // prettier 的規則不匹配時的報錯配置
      "warn",
      {
        // prettier 的規則
        "printWidth": 120,
        "tabWidth": 2,
        "useTabs": false,
        "semi": true,
        "singleQuote": true
      },
      {
        // 是否導入當前的 prettier 的配置
        "usePrettierrc": false
      }
    ],
  },
  "plugins": [
    // 增加 prettier 插件
    "prettier"
  ]
}
配置 vscode
安裝 eslint 插件
修改 vscode 如下的配置
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        // 自動保存時啟用 eslint 插件
        "source.fixAll.eslint": true
    },
    // 讓 eslint 作為格式化工具
    "eslint.format.enable": true,
    // 關閉 prettier 插件的自動格式化
     "prettier.enable": false,
}

參考資料
eslint-plugin-prettier插件
prettier配置
vscode eslint 插件

相關焦點

  • Prettier 完全指南,以及和 Git、VSCode、ESLint 整合,讓你的代碼變美麗
    對要學的東西有一個宏觀認識和理解。理解，就是要明白一項技術的設計初衷、背後的哲學。學習任何一項技術、語言、框架之初，都要問自己幾個問題：為什麼要出現這個新東西？之前同類或類似的東西有什麼不好嗎？這個東西帶來哪些新思想和設計哲學，解決了之前哪些不容易解決的問題？發明人對我們有什麼建議，可以讓我們更好地利用這個東西？
  • 使用ESLint + Prettier簡化代碼 Review 過程[每日前端夜話0x4E]
    為什麼自動 Lint 和代碼風格很重要？ESLint 通過對 JavaScript 文件執行自動掃描來查找常見的語法和代碼風格錯誤。Prettier 掃描文件中的樣式問題，並自動重新格式化代碼，以確保縮進、間距、分號、單引號和雙引號等遵循一致的規則。
  • 代碼規範之-理解ESLint、Prettier、EditorConfig
    extends: ["eslint:recommended","plugin:prettier/recommended"],複製代碼配置代碼注釋方式有時候，我們需要在代碼中忽略ESLint的某些規則檢查，此時我們可以通過加入代碼注釋的方式解決：可以指定整個文件、某一行、
  • 2021 精選15+VSCode插件推薦
    ,無縫導航和探索Git存儲庫。它通過解析代碼並使用它自己的規則重新列印代碼來強制實現一致的樣式，這些規則考慮到最大行長度，在必要時格式化代碼。": "esbenp.prettier-vscode"  },  "[vue]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  }}官方地址：https://marketplace.visualstudio.com
  • 給 eslint 寫一個插件
    config：可以重複使用的規則配置文件，比較有名的是 standard 和 airbnb 的規則，配置文件有可能會有依賴的插件，需要自己去安裝parser：用來擴充 eslint 可以處理的語法，有用 babel 轉換 js 的 babel-eslint ，讓 eslint 可以處理實驗性的語法；@typescript-eslint/parser 可以讓 eslint 處理 Typescript；
  • 用Prettier讓你的JavaScript代碼風格統一,格式優美
    為什麼使用Prettier js作為一門靈活的弱類型語言，代碼風格千奇百怪，一千個人寫js就有一千種寫法，開發團隊應統一格式化工具以避免無謂的衝突，並且統一的代碼風格能保證代碼的可讀性。優勢：1.可配置化2.支持多種語言3.集成多數的編輯器4.簡潔的配置項安裝npm install --global prettier
  • 那些你應該考慮卸載的 VSCode 擴展
    擴展之間衝突，比如安裝了多個會修改代碼顏色的擴展，TODO highlight 和 Todo Tree 之間功能重複，例如：IntelliSense for CSS class names in HTML 和 HTML CSS SupportCPU 佔用過高，很多被棄坑的 VSCode 擴展你去看它們 github issues 頁面都可以看到一堆 issues 抱怨這個問題，例如 import-cost
  • ESLint進階指南
    安裝和初始化ESlint新建一個空的文件夾，執行以下的命令：1、 npm init -y2、 npm install eslint -D3、 npx eslint --init則需要自己去定義一些規則，這就有了 eslint-plugin-react 。
  • 在 Vue3 + Vite + TS 項目中配置 ESLint,讓 VSCode 編輯器自動修復錯誤
    通過查閱 ESLint 官方文檔和其他相關的博客後，我對 Vue3 + TS 項目從零配置 ESLint 寫了一篇總結。yarn add eslint@7.2.0 eslint-plugin-vue@7.20.0 vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base@14.2.1 eslint-plugin-import
  • 【第1495期】 ESLint 工作原理探討
    在官方文檔 ESLint - rules 一節中，我們可以看到官方提供的了大量的規則，有推薦使用的（」eslint:recommended」），也有默認不啟用的，還有一些廢棄的。這和現實生活是一致的，現實生活中，我們也在不自覺中遵守和構建著各種不同的規則。
  • HBuilderX 2.7.x 發布,插件系統開放,C++ 版的 vscode 來了
    考慮到HBuilderX主要是為前端工程師打造的工具，我們將插件的開發語言定為了JavaScript，插件API及規範則參考了vscode，實現對vscode插件的兼容，這樣vscode的插件也可以快速的移植到HBuilderX中。下圖為HBuilderX的插件架構：
  • vscode入門:熟悉vscode和初級配置
    著重關注右下角的學習部分，交互演練可以讓我們快速體驗vscode的一些常用功能和快捷鍵，值得一試；活動欄，Ctrl+Shift+{E/F/D/X}分別打開文件列表、搜索、調試和擴展；熟記快捷鍵後可以隱藏活動欄
  • ESLint 7.0.0 發布
    因為 Node.js 8 已經於去年 12 月 EOL，此版本 ESLint 中正式放棄了對它的支持；core 規則方面： core 中的十個 Node.js/CommonJS 規則已被棄用並移至 eslint-plugin-node 插件。 更新了一些規則，以識別 bigint 文字並默認可以警告更多情況。
  • 誰會不愛讓代碼騷裡騷氣的VSCode擴展插件呢?
    itemName=Tyriar.vscode-terminal-here　　對所有有競爭力又不喜歡集成開發環境（IDE）而偏愛在文本編輯器寫代碼的程式設計師來說，你絕對會喜歡這個插件。　　筆者不喜歡在IDE程序裡寫代碼，更偏向VS Code文本編輯器。通常用Java寫代碼，有特定的文件習慣（一個文檔解決一個問題）。
  • 我最喜歡的 12 個VSCode 插件!
    itemName=esbenp.prettier-vscode和esLint不同在於，ESLint只是一個代碼質量工具(確保沒有未使用的變量、沒有全局變量，等等)。而 Prettier 只關心格式化文件(最大長度、混合標籤和空格、引用樣式等)。可見，代碼格式統一的問題，交給 Prettirer 再合適不過了。和 Eslint 配合使用，風味更佳。5. htmltagwrap地址：https://marketplace.visualstudio.com/items?
  • JavaScript開發者的27個神奇VSCode工具
    由於其內置開發工具支持TypeScript和Chrome開發者工具，這款編輯器讓人越用越喜歡。每個人都能使用和修改的無限擴展的開放原始碼，誰不愛呢？希望這篇文章能幫你找到擴充開發工具箱的新工具。雖然下列工具並不都是JavaScript語言專用，但它們都是JavaScript開發者會感興趣的。