24 New Autofixes added in JavaScript Analyzer

New in DeepSource
,
1

Hey fellow JS devs, it’s just only two weeks since Autofix support for JavaScript is out with 30 Eslint issues and yet we aren’t stopping there. Today, we’re excited to add Autofix support for 24 more issues, and this time we can fix issues in Vue, React, and Flow. Here are some of them:

Vue

There are 14 autofixer available for vue.

JS-0654 - Deprecation of .sync modifier on v-bind directive

Fixes this code:

<MyComponent v-bind:propName.sync="foo"/>

to this

<MyComponent v-bind:propName="foo"/>

JS-0645 - Deprecation of $scopedSlots

Fixes this code:

<template>
  <div v-if="$scopedSlots.default"><slot /></div>
</template>
<script>
export default {
  render() {
    return this.$scopedSlots.default()
  }
}
</script>

to this:

<template>
  <div v-if="$slots.default"><slot /></div>
</template>
<script>
export default {
  render() {
    return this.$slots.default()
  }
}
</script>

React

There are 10 autofixer available for react and flow.

JS-0455 - Prevent usage of unknown DOM property

Fixes this code:

var Hello = <div class="hello">Hello World</div>;

to this:

var Hello = <div className="hello">Hello World</div>;

JS-0461 - Prefer that props are read-only

Fixes this code:

type Props = {
  name: string,
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

to this:

type Props = {
  +name: string,
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}

JS-0494: Require exact object types

Fixes this code:

1 type foo = {};

2 type foo = { bar: string };

3 type foo = Array<{bar: string}>;

4 (foo: Array<{bar: string}>) => {};

to this:

1 type foo = {| |};

2 type foo = {| bar: string |};

3 type foo = Array<{| bar: string |}>;

4 (foo = Array<{| bar: string |}>) => {};