efarm-configs

Installation

npm install efarm-configs

Browser support

• Chrome >= 49,
• IE >= 11,
• Firefox >= 40,
• Edge >= 16,
• Safari >= 9,
• Opera >= 53,
• Android Browser >= 55,

We made those decisions based on the amount of users that e-farm.com get's and which browser and version they are using.

Configs

ESLint

The eslint config is inside eslint/. You will need to specify an relative path to the config file in your local .eslintrc.js or you can just use the resolver helper.

Config Resolver

This resolver function takes three arguments:

declare function resoler(
    // The directory name the .eslintrc.js is located in. Should always be __dirname.
    dirname: string,
    // The environment the config is for.
    // Pass null for a universal eslint config which can be used on the server and the client.
    env: 'client' | 'server' | null,
    // Whether or not the project uses prettier.
    // When true, it will use special configs so that eslint and prettier do not conflict.
    prettier?: boolean,
): string;

Example .eslintrc.js:

const resolver = require('efarm-configs/eslint/resolver');

module.exports = {
    extends: [resolver(__dirname, null, false)],
}

Configs

• index.js (The common eslint config. Can be used on the client and server)
• client.js (Rules and plugins especially for the client)
• server.js (Rules and plugins expecially for the server)

Style Guide

• Indent: Tabs
• Max line length: 120
• Max lines: 300
• Semicolons
• Single Quotes
• Use const where you can
• ES6 Modules
• Prefer Async / Await
• Prefer arrow functions
• Functions have a max-lines and max-statement rule!
• No more than 3 Function parameter. If you need more, you should use an config object
• Gratuitous spacing (around return statements, variable declarations and blocks)

Babel

The Babel config file are located in babel/. There is a babel/client.config.js which is designed for the client. It automatically compiles React and Flow and compiles to the minimum based on the targets. Then there is a babel/server.config.js which is designed for the server. It also automatically compiles only as needed for your current node version and also compiles your flow types.

Additional plugins currently applied:

• Class properties
• Object rest spread

Webpack

The webpack configurations for webpack are located in webpack/. The dev.config.js and prod.config.js are both exporting a function which takes exactly two arguments. The first argument is an options object. This argument is required.

const options = {
    // Those path are from the cwd
    src: 'src/client', // The client source folder
    dist: 'dist/client', // The output folder
}

In the source folder there needs to be an index.js which will be the entry point for the javascript. And there needs to be an index.html which will be the template for the webpack plugin. Those files are required to exist.

The second argument is an optional webpack config which will be merged with the default configs.

Example:

const config = require('efarm-configs/webpack/dev.config');

module.exports = config({
    src: 'src/client',
    dist: 'dist/client',
});

Prettier

The prettier config is in prettier.config.js.

Prettier + ESLint

You will need to enable prettier in the eslint config files as well. See [#config-resolver](Config Resolver).

Using eslint with prettier

Stylelint

The stylelint config is in stylelint.config.js.