开发速记-emacs篇: typescript+react开发模式

安装nix并配置channel:

sudo install -d -m755 -o $(id -u) -g $(id -g) /nix
curl https://nixos.org/nix/install | sh

nix-channel --add https://nixos.org/channels/nixos-20.03 nixos-20.03
nix-channel --update nixos-20.03

安装yarn

nix-env -f ~/.nix-defexpr/channels/nixos-20.03 -iA yarn

安装emacs:

nix-env -f ~/.nix-defexpr/channels/nixos-20.03 -iA emacs

配置emacs:

创建并拷贝github文件内容至~/.emacs.d/init.el
https://github.com/clojurians-org/my-emacs/blob/master/init.el

1. 安装typescript-mode及lsp-mode

(dolist (package '(paredit restclient json-mode typescript-mode
                   dap-mode lsp-java gradle-mode
                   dante cider
                   ))
  (unless (package-installed-p package)
    (package-install package)))

2. 添加lsp模式， 以及开启tsx文件支持

(add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescript-mode))
(add-hook 'typescript-mode-hook #'lsp)

创建项目:

yarn create react-app my-app --template typescript

启动web

cd my-app
yarn start

image.png

image.png

导入项目

App.tsx is not part of any project. Select action:

i==>Import project root ~/my-tmp/my-app/.
I==>Import project by selecting root directory interactively.
d==>Do not ask again for the current project by adding ~/my-tmp/my-app/ to lsp-session-folders-blacklist.
D==>Do not ask again for the current project by selecting ignore path interactively.
n==>Do nothing: ask again when opening other files from the current project.

编写typescript代码保存后页面自动更新

image.png

image.png

项目实战

1. 打开linked datahub效果:
   https://github.com/linkedin/datahub

image.png