4

Setting up emacs for typescript development

 3 years ago
source link: https://willschenk.com/articles/2021/setting_up_emacs_for_typescript_development/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Published April 13, 2021 #emacs, #typescript, #tide

I've been playing with deno and typescript, so I thought I'd document how to setup a basic tide environment with emacs.

Prerecs

Things will go better if you have nativejson support in your emacs build. I build from scratch which is super easy, but to check what you have you can run the following elisp:

    (if (functionp 'json-serialize)
        (message "Native JSON is available")
        (message "Native JSON is *not* available"))
Native JSON is available

You also will need Node > 0.12.0, which you can test with:

node -v
v15.12.0

Installing tide

Throw this in your emacs.el:

  (use-package tide :ensure t)
  (use-package company :ensure t)
  (use-package flycheck :ensure t)

  (defun setup-tide-mode ()
    (interactive)
    (tide-setup)
    (flycheck-mode +1)
    (setq flycheck-check-syntax-automatically '(save mode-enabled))
    (eldoc-mode +1)
    (tide-hl-identifier-mode +1)
    ;; company is an optional dependency. You have to
    ;; install it separately via package-install
    ;; `M-x package-install [ret] company`
    (company-mode +1))

  ;; aligns annotation to the right hand side
  (setq company-tooltip-align-annotations t)

  ;; formats the buffer before saving
  (add-hook 'before-save-hook 'tide-format-before-save)

  (add-hook 'typescript-mode-hook #'setup-tide-mode)

And also tell it about tsx files:

  (require 'web-mode)

  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
  (add-hook 'web-mode-hook
            (lambda ()
              (when (string-equal "tsx" (file-name-extension buffer-file-name))
                (setup-tide-mode))))

  ;; enable typescript - tslint checker
  (flycheck-add-mode 'typescript-tslint 'web-mode)

Creating a sample project

Lets create a sample project

  cd $(mktemp -d)
  npm init -y
  npm install --save-dev typescript-deno-plugin typescript

And then create a tsconfig.json file which tells typescript about deno:

{
    "compilerOptions": {
        "plugins": [
            {
                "name": "typescript-deno-plugin",
                "enable": true, // default is `true`
                "importmap": "import_map.json"
            }
        ]
    }
}

Lets create a file: test.tsx

console.log("Welcome to deno!")

const url = Deno.args[0];
const res = await fetch(url);

const body = new Uint8Array(await res.arrayBuffer());
await Deno.stdout.write(body);

And put your cursor over Deno.stdout and press M-. to navigate to the definition.

References


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK