Make your life easier, use code actions to do repetitive tasks for you! They can help a lot, just follow the light bulb 💡!
This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.
You might want to reassign the default shortcut for the quick fix menu to Alt+Enter
if you are moving from WebStorm. Search for editor.action.quickFix
command.
New: React and TypeScript-specific code actions 🚀
Install through VS Code extensions. Search for JavaScript Booster
Visual Studio Code Market Place: JavaScript Booster
-
Conditions
- Flip if-else
- Remove redundant else
- Replace if-else with ?:
- Simplify if-else
- Flip ?:
- Simplify ?:
- Merge nested
if
statements (new)
-
Declarations
- Convert var/const to let
- Convert var to const
- Split into multiple declarations
- Split into declaration and initialisation
- Merge declaration and initialisation
-
Strings
- Replace string with template string
- Replace template string with regular string
- Split string under cursor
- Trim whitespaces inside string (new)
-
Functions
- Convert shorthand arrow function to statement
- Convert to shorthand arrow function
- Add parens to single arrow function parameter
- Convert function to arrow function
- Convert arrow function to regular function (new)
- Convert function declaration to arrow function (new)
-
Async
- [on selection] Run selected await statements in parallel with
Promise.all
- [on selection] Run selected await statements in parallel with
-
TypeScript
- Convert enum to string-enum (new)
- Convert string-enum to type union (new)
- Convert type union of strings to string-enum (new)
-
JSX / TSX
- Wrap value with {} (JSX attributes)
- Remove {} from JSX attribute
- Collapse/Expand empty tag
-
React
- Wrap function into useCallback() hook (new)
- React: Wrap component function with React.forwardRef() (new)
- React: Wrap component function with React.memo() (new)
- React: Convert function to React.FunctionComponent declaration (new)
These two commands allow you to successively select blocks of code so that it's easier to select what you want. Just look at the animation, rather than read this text 🤓. Unlike VS Code's embedded commands (editor.action.smartSelect.*
), this extension uses an abstract syntax tree under the hood, which provides much more accurate results.
You might want to assign hotkeys for these commands, search for javascriptBooster.extendSelection
and javascriptBooster.shrinkSelection
. Ctrl+W
and Ctrl+Shift+W
(⌘W and ⌘⇧W) are used in WebStorm by default.
As this feature is only supported in JavaScript and TypeScript for now, you can configure fallback commands that will be called for other file types instead (VS Code's smartSelect.*
by default). They will also be called if the file has fatal syntax errors.
- Convert if -> switch-case
- TS: Change member access (public -> private etc)
- TS: Convert alias to interface
- TS: Generate missing switch cases for enum
- ...?
- Duplicate line/selection
- Navigate to related files (Hello.jsx -> Hello.scss, Hello.spec.jsx)
- Support loading code actions from user workspace: users can create their own, project-related refactorings! 😅
Largely inspired by WebStorm and its variety of code refactorings. The extension uses Babylon to parse the code and then manipulates the abstract syntax tree using jscodeshift.
PRs are always welcome. Please refer to the Contribution Guide for tips on how to work with this project. The guide includes basic development workflows like running tests and debugging as well as useful links for creating new code actions.
If you like this project and find it useful, you could also donate to support its development .
In this release: a bunch of new code actions including React and TypeScript; resolve technical debt and do the groundwork for more exciting features!
-
New code actions
- React: Wrap function into useCallback() hook
- React: Wrap component function with React.forwardRef()
- React: Wrap component function with React.memo()
- React: Convert function to React.FunctionComponent
- TS: Convert enum to string-enum
- TS: Convert string-enum to type union
- TS: Convert type union of strings to string-enum
- Function: Convert arrow function to regular function
- Function: Convert function declaration to arrow function
- Conditions: Merge nested
if
statements declaration - String: Trim whitespaces inside string
-
Fixes
- replace-with-regular-string should not trigger on tagged template strings
- React: convert to regular function now supports React function components
-
Others
- Add action scoping (e.g. react-only, ts-only)
- Use strict TypeScript in the language server
- Migrate to ESLint
- Switch to Yarn (for selective deps resolution)
- Add log-level, add verbose performance logs
-
Add new refactoring:
Replace ?: with if-else
(#19): -
Fixed 'Remove redundant else' refactoring not to appear when there is not else statement (#21).
-
The project now uses Webpack internally to minimize the extension size and improve performance (#22).
-
Add new range-based code action:
Call await statements in parallel with Promise.All()
(#7): -
Add new option to adjust formatting for generated code (only needed when a code action generates new code, the formatting of the unaffected code is always preserved). See
javascriptBooster.formattingOptions
and #10. -
Bumped @babel/parser, adds proper Angular support (#13).
-
Fixed
Convert to arrow function
refactoring, now works correctly with async functions (#11). -
Fixed
replace if-else with ?:
refactoring, now supports refactoring of pure expressions:
-
[VSCode API] Switched to using selection parameter passed into
provideCodeActions()
(Fixes #5) -
JSX: Expand empty tag
now puts the cursor between the tags when executed. -
Split string under cursor
now puts selection before the second string when executed. -
Split string under cursor
no longed triggers outside string quotes. -
Remove redundant else
now supports the case whenif
branch ends with return statement: -
Replace with ternary
can now replace conditional return statements: -
Added new action:
Simplify if-else
. -
Added new action:
Simplify ?:
.
- Improved language server performance when available code actions are computed.
- Fixed
Split string literal under the cursor
, now works well with a series of concatenations ('foo' + 'bar][baz' => 'foo' + 'bar' + 'baz'
) and respects escape sequences. - Fixed
App parens to arrow function parameter
, renamed intoWrap parameter with ()
to avoid confusion withAdd braces to arrow function
and now always puts the cursor at the end of the parameter. - Fixed a number of string actions becoming available when under string literals which cannot be transformed (e.g. inside imports, TS enums etc).
- Extracted all AST-related operations into a Language Server. Massively improves UI responsiveness, particularly when working with large files. 🔥
- Added new code action:
Split string literal under the cursor
. - Fixed
Split into declaration and initialization
to work when inside a function/arrow expression.
- Optimized code action performance on large files. Only the transformed fragment of the code is replaced when an action is applied.
- Fixed Extend/Shrink selections fallback commands not working due to missing extension activation points.
-
Changed
Split into declaration and initialization
action:- It no longer appears in the bulb when the cursor is inside a variable initializer.
- It no longer appears in the bulb when variable declaration is a part of ES6 module export.
-
Changed
Convert to shorthand arrow function
action: it now supports transformation of Expression Statements (without explicit return).
-
Added new inline code actions.
- Add parens to arrow function parameter
- Remove braces from JSX attribute
-
Added support for multiple cursors in smart selection commands.
-
Changed
Replace if-else with ?:
action: it now supports if-return-else-return scenario. -
Fixed
Collapse/Expand empty tag
action: it previously didn't work when the element is nested into a JSX attribute.
-
Added new inline code actions.
- Flip ?:
- Convert function to arrow function
- Convert const -> let
- JSX: Collapse/Expand empty tag
-
Added support for TypeScript 2.7 (definite assignment assertion modifier in class property definitions) through upgrading to the latest Babylon.
-
Changed
Split into declaration and initialization
action: it can now split const declarations. -
Fixed #1: Sequence of string literals doesn't convert properly when transforming to template literal.
-
Fixed smart selection extension for collapsed JSX elements.
-
Added new smart selection commands for JavaScript and TypeScript (with behavior very close to those in WebStorm). When used in other languages, the fallback commands defined in settings are used.
javascriptBooster.extendSelection
javascriptBooster.shrinkSelection
-
Added a command to run global code actions.
-
Added support for external code actions, you can run them from a directory inside your workspace (the directory path is defined is settings,
/codemods
by default).
-
Added the following inline code actions. The list will keep expanding in later releases.
- Flip if-else
- Remove redundant else
- Replace if-else with ?:
- Convert shorthand arrow function to statement
- Convert to shorthand arrow function
- Replace string with template string
- Replace template string with regular string
- Wrap value with {} (JSX attributes)
- Convert var to let
- Convert var to const
- Split into multiple declarations
- Split into declaration and initialisation
- Merge declaration and initialisation
The icon made by Swifticons from www.flaticon.com is licensed by CC 3.0 BY