ESLINT-PLUGIN-OKTA

This package contains Okta's custom ESlint rules.

Table of Contents

• Configuration
• Rules
• Processors
• Writing a new rule

Configuration

This plugin provides a sharable configuration that can be extended in any UI project.

To use this preset, add the following to your configuration file:

module.exports = {
  extends: [
    'plugin:@okta/okta/recommended',
    'plugin:@okta/okta/courage-app', // Intended for Courage-based web applications
  ],
}

Extending an existing config with this sharable configuration will result in all *.properties and *.js files in your project to be checked. To apply rules specifically to *.js files, utilize the overrides entry to separate these rules:

module.exports = {
  extends: [
    'plugin:@okta/okta/recommended',
  ],
  overrides: [
    {
      files: ['*.js'],
      rules: [
        'max-len': ['error', { code: 120 }],
        // List of additional rules to be run on JS files
      ]
    },
  ]
}

Rules

| Rule | Description | |------------------------------------------------------------------------------------|---------------------------------------------------------------------------| | no-exclusive-language | Disallow exclusionary words | | no-mission-i18n-comments | Disallow messages without comments for arguments and single-word messages | | no-unlocalized-text | Disallow hardcoded English text in Courage components | | no-unlocalized-text-in-templates | Disallow hardcoded English text in templates |

Processors

| Processors | Description | | -- | -- | | properties | Parse properties files as JavaScript |

Writing a new rule

Custom rules follow the standard ESLint guidelines - check out their Working with Rules page for a good primer. When writing rules, you'll often need to find the right Selector to match the nodes you want to test against - a useful tool for finding these is the AST Explorer.

Once you've got the basics down, create these 3 files. When coming up with a rule name, follow the Rule Naming Conventions, and check out ESLint's list of rules for examples of good rule names.

1. lib/rules/${your-rule}.js

   This is the rule definition. If it's possible, add a fix function to the rule.

2. lib/rules/${your-rule}.test.js

   This is the test file. We use ESLint's RuleTester, which makes this extra easy.

3. docs/rules/${your-rule}.md

   This is the documentation for your rule. Check out the existing docs, or brows through ESLint's own rule docs for good examples of what you should write.

As you're writing your rule, you can run the tests with yarn:

yarn test