Getting started

In case you’re still un-decided at this point whether to give JSTwister a try or not, let me help you with a quick sample of what JSTwister is all about - making things simpler for Javascript devs:

auto import

Did you noticed how in Application.jsx the missing imports where auto-magically added?

Installation

Currently, we provide an extension only for Visual Studio Code. We will begin rolling out extensions for other common IDEs in the medium term.

Go to Visual Studio Marketplace and follow the instructions there, or simply open up command pallette in Visual Studio Code, type ‘jstwister’ and install the extension from the comfort of your IDE.

Usage

Open up your IDE and open in it a Javascript project. For the moment, Typescript is not yet supported, but it’s on our radar depending the feedback we will be receiving from you.

Upon opening up a Javascript project, JSTwister will create a default configuration file called jstwister.config.js containing the project settings it has determined.

It’s content will read along these lines:

module.exports = {
  entry: {
  },
  resolve: {
    alias: {},
    extensions: ["", ".js", ".jsx"],
    modules: [".", "./node_modules"]
  },
  printer: {
    tabWidth: 4,
    useTabs: false,
    reuseWhitespace: true,
    lineTerminator: "\n",
    wrapColumn: 80,
    quote: "single",
    trailingComma: false,
    arrayBracketSpacing: false,
    objectCurlySpacing: true,
    arrowParensAlways: false,
    flowObjectCommas: true
  }
};

The most important thing is defining the application entry point/points. There are the main Javascript files which bootstrap the rest of the application.

If you are using Webpack to build your app, they are the same as Webpack’s resolve.entry section( you can effectively copy paste them from webpack config).

Currently, only entry points that use ES6 import/export statements are processed and understood by JSTwister.

Assuming the main Javascript file is src/index.js, adjust the entry config in jstwister.config.js to read as:

entry: 'src/index.js' 

You can also specify an array or an object as entry points.

Running your first refactor

Open up command pallete, type ‘jstwister’ and you will see the one(and only for the time being) refactor: ‘Add missing imports’.

This refactor automatically adds the import statements, for any missing identifiers in a file.

To test it out:

  • Open up a file and remove all ES6 import statements
  • Run the refactor: CMD+SHIFT+P -> Add missing imports

Read more about the Imports manager plugin.

I’ve found a bug/I have a suggestion

Awesome! Head over to our GitHub repo and fill in an issue with the bug or suggestion.

Please note that JSTwister is in very early, alpha stages, and may contain all sorts of issues.

Follow us on Tweeter(@jstweetster) or subscribe to our newsletter in order to keep up with it’s development and features.