|
| 1 | +# Contributing |
| 2 | + |
| 3 | +👍🎉 First off, thanks for taking the time to contribute! 🎉👍 |
| 4 | + |
| 5 | + |
| 6 | +## Reporting bugs |
| 7 | + |
| 8 | +To report a bug, [open an issue][new-issue]. |
| 9 | + |
| 10 | +If you are unsure whether something is a bug or not, please [open an issue][new-issue]. Insufficient documentation is also a bug. |
| 11 | + |
| 12 | + |
| 13 | +## Suggesting new features |
| 14 | + |
| 15 | +New features can be a new rule, anew option for an existing rule, or new functionality for existing rules. |
| 16 | + |
| 17 | +To suggest a new feature, [open an issue][new-issue]. |
| 18 | + |
| 19 | + |
| 20 | +## Making pull requests |
| 21 | + |
| 22 | +(If this is your first pull request on GitHub, checkout [this guide](https://github.com/firstcontributions/first-contributions).) |
| 23 | + |
| 24 | + |
| 25 | +### Getting started |
| 26 | + |
| 27 | +- This is a TypeScript project. You need to have a recentish version of [Node.js](https://nodejs.org/) and npm installed. |
| 28 | +- Install all project and development dependencies by running `npm ci`. |
| 29 | +- Test that everything is installed correctly by running `npm test`. |
| 30 | + |
| 31 | +We use [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) to lint and format our code base. They will be automatically installed as dependencies but you might need additional editor plugins for a good IDE experience. We recommend using [VSCode](https://code.visualstudio.com/) together with the [ESLint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for a great editing experience. |
| 32 | + |
| 33 | + |
| 34 | +### Creating a new rule |
| 35 | + |
| 36 | +The following steps will walk you through the process of creating a new rule. |
| 37 | + |
| 38 | +1. Run `npm run new <rule-name>`: |
| 39 | + |
| 40 | + This will automatically create 3 files: |
| 41 | + |
| 42 | + 1. `lib/rules/rule-name.ts` - Implementation + meta information (name, category, short desc, etc.) |
| 43 | + 1. `tests/lib/rules/rule-name.ts` - Functional tests |
| 44 | + 1. `docs/rules/rule-name.md` - Documentation |
| 45 | + |
| 46 | + These 3 files contain all the information about your new rule. You only need to touch these 3 files to add your rule. |
| 47 | + |
| 48 | +1. Add meta information: |
| 49 | + |
| 50 | + Fill in the rule's meta information in the `meta` object. This includes a short description, its category, type, and more. |
| 51 | + |
| 52 | + Note: Do not set `recommended: true`. This will add your rule to the `regex/recommended` configuration. We view additions to the `regex/recommended` configuration as breaking changes. If you want your rule to be included in the `regex/recommended` configuration in the next major release, leave the generated TODO comment as is. |
| 53 | + |
| 54 | + Once you added a short description and the category, run `npm run update`. This will update a few generated files to include your rule in the website and more. |
| 55 | + |
| 56 | +1. Implement your rule: |
| 57 | + |
| 58 | + The `createVisitor` function will be where you implement your rule. The `regexpContext` object contains information and methods that you will need for static analysis, reporting, and fixing. Use `messageId`s for report and suggestion messages. |
| 59 | + |
| 60 | + The [`no-empty-capturing-group`](./lib/rules/no-empty-capturing-group.ts) and [`no-octal`](./lib/rules/no-octal.ts) rules are good examples to see how we usually implement rules. |
| 61 | + |
| 62 | +1. Test your rule: |
| 63 | + |
| 64 | + Add test for every feature and option of your rule. (We use [ESLint's `RuleTester`](https://eslint.org/docs/developer-guide/nodejs-api#ruletester) for testing rules.) |
| 65 | + |
| 66 | + Use `npm test` to run all tests. |
| 67 | + |
| 68 | +1. Document your rule: |
| 69 | + |
| 70 | + The documentation should contain a description of the rule and the problem it detects/solves, examples, all features, all options, and any additional information relevant to the rule. |
| 71 | + |
| 72 | + You can view the documentation live in your browser by running `npm run build && npm run docs:watch`. The live view will automatically update when you make changes to the documentation. However, you have to re-run the command to see changes to the rule implementation. |
| 73 | + |
| 74 | + |
| 75 | +### Updating documentation |
| 76 | + |
| 77 | +Almost all Markdown files of our website and the project `README.md` are partially or completely generated. |
| 78 | + |
| 79 | +The following files are completely generated and must not be modified directly: |
| 80 | + |
| 81 | +- `docs/README.md` - change this section of the project `README.md` instead. |
| 82 | +- `docs/rules/README.md` |
| 83 | +- `docs/user-guide/README.md` - change this section of the project `README.md` instead. |
| 84 | + |
| 85 | +The following files are partially generated: |
| 86 | + |
| 87 | +- `README.md`: The rules table is generated. |
| 88 | +- `docs/rules/*.md`: Everything above the ":book: Rule Details" heading and below the ":mag: Implementation" heading is generated. |
| 89 | + |
| 90 | +Only change the non-generated parts in these files. |
| 91 | + |
| 92 | +After you changed the documentation, run `npm run update` to update all generated files. Be sure to always run this command before you commit any documentation changes. |
| 93 | + |
| 94 | +You can view changes to the website locally by running `npm run docs:watch`. |
| 95 | + |
| 96 | + |
| 97 | +### Testing |
| 98 | + |
| 99 | +Aside from `npm test`, there are also a few other ways to manually test new features, changes, and new rules. |
| 100 | + |
| 101 | +1. `npm run build && npm run docs:watch`: |
| 102 | + |
| 103 | + The documentation page of each rule includes interactive examples. You can also use your local version of [the playground](https://ota-meshi.github.io/eslint-plugin-regexp/playground/) to for testing. |
| 104 | + |
| 105 | +1. Test your rule and the whole plugin by installing it. |
| 106 | + |
| 107 | + If there is a project/code base you want to test your rule/the entire plugin on, then installing this project will be the right solution. |
| 108 | + |
| 109 | + [Setup ESLint](https://eslint.org/docs/user-guide/getting-started) in the target project. Instead of installing the `eslint-plugin-regexp` from the npm registry, install your local `eslint-plugin-regexp` project using the relative path to the project. |
| 110 | + |
| 111 | + Example: |
| 112 | + |
| 113 | + ``` |
| 114 | + projects/ |
| 115 | + ├── target/ |
| 116 | + | └── package.json |
| 117 | + └── eslint-plugin-regexp/ |
| 118 | + └── package.json |
| 119 | + ``` |
| 120 | +
|
| 121 | + ```console |
| 122 | + projects/target$ npm i -D ../eslint-plugin-regexp |
| 123 | + ``` |
| 124 | +
|
| 125 | + Note: If you make changes to the implementation of a rule, you'll have to run `npm run build` before these changes show up in the target project. |
| 126 | +
|
| 127 | +
|
| 128 | +<!-- Important links --> |
| 129 | +
|
| 130 | +[new-issue]: https://github.com/PrismJS/prism/issues/new/choose |
0 commit comments