@azimutlabs/config-git v0.1.0-alpha.1

Our sharable configurations and code standards

@azimutlabs/eslint-config

We assume that you already have eslint package installed.

$ npm i -D @azimutlabs/eslint-config

Available configurations

• legacy - default lint rules with some plugin extensions.
  • required libs: eslint-plugin-import, eslint-plugin-array-func, eslint-plugin-functional, eslint-plugin-simple-import-sort
  • required libs for javascript: babel-eslint
  • required libs for typescript: @typescript-eslint/parser, @typescript-eslint/eslint-plugin
  • download command: npm i -D eslint-plugin-import eslint-plugin-array-func eslint-plugin-functional eslint-plugin-simple-import-sort @typescript-eslint/parser @typescript-eslint/eslint-plugin
• prettier - prettier config for eslint.
  • required libs: prettier, eslint-config-prettier, eslint-plugin-prettier
  • download command: npm i -D prettier eslint-config-prettier eslint-plugin-prettier
• jest - jest specific rules.
  • required libs: eslint-plugin-jest
  • download command: npm i -D eslint-plugin-jest
• react - react specific rules with extensions.
  • required libs: eslint-plugin-react, eslint-plugin-react-hooks
  • download command: npm i -D eslint-plugin-react eslint-plugin-react-hooks

• a11y - jsx accessibility. - required libs: eslint-plugin-jsx-a11y - download command: npm i -D eslint-plugin-jsx-a11y

  Recommended usage

  Extending ALL configs via package.json:

  {
    "eslintConfig": {
      "extends": [
        "@azimutlabs"
      ]
    }
  }

  Extending configs separately:

  {
    "eslintConfig": {
      "extends": [
        "@azimutlabs/eslint-config/legacy",
        "@azimutlabs/eslint-config/prettier",
        "@azimutlabs/eslint-config/react"
      ]
    }
  }

@azimutlabs/config-next

We assume that you already have next package installed.

$ npm i -D @azimutlabs/config-next

Available extensions

• withEslint - adds eslint.

  • usage:

    // next.config.js
    module.exports = withEslint({ // nextOptions
      eslintOptions: {} // options for eslint-loader
    });

  • required libs: eslint, eslint-loader, eslint-friendly-formatter.
  • download command: npm i -D eslint-loader eslint-friendly-formatter

• withEnv - adds env variables using next/config runtime configurations.

  • usage:

    // next.config.js
    module.exports = withEnv({ // nextOptions
      serverRuntimeConfig: {}, // optional variables for server config.
      publicRuntimeConfig: {}, // optional variables for both server and public config.
    });
    
    // .env
    // NEXT_PUBLIC_TEST=somevalue
    
    // pages/index.js
    import getConfig from 'next/config';
    const { NEXT_PUBLIC_TEST } = getConfig().publicRuntimeConfig;

  • to override env var prefixes you need to define variables:

    # .env
    # Prefix for serverRuntimeConfig
    SERVER_PREFIX=_
    # Prefix for publicRuntimeConfig
    PUBLIC_PREFIX=CLIENT_
    
    _PORT=3000
    
    CLIENT_API=api.github.com

  • recommended libs: dotenv-load

• withLodash - optimizes lodash dist size using babel-plugin-lodash and lodash-webpack-plugin.

  • usage:

    // next.config.js
    module.exports = withLodash({ // nextOptions
      babelPluginLodashOptions: {}, // babel-plugin-lodash options.
      lodashWebpackPluginOptions: {}, // lodash-webpack-plugin options.
    });

  • required libs: babel-plugin-lodash, lodash-webpack-plugin.
  • download command: npm i -D babel-plugin-lodash lodash-webpack-plugin

• withStylelint - adds stylelint-webpack-plugin for stylelint.

  • usage:

    // next.config.js
    module.exports = withStylelint({ // nextOptions
      stylelintWebpackPluginOptions: {}, // stylelint-webpack-plugin options.
    });

  • required libs: stylelint, stylelint-webpack-plugin.
  • download command: npm i -D stylelint stylelint-webpack-plugin

• withEmotion - adds @emotion/babel-preset-css-prop for @emotion/core.

  • ⚠️ NOTE: for some reason, next.js does not use presets that was injected into next-babel-loader's options without creating .babelrc file. To make your project stay clean, you can configure your babel in package.json:

    {
      "babel": {
        "presets": ["next/babel"]
      }
    }

  • usage:

    // next.config.js
    module.exports = withEmotion({ // nextOptions
      babelPresetEmotionOptions: {}, // @emotion/babel-preset-css-prop options.
    });

  • required libs: @emotion/core, @emotion/babel-preset-css-prop.
  • download command: npm i -D @emotion/core @emotion/babel-preset-css-prop

• withSass - adds scss, scss-modules, sass-lint (no css). - ❗️DEPRECATED❗ - we are planning to move into CSS-in-JS practise, so for now this extension is no longer maintained.️ - usage:

    ```javascript
    // next.config.js
    module.exports = withSass({ // nextOptions
      sassLintOptions: {} // options for sass-lint-webpack plugin
    });
    ```
  - to enable `sass-lint` - add `sassLintOptions` field into `nextOptions` as shown in `usage` section.
  - required libs: `@zeit/next-sass`
  - required libs for sass-lint: `sass-lint`, `sass-lint-webpack`
  - download command: `npm i -D @zeit/next-sass`

  Recommended usage

  Combine by composing functions:

  module.exports = compose(
    withEslint,
    withSass,
    withEnv,
  )({ // next config
    eslintConfig: {},
    sassLintConfig: {},
  });

LICENSE