Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of the use of Baidu style of eslint in the React project, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

1. Install Baidu Eslint Rule plug-in

Npm I-D eslint @ babel/eslint-parser @ babel/eslint-plugin @ ecomfe/eslint-config// react Project npm I-D eslint-plugin-react eslint-plugin-react-hooks / / if typescript support is needed, npm I-D @ typescript-eslint/parser @ typescript-eslint/eslint-plugin

two。 Configure the .eslintrc file

{"parser": "@ typescript-eslint/parser", / / typescript parser "extends": ["@ ecomfe/eslint-config", / / inherit factory EE-eslint rule configuration "@ ecomfe/eslint-config/react"], "plugins": ["@ typescript-eslint", / / add some typescript syntax check "react" / / react grammar check "react-hooks" / / hooks grammar check], "rules": {"indent": ["error", 4, {"SwitchCase": 1}], / / enforce 4-case style "no-unused-vars": "off" / / turn off eslint no-unused-vars default configuration "@ typescript-eslint/no-unused-vars": ["warn", {"vars": "all", "args": "after-used", "ignoreRestSiblings": false}] / / use @ typescript-eslint/no-unused-vars to configure "import/no-unresolved": "off", "react/jsx-uses-react": 2, / / screen "React" is defined but never used error "import/order": "off", / / No need to introduce sequential verification "comma-dangle": ["off"] / / do not allow the last superfluous comma "@ typescript-eslint/consistent-type-definitions": ["off"], / / first off "react-hooks/rules-of-hooks": "error", / / check the Hook rule "react-hooks/exhaustive-deps": "warn" / / check effect dependency "max-params": ["warn", 8], / / method up to 8 parameters "no-use-before-define": "off", "@ typescript-eslint/no-use-before-define": ["error", {"functions": false "variables": false}], / / Note: methods and variables can be defined after use! In order to solve the problem of circular dependency that often occurs in hooks, we should pay attention to the danger of "react/jsx-no-bind": ["warn", {"allowArrowFunctions": true / / allow arrow functions for the time being. To improve the readability of the code}], "max-nested-callbacks": ["warn", 4], / / loop up to 4 layers More than 4 layers of warning "react/require-default-props": "off", / / optional attributes of components are not required to have a default value of "react/no-find-dom-node": "off", / / allow the use of react-dom 's findDOMNode method "@ babel/object-curly-spacing": "off", "object-curly-spacing": ["off" for the time being "always", {"arraysInObjects": false}], / / whether the space "brace-style": ["off", "1tbs"], "react/no-string-refs": "warn" is allowed in object parentheses / / refs of string type warn "no-unreachable-loop": "off", "eol-last": ["error", "always"] / / multiple blank lines are required at the end of the file}}

3. Install the Eslint, Prettier Eslint plug-in

4. If it is not possible to check whether the package required by Prettier ESlint is installed

Thank you for reading this article carefully. I hope the article "sample Analysis of eslint using Baidu style in React Project" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.