Giter VIP home page Giter VIP logo

dslint's Introduction

DSLint

DSLint is an extensible linting tool for designers. Similar to code linting, design linting can be used to find problematic patterns in your design files.

Figma

Install

If you'd like to use the CLI version, you can instally it globally:

$ npm i -g dslint

If you'd like to use the JavaScript API for your own applications, you can install it as a dependency:

$ npm i -S dslint

CLI Usage

Environmental Variables

  • FIGMA_TOKEN - A personal access token from Figma API

Basic usage:

$ dslint abcdefg1234567890

JavaScript API

Linting a file

import {dslint, getCoreRulesPath} from 'dslint';

const fileKey = 'abcdefg1234567890';
const token = 'my-figma-token';

const rulesPaths = [
  // optionally include the core set of rules already provided
  getCoreRulesPath(),
  // optionally add more rules directory
  path.resolve(__dirname, './rules'),
];

dslint(fileKey, token, rulesPaths).then(failures => {
  console.log(failures);
});

Linting an object tree

import {lint} from 'dslint';

// Figma.File
const file = { ... };

// DSLint.Rules.AbstractRule[]
const rules = [ ... ];

const failures = lint(file, rules);

Writing a Custom Lint Rule

DSLint ships with some basic rules you can apply to your design systems. However, these rules may not account for some of the best practices your team follows. DSLint was written to allow you to extend the system with your own custom rules which can be written in JavaScript. See below for a TypeScript example.

Requirements

  • The exported module should be a class named Rule.
  • All rules should extend the AbstractRule class.
  • All rules must implement the apply() method that return a list of failures.
import {AbstractRule, RuleWalker} from 'dslint';

/**
 * Simple rule that detects for component nodes.
 */
export class Rule extends AbstractRule {
  static metadata = {
    ruleName: 'my-custom-rule',
    description: 'Logs when a component is detected.',
  };

  apply(file: Figma.File): DSLint.Rules.Failure[] {
    const ruleName = Rule.metadata.ruleName;
    return this.applyWithWalker(new ComponentWalker(file.document, {ruleName}));
  }
}

class ComponentWalker extends RuleWalker {
  visitComponent(node: Figma.Nodes.Component) {
    this.addFailure({
      location: node.id,
      message: `Component detected: ${node.name}`,
    });
  }
}

dslint's People

Contributors

dependabot[bot] avatar vutran avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.