natemoo-re/tslint-stencil

Contributes some helpful tslint rules for Stencil projects

tslint-stencil

Adds stylistic tslint rules for Stencil projects

Getting started

Add the following line to your tslint.json file to enable the default ruleset (which follows the Stencil Style Guide)

{
  "extends": ["tslint-stencil/default"]
}

Alternatively, you can extend the bare package and enable each rule on a individual basis

{
  "extends": ["tslint-stencil"],
  "rules": {
    "host-data-precedes-render": true
  }
}

Rules

ban-prefix

Ensures that a Component's tag does not use any of the given prefixes.

component-member-order

Ensures that Component members are ordered consistently

components-per-file

Allows a maximum number of Components to be placed in a single file

decorated-member-style

Requires decorated class members to follow a consistent style (singleline or multiline)

lifecycle-order

Ensures that Component lifecycle methods are ordered consistently

require-prefix

Ensures that a Component's tag begins with the given prefix(es).

Contributing

Rules in the src/ directory must be camelCased and end in Rule. More information on developing custom tslint rules can be found on the tslint site

Before adding your custom rule, be sure to write a test for it. Then, you should be able to verify that it works by running:

npm run verify

tslint-stencil's Issues

Add support to newline after decorator

Actually there is no way to force an empty line between decorator types. Example:

@Prop() user: IUser;
@State() client: IClient;
protected componentWillLoad(): void {
  ..
}

It should be cool to be:

@Prop() user: IUser;

@State() client: IClient;

protected componentWillLoad(): void {
  ..
}

Maybe a rule like new-line-after-component-member=true or new-line-after-decorated-member=true.
We could separate method new lines in other rule:
newline-after-method.

Thanks!

Type errors in componentMemberOrderRule.ts

@patricksevat, I missed this on #6, but ran into some Typescript errors when trying to cut a new release. I'll have a fix shortly—just wanted to be sure it's tracked.

In componentMemberOrderRule.ts#L227, groups is typed as ComponentMetadata[], but the block below seems to treat groups as string[].

lifeCycle hooks are incomplete

StencilJS has a number of lifecycle hooks documented and available that are not a part of this lint ruleset.

Ref: https://stenciljs.com/docs/component-lifecycle

ESLint port

As TSLint is deprecated, it would be great to support an ESLint port of tslint-stencil

Support comment flags to disable rules

Does TSLint handle this out of the box or do checks need to be added to the TS walker?

Syntax -
https://palantir.github.io/tslint/usage/rule-flags/

`hostData()` method has been removed

This means stencil-method-order is no longer required and can be removed

components-per-file error

Node.js : 8.12.0
npm : 6.5.0
Stencil project.

I just installed your rule, and got this error after running the default npm script provided by Stencil CLI :

"lint": "tslint -c tslint.json 'src/**/*.tsx' 'src/**/*.ts'"

Could not find implementations for the following rules specified in the configuration: components-per-file Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed. If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.