/snowpack-eslint-plugin

Eslint integration for Snowpack

Primary LanguageTypeScriptMIT LicenseMIT

@canarise/snowpack-eslint-plugin

@canarise/snowpack-eslint-plugin is a snowpack plugin to integrate eslint into the snowpack develop and build process. This plugin will simply run eslint as a subprocess. It also provides some terminal coloring for errors and warnings via chalk.js.

eslint errors in the terminal

Install

Note, by default eslint and esw are required, unless you change the lint commands (see below).

With yarn

> yarn add @canarise/snowpack-eslint-plugin

With npm

> npm install @canarise/snowpack-elsint-plugin

Usage:

Simple add it to your snowpack config:

module.exports = {
  mount: {
    ...
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-postcss',
    '@canarise/snowpack-eslint-plugin',
  ],
  routes: [
    ...
  ],
}

Or with some arguments:

module.exports = {
  mount: {
    ...
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-postcss',
    [
      'snowpack-eslint-plugin',
      {
        name: 'lee',
        disableColoring: true,
      },
    ],
  ],
  routes: [
    ...
  ],
}

Configuration

When configuring this plugin, it's important to understand the plugin basically does the same as the configuration below, with a few extras (coloring in the terminal):

plugins: [
  [
    '@snowpack/plugin-run-script',
    {
      cmd: 'eslint src --ext .ts,.tsx,.js,.jsx',
      watch: 'esw -w --clear src --ext .ts,.tsx,.js,.jsx',
    },
  ],
]

There are a few options you can use:

option default description
eslintArgs "src --ext .ts,.tsx,.js,.jsx" The arguments to provide to the eslint command
eslintCommand "eslint" The command to run for eslint
eslintWatchArgs "-w --clear src --ext .ts,.tsx,.js,.jsx" The arguments to provide to the eslint watch command
eslintWatchCommand "esw" The command to run for eslint when watching, i.e. in dev
output "dashboard" Can be either dashboard or stream. Changes the way linting output is logged in the terminal
name "@canarise/snowpack-eslint-plugin" Changes the name of the plugin in that appears in the terminal
disableColoring false Disables color highlighting for eslint results