Linting

Jaspr has its own linting and analyzer package called jaspr_lints. This comes pre-configured with every new project and enables a set of lint rules and code assists.

Setup:

Add jaspr_lints as a plugin to your analysis_options.yaml file:

yaml

plugins:
  jaspr_lints:
    version: ^0.6.0
    diagnostics:
      sort_children_last: true
      prefer_html_components: true
      styles_ordering: true

After running dart pub get you now get additional lints and code assists in your IDE or when running dart analyze.

Lint Rules

prefer_html_componentsFix available

Prefer using HTML components like div(...) over Component.element(tag: 'div', ...).

BAD:

dart

return .element(
  tag: 'div',
  children: [
    .element(
      tag: 'p',
      children: [.text('Hello World')],
    ),
  ],
);

GOOD:

dart

return div([
  p([.text('Hello World')]),
]);

sort_children_lastFix available

Sort children properties last in HTML component methods.

This improves readability and best represents actual HTML.

BAD:

dart

return div([
  p([.text('Hello World')], classes: 'text-red'),
], id: 'main');

GOOD:

dart

return div(id: 'main', [
  p(classes: 'text-red', [.text('Hello World')]),
]);

styles_orderingFix available

Sort styles properties.

This improves readability and consistency across style rules.

BAD:

dart

@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:

dart

@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 available

Prefer using a getter over a (final) variable declaration for style rules to support hot-reload.

BAD:

dart

@css
static final List<StyleRule> styles = [ 
  css('button').styles(
    padding: Padding.all(8.px),
    color: Colors.black,
  ),
];

GOOD:

dart

@css
static List<StyleRule> get styles => [ 
  css('button').styles(
    padding: Padding.all(8.px),
    color: Colors.black,
  ),
];

unsafe_importsWarning

Warns about unsafe platform-specific imports in your code depending on whether it is executed on the server or the client.

Code Assists

Create StatelessComponentTop level

Creates a new StatelessComponent class.

Create StatefulComponentTop level

Creates a new StatefulComponent and respective State class.

Create InheritedComponentTop level

Creates a new InheritedComponent class.

Convert to StatefulComponentClass level

Converts a custom StatelessComponent into a StatefulComponent and respective State class.

Convert to AsyncStatelessComponentClass level

Converts a custom StatelessComponent into an AsyncStatelessComponent.

Remove this componentComponent tree level

Surgically removes the selected component from the component tree, making its children the new direct children of its parent.

Wrap with html...Component tree level

Wraps the selected component with a new html component.

dart

return div([
  p([ 
    span([text('Hello World')]),
  ]), 
]);

Wrap with component...Component tree level

Wraps the selected component with a new component.

dart

return div([
  MyComponent( 
    child: span([text('Hello World')]),
  ), 
]);

Wrap with BuilderComponent tree level

Wraps the selected component with a Builder.

dart

return div([
  Builder(builder: (context) { 
    return span([text('Hello World')]);
  }), 
]);

Extract componentComponent tree level

Extracts the selected component plus subtree into a new StatelessComponent.

Add stylesComponent tree level

Adds new css styles to the selected component.

This will either add a new class name:

dart

return div(
  classes: '[...]'
  [],
);

/* ... */

@css
static List<StyleRule> styles = [ 
  css('.[...]').box(...), 
];

Or use an existing id or class name:

dart

return div(id: 'content', []);

/* ... */

@css
static List<StyleRule> styles = [ 
  css('#content').box(...), 
];

Convert to web-only importDirective level

Converts any import to a web-only import using the @Import annotation.

dart

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 import

Converts any import to a server-only import using the @Import annotation.

dart

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.

Linting

Setup:

Lint Rules

Code Assists

On this page