eslint-config-lovata

1.12.1 • Public • Published

eslint-config-lovata

NPM Version Build Status Dependencies

This package provides LOVATA's ESLint and StyleLint shared configs. It includes a list of plugins and defined rules for each linter tool

Quick Jump

Installation

Note: To run all installation commands, Node.js and npm must be installed.

Install with npm:

npm install --save-dev eslint-config-lovata

Usage

Configs in the package provide a list of rules that can be overwritten by your project's configs. Note that each lint tool must be configured separately.

Check out the example of how to use provided configs in LOVATA's October CMS Starter Kit on Laravel Mix repo.

StyleLint

You don't need to run npm i stylelint --save-dev inside your project's folder. StyleLint is a production dependency for this package.

But you do need StyleLint installed globally for your text editor. So, make sure you did npm i stylelint --global and installed editor's StyleLint plugin (if it's needed) to highlight StyleLint errors on the fly.

1. Setup StyleLint config file

Add .stylelintrc file in the root of your project with the following settings:

{
  "extends": ["eslint-config-lovata/.stylelintrc"],
  "rules": {
      // Your override rules (stylelint.io/user-guide/rules/)
  }
}

For more config options go to StyleLint configuration page.

2. Add npm script for linting CSS

To make project's linting for CSS available via npm run lint:css, update your package.json script section:

"scripts": {
    "lint:css": "./node_modules/.bin/stylelint ./**/*.css --fix"
}

For more CLI options go to StyleLint CLI page.

3. Setup webpack config

There is stylelint-webpack-plugin to help you with linting CSS while you develop. Install the plugin into your project:

npm install stylelint-webpack-plugin --save-dev

Then add the plugin to webpack's config file:

const StyleLintPlugin = require('stylelint-webpack-plugin');
// ...
    plugins: [
        new StyleLintPlugin({
            files: ['**/*.css'],
            configFile: '.stylelintrc',
        }),
    ],
// ...

For more options go to stylelint-webpack-plugin Github page.

ESLint

As well as for StyleLint, you don't need to run npm i eslint --save-dev inside your project's folder. ESLint is a production dependency for this package.

But, again, you do need ESLint installed globally for your text editor. So, make sure you did npm i eslint --global and installed editor's ESLint plugin (if it's needed) to highlight ESLint errors on the fly.

1. Setup ESLint config file

Add .eslintrc file in the root of your project with the following settings:

{
  "extends": ["eslint-config-lovata/.eslintrc"],
  "rules": {
    // Your override rules (eslint.org/docs/rules/)
  }
}

For more config options go to ESLint configuration page.

2. Setup local developer's ESLint config file

Some of the rules in this config are "too strict" to be comfortable with when you are doing something locally on your machine. Something that is not supposed to be in the repo, but you'd like to have it for a while before commit. It could be because you are debugging, or you want to check as quick as possible if the idea is working.

For example, console.log() is not allowed in this config and will throw an error no-console. If you'd like to allow to do not-so-dangerous-but-useful things locally, you may create another config file, extend project's "too strict" config and decrease the rules from error to warn level.

To do so, add .local.eslintrc file in the root of your project with the following settings:

{
  "extends": [
    ".eslintrc",
    "eslint-config-lovata/.local.eslintrc"
  ],
  "rules": {
    // Your "warn" rules (eslint.org/docs/rules/)
  }
}

For more rule options go to ESLint configuration page.

3. Add npm script for linting JS

To make project's linting for JS available via npm run lint:js, update your package.json script section:

"scripts": {
  "lint:js": "./node_modules/.bin/eslint ./**/*.js --fix"
}

For more CLI options go to ESLint CLI page.

4. Setup webpack config

There is eslint-loader package to help you with linting JS while you develop. Install it to your project:

npm install eslint-loader --save-dev

Then add the loader to webpack's config file:

//...
const isLocal = process.env.LOCAL_DEV || false;
// ...
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options: {
      configFile: isLocal ? '.local.eslintrc' : '.eslintrc',
    }
  }]
// ...

For more loader's options go to eslint-loader Github page.

And don't forget to add LOCAL_DEV environment variable to your npm script for local development script:

"scripts": {
  "dev:watch": "cross-env NODE_ENV=development LOCAL_DEV=local ./node_modules/.bin/webpack --watch",
}

Note: It is recommended to use cross-env package for scripts with environment variables. Run npm install cross-env --save-dev to install the package.

Note: DO NOT use .local.eslintrc for any other cases then local development. For any builds, linting scripts, git hooks, etc. use .eslintrc config.

Full list of dependencies and plugins

StyleLint packages

StyleLint stylelint-a11y stylelint-high-performance-animation stylelint-value-no-unknown-custom-properties

See .stylelintrc.yml for StyleLint settings. Full list of plugins' rules is available in .stylelintrc config file.

Eslint packages

Eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-eslint-comments eslint-plugin-sonarjs eslint-plugin-unicorn eslint-plugin-no-use-extend-native

Package Sidebar

Install

npm i eslint-config-lovata

Weekly Downloads

15

Version

1.12.1

License

GPL-3.0

Unpacked Size

32.1 kB

Total Files

9

Last publish

Collaborators

  • neesoglasnaja