Eslint-plugin-react: Các quy tắc kiểm tra cụ thể cho React trong ESLint

eslint-plugin-react

===================

Các quy tắc kiểm tra cụ thể cho React trong eslint

Cài đặt

npm install eslint eslint-plugin-react --save-dev

Bạn cũng có thể cài đặt ESLint toàn cầu thay vì cài đặt cục bộ (sử dụng npm install -g eslint). Tuy nhiên, điều này không được khuyến nghị và bất kỳ plugin hoặc cấu hình có thể sử dụng phải được cài đặt cục bộ trong cả hai trường hợp.

Cấu hình (cũ: .eslintrc*)

Sử dụng bộ cài đặt mặc định của chúng tôi để có giá trị mặc định hợp lý:

  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

Nếu bạn đang sử dụng new JSX transform from React 17, mở rộng react/jsx-runtime trong cấu hình eslint của bạn (thêm "plugin:react/jsx-runtime" vào "extends") để tắt các quy tắc liên quan.

Bạn cũng nên chỉ định các thiết lập sẽ được chia sẻ trên tất cả các quy tắc của plugin. (More about eslint shared settings)

{
  "settings": {
    "react": {
      "createClass": "createReactClass", // Regex for Component Factory to use,
                                         // default to "createReactClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
      "version": "detect", // React version. "detect" automatically picks the version you have installed.
                           // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
                           // It will default to "latest" and warn if missing, and to "detect" in the future
      "flowVersion": "0.53" // Flow version
    },
    "propWrapperFunctions": [
        // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
        "forbidExtraProps",
        {"property": "freeze", "object": "Object"},
        {"property": "myFavoriteWrapper"},
        // for rules that check exact prop wrappers
        {"property": "forbidExtraProps", "exact": true}
    ],
    "componentWrapperFunctions": [
        // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
        "observer", // `property`
        {"property": "styled"}, // `object` is optional
        {"property": "observer", "object": "Mobx"},
        {"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to
    ],
    "formComponents": [
      // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
      "CustomForm",
      {"name": "Form", "formAttribute": "endpoint"}
    ],
    "linkComponents": [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      "Hyperlink",
      {"name": "Link", "linkAttribute": "to"}
    ]
  }
}

Nếu bạn không sử dụng bộ cài đặt mặc định, bạn sẽ cần chỉ định từng quy tắc cá nhân và thêm cấu hình bổ sung.

Thêm “react” vào phần plugins.

{
  "plugins": [
    "react"
  ]
}

Bật hỗ trợ JSX.

Với eslint 2+

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Bật các quy tắc mà bạn muốn sử dụng.

  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }

Cấu hình có thể chia sẻ

Đề xuất

Plugin này xuất bản một cấu hình recommended thực hiện các thực hành tốt của React.

Để bật cấu hình này, sử dụng thuộc tính extends trong tệp cấu hình .eslintrc của bạn:

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Xem eslint documentation để biết thêm thông tin về việc mở rộng tệp cấu hình.

Tất cả

Plugin này cũng xuất bản một cấu hình all bao gồm tất cả các quy tắc có sẵn. Điều này phù hợp với quy tắc eslint:all.

{
  "plugins": [
    "react"
  ],
  "extends": ["eslint:all", "plugin:react/all"]
}

Lưu ý : Các cấu hình này sẽ nhập eslint-plugin-react và bật JSX trong parser options.

Cấu hình (mới: eslint.config.js)

Cảm ơn bạn!
Từ v8.21.0, eslint đã công bố một hệ thống cấu hình mới. Trong hệ thống mới này, không còn sử dụng tệp .eslintrc* nữa. eslint.config.js sẽ là tên tệp cấu hình mặc định. Trong eslint v8, hệ thống cũ (.eslintrc*) vẫn được hỗ trợ, trong khi trong eslint v9, chỉ hệ thống mới sẽ được hỗ trợ.

Và từ v8.23.0, dòng lệnh CLI của eslint bắt đầu tìm tệp eslint.config.js. Vì vậy, nếu phiên bản eslint của bạn là**> =8.23.0**, bạn đã sẵn sàng 100% để sử dụng hệ thống cấu hình mới.

Bạn có thể muốn kiểm tra các bài viết trên blog chính thức,

• https://eslint.org/blog/2022/08/new-config-system-part-1/
• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/blog/2022/08/new-config-system-part-3/

và official docs.

Plugin

Export mặc định của eslint-plugin-react là một đối tượng plugin.

const react = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      react,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
      },
    },
    rules: {
      // ... any rules you want
      'react/jsx-uses-react': 'error',
      'react/jsx-uses-vars': 'error',
     },
    // ... others are omitted for brevity
  },
  …
];

Cấu hình các thiết lập chia sẻ

Tham khảo official docs.

Cấu trúc của đối tượng settings.react sẽ giống với những gì đã được mô tả ở phần cấu hình cũ ở trên.

Cấu hình có thể chia sẻ

Cũng có 3 cấu hình có thể chia sẻ.

• eslint-plugin-react/configs/all
• eslint-plugin-react/configs/recommended
• eslint-plugin-react/configs/jsx-runtime

Nếu tệp eslint.config.js của bạn là ESM, hãy bao gồm phần mở rộng .js (ví dụ: eslint-plugin-react/recommended.js). Lưu ý rằng phiên bản semver-major tiếp theo sẽ yêu cầu loại bỏ phần mở rộng cho các lệnh nhập này.

Lưu ý : Các cấu hình này sẽ nhập eslint-plugin-react và bật JSX trong languageOptions.parserOptions.

Trong hệ thống cấu hình mới, giao thức plugin: (ví dụ: plugin:react/recommended) không còn hợp lệ nữa. Vì eslint không tự động nhập cấu hình preset (cấu hình có thể chia sẻ), bạn phải tự nhập chúng.

const reactRecommended = require('eslint-plugin-react/configs/recommended');

module.exports = [
  …
  reactRecommended, // This is not a plugin object, but a shareable config object
  …
];

Tất nhiên, bạn có thể thêm/chèn một số thuộc tính khác.

Lưu ý : Các cấu hình có thể chia sẻ của chúng tôi không cấu hình trước files hoặc languageOptions.globals. Đối với hầu hết các trường hợp, bạn có thể muốn tự cấu hình một số thuộc tính.

const reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactRecommended,
    languageOptions: {
      ...reactRecommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

Cảm ơn bạn!
Ví dụ trên giống với ví dụ dưới đây, vì hệ thống cấu hình mới dựa trên việc kết nối.

const reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactRecommended,
  },
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

Danh sách các quy tắc được hỗ trợ

💼 Configurations được kích hoạt trong.
🚫 Configurations bị vô hiệu trong.
🏃 Đặt trong jsx-runtime configuration.
☑️ Đặt trong recommended configuration.
🔧 Có thể tự động sửa chữa bởi –fix CLI option.
💡 Có thể sửa chữa thủ công bởi editor suggestions.
❌ Đã lỗi thời.

Tên	Mô tả	💼	🚫	🔧	💡	❌
boolean-prop-naming	Đảm bảo tên gọi nhất quán cho các thuộc tính boolean
button-has-type	Không cho phép sử dụng phần tử button mà không có thuộc tính type rõ ràng
default-props-match-prop-types	Bắt buộc tất cả defaultProps phải có một PropType không bắt buộc tương ứng
destructuring-assignment	Bắt buộc sử dụng đồng nhất của việc gán giá trị, trạng thái và ngữ cảnh			🔧
display-name	Không cho phép thiếu displayName trong định nghĩa thành phần React	☑️
forbid-component-props	Không cho phép một số thuộc tính trên các thành phần
forbid-dom-props	Không cho phép một số thuộc tính trên các Đối tượng DOM
forbid-elements	Không cho phép một số phần tử
forbid-foreign-prop-types	Không cho phép sử dụng propTypes từ một thành phần khác
forbid-prop-types	Không cho phép một số propTypes
function-component-definition	Bắt buộc một loại hàm cụ thể cho các thành phần hàm			🔧
hook-use-state	Đảm bảo việc phân rã và đặt tên đối xứng của giá trị kết nối hook và biến thiết lập				💡
iframe-missing-sandbox	Bắt buộc thuộc tính sandbox trên các phần tử iframe
jsx-boolean-value	Bắt buộc cú pháp thuộc tính boolean trong JSX			🔧
jsx-child-element-spacing	Bắt buộc hoặc không cho phép khoảng cách trong dấu ngoặc nhọn trong các thuộc tính và biểu thức JSX
jsx-closing-bracket-location	Bắt buộc vị trí dấu ngoặc nhọn đóng trong JSX			🔧
jsx-closing-tag-location	Bắt buộc vị trí của thẻ đóng trong JSX đa dòng			🔧
jsx-curly-brace-presence	Không cho phép biểu thức JSX không cần thiết khi chỉ cần dùng các ký tự độc lập hoặc bắt buộc biểu thức JSX trên các ký tự độc lập trong JSX con hoặc thuộc tính			🔧
jsx-curly-newline	Bắt buộc dấu ngắt dòng nhất quán trong dấu ngoặc nhọn trong thuộc tính và biểu thức JSX			🔧
jsx-curly-spacing	Bắt buộc hoặc không cho phép khoảng trống trong dấu ngoặc nhọn trong thuộc tính và biểu thức JSX			🔧
jsx-equals-spacing	Bắt buộc hoặc không cho phép khoảng trống xung quanh dấu bằng trong các thuộc tính JSX			🔧
jsx-filename-extension	Không cho phép phần mở rộng tệp có thể chứa JSX
jsx-first-prop-new-line	Bắt buộc vị trí đúng của thuộc tính đầu tiên trong JSX			🔧
jsx-fragments	Bắt buộc dạng rút gọn hoặc hình thức tiêu chuẩn cho các đoạn React			🔧
jsx-handler-names	Bắt buộc quy tắc đặt tên xử lý sự kiện trong JSX
jsx-indent	Bắt buộc thụt đầu dòng JSX			🔧
jsx-indent-props	Bắt buộc thụt lề props trong JSX			🔧
jsx-key	Không cho phép thiếu key props trong vòng lặp/ký tự tập hợp	☑️
jsx-max-depth	Bắt buộc độ sâu tối đa của JSX
jsx-max-props-per-line	Bắt buộc tối đa các props trên một dòng duy nhất trong JSX			🔧
jsx-newline	Yêu cầu hoặc ngăn chặn một dòng mới sau các phần tử và biểu thức jsx.			🔧
jsx-no-bind	Không cho phép .bind() hoặc hàm mũi tên trong props JSX
jsx-no-comment-textnodes	Không cho phép chèn ghi chú dưới dạng các nút văn bản	☑️
jsx-no-constructed-context-values	Không cho phép các giá trị nguồn cung cấp ngữ cảnh JSX được lấy từ các giá trị sẽ gây ra sự làm mới không cần thiết
jsx-no-duplicate-props	Không cho phép các thuộc tính trùng lặp trong JSX	☑️
jsx-no-leaked-render	Không cho phép giá trị rò rỉ gây ra vấn đề được hiển thị			🔧
jsx-no-literals	Không cho phép sử dụng chuỗi ký tự dạng literal trong JSX
jsx-no-script-url	Không cho phép sử dụng URL javascript:
jsx-no-target-blank	Không cho phép thuộc tính target="_blank" mà không có rel="noreferrer"	☑️		🔧
jsx-no-undef	Không cho phép biến chưa được khai báo trong JSX	☑️
jsx-no-useless-fragment	Không cho phép fragment không cần thiết			🔧
jsx-one-expression-per-line	Yêu cầu một phần tử JSX trên mỗi dòng			🔧
jsx-pascal-case	Bắt buộc PascalCase cho các thành phần JSX do người dùng định nghĩa
jsx-props-no-multi-spaces	Không cho phép khoảng trống nhiều lần giữa các props JSX trong cùng một dòng			🔧
jsx-props-no-spreading	Không cho phép sự lan truyền của props JSX
jsx-sort-default-props	Bắt buộc sắp xếp các khai báo defaultProps theo thứ tự chữ cái					❌
jsx-sort-props	Bắt buộc sắp xếp các props theo thứ tự chữ cái			🔧
jsx-space-before-closing	Bắt buộc khoảng trống trước dấu đóng ngoặc trong JSX			🔧		❌
jsx-tag-spacing	Bắt buộc dấu cách trong và xung quanh dấu mở ngoặc và đóng ngoặc trong JSX			🔧
jsx-uses-react	Không cho phép React được đánh dấu sai là không sử dụng	☑️	🏃
jsx-uses-vars	Không cho phép biến được sử dụng trong JSX được đánh dấu sai là không sử dụng	☑️
jsx-wrap-multilines	Không cho phép thiếu dấu ngoặc đơn quanh JSX đa dòng			🔧
no-access-state-in-setstate	Không cho phép truy cập this.state trong phương thức setState
no-adjacent-inline-elements	Không cho phép các phần tử trực tiếp liền kề mà không có khoảng trắng phân cách.
no-array-index-key	Không cho phép sử dụng chỉ mục mảng trong các khóa
no-arrow-function-lifecycle	Các phương thức vòng đời nên là phương thức trên prototype, không phải là trường lớp			🔧
no-children-prop	Không cho phép truyền children như props	☑️
no-danger	Không cho phép sử dụng các thuộc tính JSX nguy hiểm
no-danger-with-children	Không cho phép khi một phần tử DOM đang sử dụng cả children và dangerouslySetInnerHTML	☑️
no-deprecated	Không cho phép sử dụng các phương thức đã lỗi thời	☑️
no-did-mount-set-state	Không cho phép sử dụng setState trong componentDidMount
no-did-update-set-state	Không cho phép sử dụng setState trong componentDidUpdate
no-direct-mutation-state	Không cho phép sửa đổi trực tiếp this.state	☑️
no-find-dom-node	Không cho phép sử dụng findDOMNode	☑️
no-invalid-html-attribute	Không cho phép sử dụng các thuộc tính không hợp lệ				💡
no-is-mounted	Không cho phép sử dụng isMounted	☑️
no-multi-comp	Không cho phép định nghĩa nhiều thành phần trong cùng một tệp
no-namespace	Bắt buộc không sử dụng các không gian tên trong các phần tử React
no-object-type-as-default-prop	Không cho phép sử dụng biến kiểu tham chiếu như tham số mặc định trong thành phần chức năng
no-redundant-should-component-update	Không cho phép sử dụng shouldComponentUpdate khi mở rộng React.PureComponent
no-render-return-value	Không cho phép sử dụng giá trị trả về của ReactDOM.render	☑️
no-set-state	Không cho phép sử dụng setState
no-string-refs	Không cho phép sử dụng tham chiếu kiểu chuỗi	☑️
no-this-in-sfc	Không cho phép sử dụng this trong các thành phần chức năng không có trạng thái
no-typos	Không cho phép các lỗi chính tả phổ biến
no-unescaped-entities	Không cho phép các thực thể HTML chưa được thoát xuất hiện trong mã đánh dấu	☑️
no-unknown-property	Không cho phép sử dụng thuộc tính DOM không rõ	☑️		🔧
no-unsafe	Không cho phép sử dụng các phương thức vòng đời không an toàn		☑️
no-unstable-nested-components	Không cho phép tạo các thành phần không ổn định bên trong các thành phần khác
no-unused-class-component-methods	Không cho phép khai báo các phương thức không sử dụng của lớp thành phần
no-unused-prop-types	Không cho phép định nghĩa các propTypes không sử dụng
no-unused-state	Không cho phép định nghĩa trạng thái không sử dụng
no-will-update-set-state	Không cho phép sử dụng setState trong componentWillUpdate
prefer-es6-class	Bắt buộc sử dụng lớp ES5 hoặc ES6 cho các thành phần React
prefer-exact-props	Ưu tiên định nghĩa kiểu PropTypes chính xác
prefer-read-only-props	Bắt buộc thuộc tính (props) phải chỉ đọc			🔧
prefer-stateless-function	Bắt buộc các thành phần stateless được viết như một hàm thuần túy
prop-types	Cấm thiếu kiểm tra props trong định nghĩa thành phần React	☑️
react-in-jsx-scope	Cấm thiếu React khi sử dụng JSX	☑️	🏃
require-default-props	Bắt buộc định nghĩa defaultProps cho mọi props không bắt buộc
require-optimization	Bắt buộc các thành phần React phải có phương thức shouldComponentUpdate
require-render-return	Bắt buộc sử dụng lớp ES5 hoặc ES6 để trả về giá trị trong hàm render	☑️
self-closing-comp	Cấm các thẻ đóng thừa cho các thành phần không có con			🔧
sort-comp	Bắt buộc sắp xếp thứ tự các phương thức của thành phần
sort-default-props	Bắt buộc sắp xếp theo thứ tự chữ cái các khai báo defaultProps
sort-prop-types	Bắt buộc sắp xếp theo thứ tự chữ cái các khai báo propTypes			🔧
state-in-constructor	Bắt buộc khởi tạo trạng thái của thành phần lớp trong constructor
static-property-placement	Bắt buộc đặt vị trí của các thuộc tính tĩnh của thành phần React
style-prop-object	Bắt buộc giá trị prop style phải là một đối tượng
void-dom-elements-no-children	Cấm các phần tử DOM rỗng (ví dụ: , ) nhận thêm phần tử con

Các plugin hữu ích khác

• Quy tắc Hooks: eslint-plugin-react-hooks
• Tiện ích truy cập JSX: eslint-plugin-jsx-a11y
• React Native: eslint-plugin-react-native

Thông tin tải về:

Tác giả: jsx-eslint
Mã nguồn: https://github.com/jsx-eslint/eslint-plugin-react
Giấy phép: MIT license

Cảm ơn bạn!