https://github.com/loopmode/babel6-base
Common dependencies and build tools for babel6-based projects
https://github.com/loopmode/babel6-base
Last synced: about 1 year ago
JSON representation
Common dependencies and build tools for babel6-based projects
- Host: GitHub
- URL: https://github.com/loopmode/babel6-base
- Owner: loopmode
- Created: 2018-07-15T12:08:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-21T05:49:11.000Z (over 7 years ago)
- Last Synced: 2025-01-08T16:25:56.419Z (about 1 year ago)
- Language: JavaScript
- Size: 60.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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.
```bash
yarn add --dev @loopmode/babel6-base
```
Then use the CLI script to copy default config files. After installing, run
```bash
./node_modules/.bin/b6 install
```
Alternatively, install globally:
```bash
npm install --global @loopmode/babel6-base
```
Now run the install script in any package:
```bash
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.
```json
// .babelrc
{
"extends": "@loopmode/babel6-base/.babelrc"
}
```
```json
// .eslintrc
{
"extends": "@loopmode/react"
}
```
```javascript
// prettier.config.js
module.exports = {
...require('@loopmode/babel6-base/prettier.config')
};
```
```javascript
// .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.
```json
// package.json
{
"babel": {
"extends": "@loopmode/babel6-base/.babelrc"
},
"eslintConfig": {
"extends": "@loopmode/react"
},
"prettier": {
...
},
"esdoc": {
...
}
```
#### Caveats:
* The eslint config [@loopmode/eslint-config-react](https://github.com/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](https://prettier.io/docs/en/configuration.html)
* [esdoc configuration](https://github.com/esdoc/esdoc/blob/v0.5.2/site/manual/configuration/config.md#full-config)
* [prettier configuration](https://prettier.io/docs/en/configuration.html)
## Scripts
Just add some scripts to your `package.json` as usual:
```json
{
"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.
```json
{
"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"]
}
}
}
```