Coc-jsref NPM | npm.io

jsref

JavaScript refactoring language server

Demo Animation

An idea behind this project is to have desirable refactoring experience for JavaScript (JSX, TypeScript, Flowtype) without tying to any editor.

This tool implements language server protocol (LSP) to avoid any direct binding to code editors. This means any editor with LSP support can use it.

It uses babylon parser to parse and generate JavaScript.

Supported refactorings:

const A = () => { return r.div() }

const StyledDiv = styled("div", {});

const A = () => { return r(StyledDiv) }

return result;

Installation

Vim and Neovim (via coc.nvim)

Install coc.nvim plugin
Run :CocInstall coc-jsref
Configure hotkeys. For example to use ga:

nmap ga <Plug>(coc-codeaction-cursor)
xmap ga <Plug>(coc-codeaction-selected)

VSCode

VSCode extension contains server and you don't need to install global one with brew.

Search in Extensions panel for jsref or install via CLI

code --install-extension slonoed.jsref

Sublime Text 3

Install jsref language binary via brew

brew install slonoed/tap/jsref

or npm

npm i -g @slonoed/jsref

Install LSP package from Package Control.

Add new client to LSP via Preferences: LSP Setting.

"jsref": {
  "command": ["jsref", "--stdio"],
	"scopes": ["source.js"],
	"syntaxes": [
		"Packages/babel-sublime/JavaScript (Babel).tmLanguage",
		"Packages/Babel/JavaScript (Babel).sublime-syntax",
		"Packages/JavaScript/JavaScript.sublime-syntax"
	],
	"languageId": "javascript",
},

Final config should look like this

{
  "clients": {
    "jsref": {
      "command": ["jsref", "--stdio"],
      "scopes": ["source.js"],
      "syntaxes": [
        "Packages/babel-sublime/JavaScript (Babel).tmLanguage",
        "Packages/Babel/JavaScript (Babel).sublime-syntax",
        "Packages/JavaScript/JavaScript.sublime-syntax"
      ],
      "languageId": "javascript"
    }
  }
}