]> git.proxmox.com Git - pve-eslint.git/blame - eslint/docs/src/extend/plugins.md
import 8.41.0 source
[pve-eslint.git] / eslint / docs / src / extend / plugins.md
CommitLineData
f2a92ac6
DC
1---
2title: Create Plugins
3eleventyNavigation:
4 key: create plugins
5 parent: extend eslint
6 title: Create Plugins
7 order: 2
8
9---
10
11An ESLint plugin is an extension for ESLint that adds additional rules and configuration options. Plugins let you customize your ESLint configuration to enforce rules that are not included in the core ESLint package. Plugins can also provide additional environments, custom processors, and configurations.
12
13## Name a Plugin
14
15Each plugin is an npm module with a name in the format of `eslint-plugin-<plugin-name>`, such as `eslint-plugin-jquery`. You can also use scoped packages in the format of `@<scope>/eslint-plugin-<plugin-name>` such as `@jquery/eslint-plugin-jquery` or even `@<scope>/eslint-plugin` such as `@jquery/eslint-plugin`.
16
17## Create a Plugin
18
19The easiest way to start creating a plugin is to use the [Yeoman generator](https://www.npmjs.com/package/generator-eslint). The generator will guide you through setting up the skeleton of a plugin.
20
21### Metadata in Plugins
22
23For easier debugging and more effective caching of plugins, it's recommended to provide a name and version in a `meta` object at the root of your plugin, like this:
24
25```js
26// preferred location of name and version
27module.exports = {
28 meta: {
29 name: "eslint-plugin-custom",
30 version: "1.2.3"
31 }
32};
33```
34
35The `meta.name` property should match the npm package name for your plugin and the `meta.version` property should match the npm package version for your plugin. The easiest way to accomplish this is by reading this information from your `package.json`.
36
37As an alternative, you can also expose `name` and `version` properties at the root of your plugin, such as:
38
39```js
40// alternate location of name and version
41module.exports = {
42 name: "eslint-plugin-custom",
43 version: "1.2.3"
44};
45```
46
47While the `meta` object is the preferred way to provide the plugin name and version, this format is also acceptable and is provided for backward compatibility.
48
49### Rules in Plugins
50
51Plugins can expose custom rules for use in ESLint. To do so, the plugin must export a `rules` object containing a key-value mapping of rule ID to rule. The rule ID does not have to follow any naming convention (so it can just be `dollar-sign`, for instance). To learn more about creating custom rules in plugins, refer to [Custom Rules](custom-rules).
52
53```js
54module.exports = {
55 rules: {
56 "dollar-sign": {
57 create: function (context) {
58 // rule implementation ...
59 }
60 }
61 }
62};
63```
64
65To use the rule in ESLint, you would use the unprefixed plugin name, followed by a slash, followed by the rule name. So if this plugin were named `eslint-plugin-myplugin`, then in your configuration you'd refer to the rule by the name `myplugin/dollar-sign`. Example: `"rules": {"myplugin/dollar-sign": 2}`.
66
67### Environments in Plugins
68
69Plugins can expose additional environments for use in ESLint. To do so, the plugin must export an `environments` object. The keys of the `environments` object are the names of the different environments provided and the values are the environment settings. For example:
70
71```js
72module.exports = {
73 environments: {
74 jquery: {
75 globals: {
76 $: false
77 }
78 }
79 }
80};
81```
82
83There's a `jquery` environment defined in this plugin. To use the environment in ESLint, you would use the unprefixed plugin name, followed by a slash, followed by the environment name. So if this plugin were named `eslint-plugin-myplugin`, then you would set the environment in your configuration to be `"myplugin/jquery"`.
84
85Plugin environments can define the following objects:
86
871. `globals` - acts the same `globals` in a configuration file. The keys are the names of the globals and the values are `true` to allow the global to be overwritten and `false` to disallow.
881. `parserOptions` - acts the same as `parserOptions` in a configuration file.
89
90### Processors in Plugins
91
92You can add processors to plugins by including the processor functions in the `processors` key. For more information on defining custom processors, refer to [Custom Processors](custom-processors).
93
94```js
95module.exports = {
96 processors: {
97 // This processor will be applied to `*.md` files automatically.
98 ".md": {
99 preprocess(text, filename) { /* ... */ },
100 postprocess(messages, filename) { /* ... */ }
101 }
102 "processor-name": {
103 preprocess: function(text, filename) {/* ... */},
104
105 postprocess: function(messages, filename) { /* ... */ },
106 }
107 }
108}
109```
110
111### Configs in Plugins
112
113You can bundle configurations inside a plugin by specifying them under the `configs` key. This can be useful when you want to bundle a set of custom rules with additional configuration. Multiple configurations are supported per plugin.
114
115You can include individual rules from a plugin in a config that's also included in the plugin. In the config, you must specify your plugin name in the `plugins` array as well as any rules you want to enable that are part of the plugin. Any plugin rules must be prefixed with the short or long plugin name.
116
117```js
118// eslint-plugin-myPlugin
119
120module.exports = {
121 configs: {
122 myConfig: {
123 plugins: ["myPlugin"],
124 env: ["browser"],
125 rules: {
126 semi: "error",
127 "myPlugin/my-rule": "error",
128 "eslint-plugin-myPlugin/another-rule": "error"
129 }
130 },
131 myOtherConfig: {
132 plugins: ["myPlugin"],
133 env: ["node"],
134 rules: {
135 "myPlugin/my-rule": "off",
136 "eslint-plugin-myPlugin/another-rule": "off",
137 "eslint-plugin-myPlugin/yet-another-rule": "error"
138 }
139 }
140 },
141 rules: {
142 "my-rule": {/* rule definition */},
143 "another-rule": {/* rule definition */},
144 "yet-another-rule": {/* rule definition */}
145 }
146};
147```
148
149Plugins cannot force a specific configuration to be used. Users must manually include a plugin's configurations in their configuration file.
150
151If the example plugin above were called `eslint-plugin-myPlugin`, the `myConfig` and `myOtherConfig` configurations would then be usable in a configuration file by extending `"plugin:myPlugin/myConfig"` and `"plugin:myPlugin/myOtherConfig"`, respectively.
152
153```json
154// .eslintrc.json
155
156{
157 "extends": ["plugin:myPlugin/myConfig"]
158}
159
160```
161
162### Peer Dependency
163
164To make clear that the plugin requires ESLint to work correctly, you must declare ESLint as a peer dependency by mentioning it in the `peerDependencies` field of your plugin's `package.json`.
165
166Plugin support was introduced in ESLint version `0.8.0`. Ensure the `peerDependencies` points to ESLint `0.8.0` or later.
167
168```json
169{
170 "peerDependencies": {
171 "eslint": ">=0.8.0"
172 }
173}
174```
175
176## Testing
177
178ESLint provides the [`RuleTester`](../integrate/nodejs-api#ruletester) utility to make it easy to test the rules of your plugin.
179
180## Linting
181
182ESLint plugins should be linted too! It's suggested to lint your plugin with the `recommended` configurations of:
183
184* [eslint](https://www.npmjs.com/package/eslint)
185* [eslint-plugin-eslint-plugin](https://www.npmjs.com/package/eslint-plugin-eslint-plugin)
186* [eslint-plugin-n](https://www.npmjs.com/package/eslint-plugin-n)
187
188## Share Plugins
189
190In order to make your plugin available to the community you have to publish it on npm.
191
192To make it easy for others to find your plugin, add these [keywords](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#keywords) to your `package.json` file:
193
194* `eslint`
195* `eslintplugin`