Skip to content

Latest commit

 

History

History
58 lines (47 loc) · 2.78 KB

visual-studio-code-setup.md

File metadata and controls

58 lines (47 loc) · 2.78 KB

IDEs and Editors

You will of course need an editor or integrated development environment (IDE) to develop code contributions to Numberscope.

VS Code

The recommended IDE consists of VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

VS Code is pretty easy to set up for Numberscope development. Follow these steps and you'll be underway quickly:

  1. Install VS Code. How exactly you do this will depend on what operating system you use. Try the following link and follow the setup guide for your operating system:
  2. Once you've installed VS Code, you'll want to install the following extensions (make sure you get the exact same ones as below):
  3. Install any other extensions you might want. If you like Vim keybindings, try the Vim extension. There are also lots of Emacs extensions. There are a lot of color themes as well.

Type support for .vue imports in TypeScript

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin(Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Alternatives

There are of course many other possible editors and IDEs. For example, one can use the venerable Emacs editor, which has many packages for highlighting code and autoformatting it. Support for the latter that respects Numberscope's particular setup is provided by tools/editor/autoformat.el in this repository. That Emacs package runs source files through the prettier-eslint formatter (see the following page) every time they are saved in Emacs.