詳解React項目中eslint使用百度風格
更新時間:2021年09月22日 11:43:30 作者:無關風月
這篇文章主要介紹了React項目中eslint使用百度風格,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
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 @typescript-eslint/parser @typescript-eslint/eslint-plugin
2.配置.eslintrc文件
{
"parser": "@typescript-eslint/parser", // typescript解析器
"extends": [
"@ecomfe/eslint-config", // 繼承廠內EE-eslint規(guī)則配置
"@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/no-unused-vars": [
"warn",
{
"vars": "all",
"args": "after-used",
"ignoreRestSiblings": false
}
], // 使用@typescript-eslint/no-unused-vars配置
"import/no-unresolved": "off",
"react/jsx-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的規(guī)則
"react-hooks/exhaustive-deps": "warn", // 檢查effect的依賴
"max-params": [
"warn",
8
], // 方法最多8個參數
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": [
"error",
{
"functions": false,
"variables": false
}
], // 注意:方法和變量可以在使用之后定義!為了解決hooks中經常會出現(xiàn)的循環(huán)依賴的問題,不過要注意危險
"react/jsx-no-bind": [
"warn",
{
"allowArrowFunctions": true // 暫且允許箭頭函數,來提升代碼可讀性
}
],
"max-nested-callbacks": [
"warn",
4
], // 循環(huán)最多4層,超過4層警告
"react/require-default-props": "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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React實現(xiàn)二級聯(lián)動效果(樓梯效果)
這篇文章主要為大家詳細介紹了React實現(xiàn)二級聯(lián)動效果,樓梯效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
利用React Router4實現(xiàn)的服務端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實現(xiàn)的服務端直出渲染(SSR),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01

