Linting
Jaspr comes with its own set of lint rules and code assists.
Jaspr has its own linting and analyzer package called jaspr_lints. This comes pre-configured
with every new project and enables the following set of lint rules and code assists:
Lint Rules
prefer_html_methodsFix availablePrefer using html methods like div(...) over DomComponent(tag: 'div', ...).
BAD:
return DomComponent(
tag: 'div',
children: [
DomComponent(
tag: 'p',
child: Text('Hello World'),
),
],
);
GOOD:
return div([
p([text('Hello World')]),
]);
sort_children_properties_lastFix availableSort children properties last in html component methods.
This improves readability and best represents actual html.
BAD:
return div([
p([text('Hello World')], classes: 'text-red'),
], id: 'main');
GOOD:
return div(id: 'main', [
p(classes: 'text-red', [text('Hello World')]),
]);
styles_orderingFix availableSort styles properties.
This improves readability and consistency across style rules.
BAD:
@css
static List<StyleRule> get styles => [
css('button').styles(
color: Colors.black,
padding: Padding.all(8.px),
),
css('input').styles(
padding: Padding.all(16.px),
color: Colors.black,
),
];
GOOD:
@css
static List<StyleRule> get styles => [
css('button').styles(
padding: Padding.all(8.px),
color: Colors.black,
),
css('input').styles(
padding: Padding.all(16.px),
color: Colors.black,
),
];
prefer_styles_getterFix availablePrefer using a getter over a (final) variable declaration for style rules to support hot-reload.
BAD:
@css
static final List<StyleRule> styles = [
css('button').styles(
padding: Padding.all(8.px),
color: Colors.black,
),
];
GOOD:
@css
static List<StyleRule> get styles => [
css('button').styles(
padding: Padding.all(8.px),
color: Colors.black,
),
];
Code Assists
Create StatelessComponentTop levelCreates a new StatelessComponent class.
Create StatefulComponentTop levelCreates a new StatefulComponent and respective State class.
Create InheritedComponentTop levelCreates a new InheritedComponent class.
Convert to StatefulComponentClass levelConverts a custom StatelessComponent into a StatefulComponent and respective State class.
Convert to AsyncStatelessComponentClass levelConverts a custom StatelessComponent into an AsyncStatelessComponent.
Remove this componentComponent tree levelSurgically removes the selected component from the component tree, making its children the new direct children of its parent.
Wrap with html...Component tree levelWraps the selected component with a new html component.
return div([
p([
span([text('Hello World')]),
]),
]);
Wrap with component...Component tree levelWraps the selected component with a new component.
return div([
MyComponent(
child: span([text('Hello World')]),
),
]);
Wrap with BuilderComponent tree levelWraps the selected component with a Builder.
return div([
Builder(builder: (context) {
return span([text('Hello World')]);
}),
]);
Extract componentComponent tree levelExtracts the selected component plus subtree into a new StatelessComponent.
Add stylesComponent tree levelAdds new css styles to the selected component.
This will either add a new class name:
return div(
classes: '[...]'
[],
);
/* ... */
@css
static List<StyleRule> styles = [
css('.[...]').box(...),
];
Or use an existing id or class name:
return div(id: 'content', []);
/* ... */
@css
static List<StyleRule> styles = [
css('#content').box(...),
];
Convert to web-only importDirective levelConverts any import to a web-only import using the @Import annotation.
import 'dart:html';
@Import.onWeb('dart:html', show: [#window])
import 'filename.imports.dart';
This will auto-detect all used members from the import and add them to the show parameter.
Convert to server-only importConverts any import to a server-only import using the @Import annotation.
import 'dart:io';
@Import.onServer('dart:io', show: [#HttpRequest])
import 'filename.imports.dart';
This will auto-detect all used members from the import and add them to the show parameter.