1 | # @stencil/eslint-plugin
|
2 |
|
3 | ESLint rules specific to Stencil JS projects.
|
4 |
|
5 | ## Installation
|
6 |
|
7 | If you're using npm v7+, you only need to install this package. Its peer dependencies will be automatically installed.
|
8 | ```bash
|
9 | npm i --save-dev @stencil/eslint-plugin
|
10 | ```
|
11 |
|
12 | If you're using npm v6 or lower, you will need to install this package and its peer dependencies in your stencil project:
|
13 |
|
14 | ```bash
|
15 | npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react @stencil/eslint-plugin typescript
|
16 | ```
|
17 |
|
18 | ## Usage
|
19 |
|
20 | `.eslintrc.json` configuration file:
|
21 |
|
22 | ```json
|
23 | {
|
24 | "parserOptions": {
|
25 | "project": "./tsconfig.json"
|
26 | },
|
27 | "extends": [
|
28 | "plugin:@stencil/recommended"
|
29 | ]
|
30 | }
|
31 | ```
|
32 |
|
33 | Add a new `lint` script to the `package.json`:
|
34 | ```json
|
35 | {
|
36 | "scripts": {
|
37 | "lint": "eslint src/**/*{.ts,.tsx}"
|
38 | }
|
39 | }
|
40 | ```
|
41 |
|
42 | By default, ESLint will ignore your `node_modules/` directory. Consider adding a `.eslintignore` file at the root of
|
43 | your project with any output target directories to avoid false positive errors from ESLint.
|
44 | ```
|
45 | # place any directories created by the Stencil compilation process here
|
46 | dist
|
47 | loader
|
48 | www
|
49 | ```
|
50 |
|
51 | Lint all your project:
|
52 | ```
|
53 | npm run lint
|
54 | ```
|
55 |
|
56 | ## Supported Rules
|
57 |
|
58 | - [`@stencil/async-methods`](./docs/async-methods.md)
|
59 |
|
60 | This rule catches Stencil public methods that are not async.
|
61 |
|
62 | - [`@stencil/ban-prefix`](./docs/ban-prefix.md)
|
63 |
|
64 | This rule catches Stencil Component banned tag name prefix.
|
65 |
|
66 | - [`@stencil/class-pattern`](./docs/class-pattern.md)
|
67 |
|
68 | This rule catches Stencil Component class name not matching configurable pattern.
|
69 |
|
70 | - [`@stencil/decorators-context`](./docs/decorators-context.md)
|
71 |
|
72 | This rule catches Stencil decorators in bad locations.
|
73 |
|
74 | - [`@stencil/decorators-style`](./docs/decorators-style.md)
|
75 |
|
76 | This rule catches Stencil decorators style usage.
|
77 |
|
78 | - [`@stencil/element-type`](./docs/element-type.md)
|
79 |
|
80 | This rule catches Stencil Element decorator have the correct type.
|
81 |
|
82 | - [`@stencil/host-data-deprecated`](./docs/host-data-deprecated.md)
|
83 |
|
84 | This rule catches Stencil method hostData.
|
85 |
|
86 | - [`@stencil/methods-must-be-public`](./docs/methods-must-be-public.md)
|
87 |
|
88 | This rule catches Stencil Methods marked as private or protected.
|
89 |
|
90 | - [`@stencil/no-unused-watch`](./docs/no-unused-watch.md)
|
91 |
|
92 | This rule catches Stencil Watchs with non existing Props or States.
|
93 |
|
94 | - [`@stencil/own-methods-must-be-private`](./docs/own-methods-must-be-private.md)
|
95 |
|
96 | This rule catches own class methods marked as public.
|
97 |
|
98 | - [`@stencil/own-props-must-be-private`](./docs/own-props-must-be-private.md)
|
99 |
|
100 | This rule catches own class properties marked as public.
|
101 |
|
102 | - [`@stencil/prefer-vdom-listener`](./docs/prefer-vdom-listener.md)
|
103 |
|
104 | This rule catches Stencil Listen with vdom events.
|
105 |
|
106 | - [`@stencil/props-must-be-public`](./docs/props-must-be-public.md)
|
107 |
|
108 | This rule catches Stencil Props marked as private or protected.
|
109 |
|
110 | - [`@stencil/props-must-be-readonly`](./docs/props-must-be-readonly.md)
|
111 |
|
112 | This rule catches Stencil Props marked as non readonly, excluding mutable ones.
|
113 |
|
114 | - [`@stencil/render-returns-host`](./docs/render-returns-host.md)
|
115 |
|
116 | This rule catches Stencil Render returning array instead of Host tag.
|
117 |
|
118 | - [`@stencil/required-jsdoc`](./docs/required-jsdoc.md)
|
119 |
|
120 | This rule catches Stencil Props, Methods and Events to define jsdoc.
|
121 |
|
122 | - [`@stencil/required-prefix`](./docs/required-prefix.md)
|
123 |
|
124 | This rule catches Stencil Component required tag name prefix.
|
125 |
|
126 | - [`@stencil/reserved-member-names`](./docs/reserved-member-names.md)
|
127 |
|
128 | This rule catches Stencil Prop names that share names of Global HTML Attributes.
|
129 |
|
130 | - [`@stencil/single-export`](./docs/single-export.md)
|
131 |
|
132 | This rule catches modules that expose more than just the Stencil Component itself.
|
133 |
|
134 | - [`@stencil/strict-mutable`](./docs/strict-mutable.md)
|
135 |
|
136 | This rule catches Stencil Prop marked as mutable but not changing value in code.
|
137 |
|
138 | ## Recommended rules
|
139 |
|
140 | ```json
|
141 | {
|
142 | "@stencil/async-methods": "error",
|
143 | "@stencil/ban-prefix": ["error", ["stencil", "stnl", "st"]],
|
144 | "@stencil/decorators-context": "error",
|
145 | "@stencil/decorators-style": [
|
146 | "error", {
|
147 | "prop": "inline",
|
148 | "state": "inline",
|
149 | "element": "inline",
|
150 | "event": "inline",
|
151 | "method": "multiline",
|
152 | "watch": "multiline",
|
153 | "listen": "multiline"
|
154 | }],
|
155 | "@stencil/element-type": "error",
|
156 | "@stencil/host-data-deprecated": "error",
|
157 | "@stencil/methods-must-be-public": "error",
|
158 | "@stencil/no-unused-watch": "error",
|
159 | "@stencil/own-methods-must-be-private": "error",
|
160 | "@stencil/own-props-must-be-private": "error",
|
161 | "@stencil/prefer-vdom-listener": "error",
|
162 | "@stencil/props-must-be-public": "error",
|
163 | "@stencil/props-must-be-readonly": "error",
|
164 | "@stencil/render-returns-host": "error",
|
165 | "@stencil/required-jsdoc": "error",
|
166 | "@stencil/reserved-member-names": "error",
|
167 | "@stencil/single-export": "error",
|
168 | "@stencil/strict-mutable": "error"
|
169 | }
|
170 | ```
|
171 |
|
172 | ## Contributing
|
173 |
|
174 | When submitting new rules please:
|
175 | - Describe your new rule in the README.md
|
176 | - Provide a suite of unit tests for your rule
|
177 | - Follow ESLint Rule guidelines (the [eslint-rule yeoman generator](https://github.com/eslint/generator-eslint) is good for this)
|
178 |
|
179 | All contributions welcome.
|
180 |
|
181 | ## Licence
|
182 |
|
183 | - [MIT](https://raw.githubusercontent.com/ionic-team/stencil/main/LICENSE)
|