https://github.com/putoutjs/babel-wrap
https://github.com/putoutjs/babel-wrap
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/putoutjs/babel-wrap
- Owner: putoutjs
- Created: 2023-08-04T18:57:55.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-04T19:00:26.000Z (almost 3 years ago)
- Last Synced: 2026-02-24T05:13:26.865Z (4 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🗿 Using Babel Plugins with Putout
You can add `Babel` to the `plugins` section of `.putout.json` with `babel/` prefix.
*You can disable a rule, or use a match in a similar way.*
*☝️Remember to omit `babel-plugin-` or `@babel/plugin`: putout will set it up for you :)*
*Example*
Let's add `babel-plugin-transform-inline-consecutive-adds` to `.putout.json`:
```json
{
"plugins": [
"babel/transform-inline-consecutive-adds"
]
}
```
Then create a file and process it with the help of **Babel Plugin**.
```sh
coderaiser@cloudcmd:~$ cat > a.js
const t = [];
t.push(1);
t.push(2);
coderaiser@cloudcmd:~$ PUTOUT_PRINTER=babel putout a.js -f codeframe
/home/coderaiser/a.js:4:0
2 | t.push(1);
3 | t.push(2);
> 4 |
| ^ transform inline consecutive adds
✖ 1 errors in 1 files
fixable with the `--fix` option
coderaiser@cloudcmd:~$ putout --fix a.js
coderaiser@cloudcmd:~$ cat a.js
const t = [1, 2];
```
Using 🐊**Putout** as a runner for `babel` `plugins` you can not only change file content, but also see what exactly will be changed. You can use your already written `babel` `plugins` or reuse work in progress plugins made for `babel`,
☝️ *Remember 🐊**Putout** `plugins` gave more accurate information about changing places, and works faster (no need to find information about changes in transformed file).*
### Babel plugins list
Here you can find **Babel Plugins** which feats the most main purpose of 🐊**Putout** and advised to use:
transform-inline-consecutive-adds
```diff
-const foo = {};
-foo.a = 42;
-foo.b = ["hi"];
-foo.c = bar();
-foo.d = "str";
+const foo = {
+ a: 42,
+ b: ["hi"],
+ c: bar(),
+ d: "str"
+};
-const bar = [];
-bar.push(1);
-bar.push(2);
+const bar = [1, 2];
```
codemod-object-assign-to-object-spread
```diff
function merge(a) {
- return Object.assign({}, a, {
- hello: 'world'
- });
+ return {
+ ...a,
+ hello: 'world'
+ };
};
```
codemod-optional-catch-binding
```diff
try {
throw 0;
-} catch (err) {
+} catch {
console.log("it failed, but this code executes");
}
```
```diff
-angular.module("MyMod").controller("MyCtrl", ($scope, $timeout) => {});
+angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", ($scope, $timeout) => {}]);
```
Please send pull requests with **Babel Plugins** which can be used as codemods, or simplify, fix, makes code more readable.