eslint-plugin-neeto

An ESLint plugin for enforcing common front-end best practices specifically for neeto.

Usage

Install the plugin from npm:

yarn add -D "@bigbinary/eslint-plugin-neeto@latest"

In your .eslintrc.js file, add neeto in the plugins list and add the configuration 'recommended' in extends with prefix as 'plugin:'.

module.exports = {
  // ...other configurations
  plugins: [
    // ...other plugins
    "@bigbinary/neeto",
  ],
  extends: [
    "plugin:@bigbinary/neeto/recommended",
    // ...other plugins/extensions
  ],
};

Optionally, if you don't need all the recommended rules, follow this approach:

module.exports = {
  // ...other configurations
  plugins: [
    // ...other plugins
    "@bigbinary/neeto",
  ],
  rules: {
    "@bigbinary/neeto/ramda-tips": "warn",
    // ...other rules
  },
};

Exported rules

ESLint rules are categorized as either errors or warnings based on the severity of the issues identified in JavaScript code.

Errors

• switch-children-must-be-route-or-redirect
• no-unnecessary-classnames
• no-local-storage
• no-lowercase-on-translation
• use-use-query-client-hook
• use-classnames-for-dynamic-classes
• use-use-mutation-with-invalidation-hook
• no-withT-for-smart-components
• no-large-functions-inside-jsx
• use-standard-date-time-formats
• no-dumb-components-with-use-translation
• no-unnecessary-if-condition
• api-connector-name-should-match-filename
• api-connector-should-use-default-export
• ensure-compact-objects
• ensure-formik-eager-validation
• ensure-zustand-stores-are-type-annotated
• files-inside-react-query-folder-should-end-with-api
• minimize-zustand-store-access-scope
• no-axios-import-outside-apis
• no-blacklisted-imports
• no-buildurl-call-with-empty-params
• no-conditional-overlays
• no-deprecated-imports-from-zustand
• no-edits-to-generated-translation-files
• no-dangling-constants
• no-globalProps-destructure
• no-globalProps-reassignment
• no-missing-localization
• no-multiple-components-in-a-file
• no-multiple-translation-functions-under-same-parent
• no-namespace-specifier-import-for-ramda
• no-redundant-jsx-expression
• no-redundant-string-templates
• no-routes-destructure-and-reassignment
• no-translation-functions-in-string-interpolation
• prefix-neeto-ui-import-alias
• routes-should-be-declared-and-default-exported
• routes-should-match-object-path
• use-array-methods
• use-axios-config-for-passing-query-parameters
• use-camel-case-or-pascal-case-for-function-names
• use-common-routes
• use-components-children-prop-in-trans
• use-create-subscription-util-function
• use-i18next-plurals
• use-inline-svg-for-render
• use-pluralize-package
• use-react-query-for-managing-remote-data
• use-snake-case-for-api-connector-filename
• use-translation-hook-in-components
• use-trans-components-and-values-props
• use-zustand-for-global-state-management
• webpack-aliases-and-jsconfig-paths-should-be-in-sync
• zustand-recommend-comparator-function-usage
• zustand-use-prop-to-pick-single-item
• use-zustand-pick-transformer
• props-inside-spread-attributes-should-be-sorted
• merge-spread-attributes
• props-with-different-key-value-should-be-outside-spread-attribute
• no-repetition-in-prop-key-value-names
• zustand-use-with-immutable-actions-wrapper-inside-create
• add-required-peer-dependencies
• move-spread-attributes-to-top-position
• use-show-thumbs-up-toastr
• ensure-usestate-has-initial-value
• ensure-peer-dependencies-are-in-sync
• use-dayjs-from-neeto-commons-fronted
• standardize-help-urls

Warnings

• ramda-tips
• combine-multiple-independent-awaits
• consistent-button-link-anchor
• file-name-and-export-name-standards
• hard-coded-strings-should-be-localized
• jsx-prefer-guard-clause.md
• neetocommons-tips
• no-excess-function-arguments
• no-snake-case-destructuring-for-use-query-params-and-get-query-params
• prefer-function-reference.md
• use-common-constants
• use-early-return
• use-functions-and-hooks-from-neeto-commons-frontend.md
• use-title-case-neeto-in-strings
• use-neetoui-classes
• use-permissions-prop-in-private-route
• use-webpack-alias
• use-neetoui-action-block-in-formik-forms
• prefer-radio-buttons-for-few-options

Overriding rules

ESLint Errors

ESLint errors flag the mandatory coding standards that developers must strictly adhere to. These errors are detected by the pre-commit hook and in CI checks. There may be instances where we intentionally choose to adopt a particular coding style and wish to prevent ESLint from throwing errors. In such cases, you can temporarily disable the rule responsible for the false alarm by adding a comment above the code, specifying the reason why you have disabled that particular rule for that line to avoid any future confusion:

// Reason for disabling the rule.
// eslint-disable-next-line <rule>

ESLint Warnings

When creating an ESLint rule, it may not always be possible to cover every edge case and eliminate all false positives. Such rules have been configured as warnings instead of errors. These warnings are not flagged during pre-commit hooks or CI checks. Nevertheless, ESLint warnings also need to be treated in the same way as ESLint errors. It's recommended to review and address them whenever feasible. However, if you find that the suggestion does not apply to your specific situation, you have the flexibility to disregard it.

Other references

• Development instructions
• Creating new rules
• Running test
• Building and releasing