Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i eslint-config-lovata

    DownloadsWeekly Downloads

    20

    Version

    1.12.1

    License

    GPL-3.0

    Unpacked Size

    32.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar