Canonical

• Canonical
  • Badge
  • Rules
  • Usage
    • Command Line
    • Gulp
    • Node.js API

Canonical code style linter and formatter for JavaScript, SCSS and CSS.

Badge

Use this in one of your projects? Include one of these badges in your README to let people know that your code is using the Canonical style.

[![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)

Rules

Canonical rules are composed of the following packages:

• eslint-config-canonical
• eslint-config-canonical-jsdoc
• eslint-config-canonical-lodash
• eslint-config-canonical-react

Usage

Command Line

The easiest way to use Canonical to check your code style is to install it as a Node command line program.

npm install canonical -g

After that, you can run canonical program on any JavaScript, SCSS, CSS or JSON file.

Linting

# Lint all JavaScript in ./src/ directory. 
canonical lint ./src/**/*.js
 
# Lint all CSS in ./src/ directory. 
canonical lint ./src/**/*.css
 
# Lint all JavaScript and CSS in ./src/ directory. 
canonical lint ./src/**/*.js ./src/**/*.css
 
# List all supported formats in ./src/ and the descending directories. 
canonical lint ./src/

Fixing

# Fix all JavaScript in ./src/ directory. 
canonical fix ./src/**/*.js
 
# Fix all CSS in ./src/ directory. 
canonical fix ./src/**/*.css
 
# Fix all JavaScript and CSS in ./src/ directory. 
canonical fix ./src/**/*.js ./src/**/*.css
 
# Fix all supported formats in ./src/ and the descending directories. 
canonical fix ./src/

Reading from stdin

canonical program can read from stdin, e.g.

echo 'var test;' | canonical lint --stdin --syntax js --output-format json

When reading from stdin, it is required to provide --syntax option. See Command Line Options.

Command Line Options

> canonical --help
 
Commands:
  fix   Fix code format.
  lint  Report code format errors.
 
Options:
  --help  Show help                                                    [boolean]

canonical fix --help
 
Options:
  --help    Show help                                                  [boolean]
  --stdin   Used to indicate that subject body will be read from stdin.
                                                      [boolean] [default: false]
  --syntax  Syntax of the input.          [choices: "js", "json", "css", "scss"]

canonical lint --help
 
Options:
  --help           Show help                                           [boolean]
  --file-path      Name of the file being linted with stdin (if any). Used in
                   reporting.                       [string] [default: "<text>"]
  --stdin          Used to indicate that subject body will be read from stdin.
                                                      [boolean] [default: false]
  --syntax         Syntax of the input.   [choices: "js", "json", "css", "scss"]
  --output-format    [choices: "json", "checkstyle", "table"] [default: "table"]

Gulp

Using Canonical does not require a Gulp plugin. Canonical program interface gives access to all features.

Use Canonical API in combination with a glob pattern matcher (e.g. globby) to lint multiple files, e.g.

import gulp from 'gulp';
import globby from 'globby';
 
import {
    lintText,
    lintFiles,
    getFormatter
} from 'canonical/es';
 
gulp.task('lint-javascript', () => {
    return globby(['./**/*.js'])
        .then((paths) => {
            let formatter,
                report;
 
            formatter = getFormatter();
            report = lintFiles(paths);
 
            if (report.errorCount || report.warningCount) {
                console.log(formatter(report.results));
            }
        });
});

This example is written using ES6 syntax. If you want your gulpfile.js to use ES6 syntax, you have to execute it using Babel or an equivalent code-to-code compiler, e.g.

babel-node ./node_modules/.bin/gulp lint-javascript

Node.js API

import {
    fixFiles,
    fixText,
    getFormatter,
    lintFiles,
    lintText
} from 'canonical';
 
/**
 * @returns {function}
 */
getFormatter;
 
/**
 * @typedef fixFiles~report
 * @property {fixText~result[]} results
 */
 
/**
 * @param {string[]} filePaths
 * @return {fixFiles~report}
 */
 
fixFiles;
 
/**
 * @typedef fixText~result
 * @property {string} filePath
 * @property {string} output
 */
 
/**
 * @typedef fixText~options
 * @property {string} syntax (supported languages: 'css', 'js', 'json', 'scss').
 */
 
/**
 * @param {string} text
 * @param {fixText~options} options
 * @return {fixText~result}
 */
fixText;
 
/**
 * @typedef lintFiles~report
 * @property {lintText~result[]} results
 * @property {number} errorCount
 * @property {number} warningCount
 */
 
/**
 * @param {string[]} filePaths
 * @return {lintFiles~report}
 */
lintFiles;
 
/**
 * @typedef lintText~message
 * @property {string} ruleId
 * @property {number} severity
 * @property {string} message
 * @property {number} line
 * @property {number} column
 * @property {string} nodeType
 * @property {string} source
 */
 
/**
 * @typedef lintText~result
 * @property {string} filePath
 * @property {lintFiles~message[]} messages
 * @property {number} errorCount
 * @property {number} warningCount
 */
 
/**
 * @typedef lintText~options
 * @property {string} syntax (supported languages: 'css', 'js', 'json', 'scss').
 */
 
/**
 * @param {string} text
 * @param {lintText~options} options
 * @return {lintText~result}
 */
lintText;