1.安裝百度Eslint Rule 外掛

npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

// react專案
npm i -D eslint-plugin-react eslint-plugin-react-hooks
 
// 如果需要支援typescript的話
npm i -D @typescrhttp://www.cppcns.comipt-eslint/parser @typescript-eslint/eslint-plugin

2.配置.eslintrc檔案

{
    "parser": "@typescript-eslint/parser",// typescript解析器
    "extends": [
        "@ecomfe/eslint-config",// 繼承廠內EE-eslint規則配置
        "@ecomfe/eslint-config/react"
    ],"plugins": [
        "@typescript-eslint",// 增加一些typescript語法檢查
        "react",// react語法檢查
        "react-hooks" // hooks語法檢查
    ],"rules": {
        "indent": [
            "error",4,{
                "SwitchCase": 1
            }
        ],// 強制4格風格
        "no-unused-vars": "off",// 關掉eslint no-unused-vars預設配置
        "@typescript-eslint/n
 
o-unused-vars": [
            "warn",{
                "vars": "all","args": "after-used","ignoreRestSiblings": false
            }
        ],// 使用@typescript-eslint/no-unused-vars配置
        "import/no-unresolved": "off","react/x-uses-react": 2,// 遮蔽"React" is defined but never used錯誤
        "import/order": "off",// 不需要引入順序驗證
        "comma-dangle": [
            "off"
        ],// 不允許最後多餘的逗號
        "@typescript-eslint/consistent-type-definitions": [
            "off"
        ],// 先off掉
        "react-hooks/rules-of-hooks": "error",// 檢查Hook的規則
        "react-hooks/exhaustive-deps": "warn",// 檢查effect的依賴
        "max-p客棧
 
arams": [
            "warn",8
        ],// 方法最多8個引數
        "no-use-before-define": "off","@typescript-eslint/no-use-before-define": [
            "error",{
                "functions": false,"variables": false
            }
        ],// 注意：方法和變數可以在使用之後定義！為了解決hooks中經常會出現的迴圈依賴的問題，不過要注意危險
        "react/jsx-no-bind": [
            "warn",{
                "allowArrowFunctions": true // 暫且允許箭頭函式，來提升程式碼可讀性
          www.cppcns.com
 
  }
        ],"max-nested-callbacks": [
            "warn",4
        ],// 迴圈最多4層，超過4層警告
        "react/require-default-proptyfFviWs": "off",// 元件的非必填屬性不要求一定有預設值
        "react/no-find-dom-node": "off",// 暫且允許使用react-dom的findDOMNode方法
        "@babel/object-curly-spacing": "off","object-curly-spacing": [
            "off","always",{
                "arraysInObjects": false
            }
        ],// 物件括號是否允許新增空格
        "brace-style": [
            "off","1tbs"
        ],"react/no-string-refs": "warn",// string型別的refs報warn
        "no-unreachable-loop": "off","eol-last": ["error","always"] // 檔案末尾需要多空一行
    }
}

3.安裝Eslint,Prettier Eslint外掛

4.如果不可以檢查一下Prettier ESlint需要的包有沒有安裝

到此這篇關於React專案中eslint使用百度風格的文章就介紹到這了,更多相關React專案使用eslint內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！