babel6-base

Common dependencies and default configurations for babel6-based packages. Contains babel, esdoc, eslint and prettier, as well as some plugins/extensions in slightly outdated but stable versions.

Provides CLI to copy default config files like .eslintrc, prettier.config.js etc

Installation and usage

Install as a devDependency.

  yarn add --dev @loopmode/babel6-base

Then use the CLI script to copy default config files. After installing, run

./node_modules/.bin/b6 install

Alternatively, install globally:

npm install --global @loopmode/babel6-base

Now run the install script in any package:

b6 install

Configuration

There are default config files that you can use as a base and extend/modify as needed.

via config files

Typically you'll create a bunch of config files and extend the provided defaults there.

// .babelrc
{
  "extends": "@loopmode/babel6-base/.babelrc"
}

// .eslintrc
{
  "extends": "@loopmode/react"
}

// prettier.config.js
module.exports = {
  ...require('@loopmode/babel6-base/prettier.config')
};

// .esdoc.js
module.exports = {
  ...require('@loopmode/babel6-base/esdoc.config')
};

via package.json

Alternatively, you can add keys to your package.json, but there are some caveats.

// package.json
{
  "babel": {
    "extends": "@loopmode/babel6-base/.babelrc"
  },
  "eslintConfig": {
    "extends": "@loopmode/react"
  },
  "prettier": {
    ...
  },
  "esdoc": {
    ...
  }

Caveats:

• The eslint config @loopmode/eslint-config-react is included as a dependency
• When extending the eslint config, omit the eslint-config- part of the package name and use just @loopmode/react instead
• When configuring eslint via package.json, the key must be "eslintConfig" (and not just "eslint")
• When configuring prettier or ESDoc via package.json, you can not extend from the default config - you have to provide a full configuration directly

config options

• eslint configuration
• esdoc configuration
• prettier configuration

Scripts

Just add some scripts to your package.json as usual:

{
  "scripts": {
    "babel": "babel src --out-dir lib --copy-files",
    "eslint": "eslint src",
    "esdoc": "esdoc"
  }
}

Pass any arguments to the scripts as usual, e.g. yarn babel --watch.

Note that ESLint and prettier enforce specific code style, and you might get a bunch of warnings for existing projects. Use yarn eslint --fix to normalize code style and whitespace.

Generate docs with yarn esdoc.

Sublime Text

Here is an example Sublime Text project file. It will automatically format saved files in the project, and ESLint errors will be displayed when SublimeLinter and SublimeLinter-eslint are installed.

{
  "folders": [
    {
      "path": ".",
      "file_exclude_patterns": [],
      "folder_exclude_patterns": ["node_modules"]
    }
  ],
  "settings": {
    "SublimeLinter.linters.eslint.chdir": "${project}/",
    "js_prettier": {
      "auto_format_on_save": true,
      "auto_format_on_save_excludes": ["*/node_modules/*", "*/.git/*", "*.json", "*.html"]
    }
  }
}