我是如何配置 Emacs 以使用 TypeScript 和 React 的
我到底想表达什么？
让我们开始吧
适用tide于rjsx和web模式
rjsx在所有三种模式下使用代码片段
最后但并非最不重要的
我到底想表达什么？
我最近接触了 TypeScript，这让我既欣喜又难过。长期以来，我一直在使用 React 和 Emacs 的rjsx-mode模式，而且一直很喜欢它。我觉得这个模式非常好，甚至连普通的 JavaScript 文件我都会用它。
后来我开始接触 TypeScript，它既让我惊艳，又让我感到惋惜。对于普通的 TypeScript 文件来说，.ts它简直太棒了。Spacemacs 的TypeScript 模式甚至比……还要好rjsx-mode，所有类型都完美地显示在底部栏，还有自动补全、自动导入……应有尽有。这都要感谢Tide。可惜的是：它没有…… tsx-mode，要编写 TypeScript.tsx文件，我们只能使用Web 模式。别误会，Web 模式也很棒，但这React + Typescript并非我们当时的目标。
我的观点是，要把这三种模式的优点都融入到所有模式中！
这段文字可能有点长，但我希望它能有所帮助 :)
以下是我的实际配置：
这里要强调一点：我现在用的是Spacemacs，所以这里的一部分代码示例会用到它，但其实没什么神奇之处，Spacemacs 只是在 Emacs 的基础上添加了一些预先写好的 Lisp 代码（哈哈）。你在其他版本的 Emacs 里也能做到。但我真心推荐你从 Spacemacs 入手，特别是如果你是 Emacs 新手。它彻底改变了我的使用体验，不过这又是另一个话题了。
让我们开始吧
您必须安装一些模式。如果您使用的是 Spacemacs ，那么在安装层时，大多数模式都会自动安装。这些软件包包括：，，，，，，（如果rjsx-mode我漏掉了一些软件包，请见谅）。typescript-modeweb-modetidecompanyyasnippetprettier-js
或者更简单地说，在你的.spacemacs文件中添加以下图层dotspacemacs-configuration-layers：
(defun dotspacemacs/layers ()
;; ...
dotspacemacs-configuration-layers
'(
html
(typescript :variables
javascript-backend 'tide
typescript-fmt-tool 'prettier
typescript-linter 'eslint)
(javascript :variables
javascript-backend 'tide
javascript-fmt-tool 'prettier
node-add-modules-path t)
;; ...
参见TypeScript 层、JavaScript 层、HTML 层
并且dotspacemacs-additional-packages
;; ...
dotspacemacs-additional-packages
'(
rjsx-mode
yasnippet-snippets
prettier-js
;; ...
其中一些导入需要您安装第三方库：
npm i -g tern prettier
如果您未使用 Spacemacs，则必须在您的.emacs文件中引入每个软件包。所有这些软件包的 GitHub 页面都提供了清晰的安装说明 :)
适用tide于rjsx和web模式
基本配置已完成，三种模式都已安装并运行，接下来该做什么？
Tide模式功能强大，能为你带来很多便利，我建议你阅读一下它的 README 文件。它会自动运行，typescript-mode而且非常适合与其他js/ts模式一起使用。
我已将所有配置文件分开，并导入到配置文件中，但如果您不使用 Spacemacs，dotspacemacs/user-config则可以将所有这些额外的配置直接放在此部分或您的文件中。.emacs
首先，我们定义一个潮汐函数配置，然后将其应用于所有这些模式：
(defun dotspacemacs/user-config ()
;; ...
;; tide def func:
(defun tide-setup-hook ()
(tide-setup)
(eldoc-mode)
(tide-hl-identifier-mode +1)
(setq web-mode-enable-auto-quoting nil)
(setq web-mode-markup-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-attr-indent-offset 2)
(setq web-mode-attr-value-indent-offset 2)
(setq lsp-eslint-server-command '("node" (concat (getenv "HOME") "/var/src/vscode-eslint/server/out/eslintServer.js") "--stdio"))
(set (make-local-variable 'company-backends)
'((company-tide company-files :with company-yasnippet)
(company-dabbrev-code company-dabbrev))))
;; hooks
(add-hook 'before-save-hook 'tide-format-before-save)
;; use rjsx-mode for .js* files except json and use tide with rjsx
(add-to-list 'auto-mode-alist '("\\.js.*$" . rjsx-mode))
(add-to-list 'auto-mode-alist '("\\.json$" . json-mode))
(add-hook 'rjsx-mode-hook 'tide-setup-hook)
;; web-mode extra config
(add-hook 'web-mode-hook 'tide-setup-hook
(lambda () (pcase (file-name-extension buffer-file-name)
("tsx" ('tide-setup-hook))
(_ (my-web-mode-hook)))))
(flycheck-add-mode 'typescript-tslint 'web-mode)
(add-hook 'web-mode-hook 'company-mode)
(add-hook 'web-mode-hook 'prettier-js-mode)
(add-hook 'web-mode-hook #'turn-on-smartparens-mode t)
;; ...
最后这几行代码为.tsx文件和其他一些子模块添加了我们的 Tide 设置，这些子模块在其他两种模式中已经存在。
此外，我建议全局使用这些模式：
;; yasnippet
(yas-global-mode 1)
;; flycheck
(global-flycheck-mode)
(add-hook 'after-init-hook #'global-flycheck-mode)
;; company-mode
(global-company-mode)
rjsx在所有三种模式下使用代码片段
rjsx-mode与其他两种模式相比，它最大的优势在于代码片段功能，所以我们应该到处都使用它:)
这里有两种方法，第一种方法可以在你的.emacs.d配置文件中找到，该配置文件是代码片段配置的默认目录（在 Spacemacs 中是 `/etc/snippets/snippets/` .emacs.d/layers/+completion/auto-completion/local/snippets/），第二种方法是定义你自己的配置文件：
(add-to-list 'yas-snippet-dirs "~/path/to/your/dir")
;; notice that this add-to-list must be called before this:
(yas-global-mode 1)
这里的步骤非常简单：在你的代码片段目录下，创建一个名为 `mode` 的目录，例如 `<mode_name>`，web-mode/然后在该目录下创建一个名为 `mode_names` 的文件，.yas-parents并将你想要“窃取”的代码片段的模式名称写入其中。在我们的例子中：
片段目录/
网页模式/
.yas-parents
typescript-mode/
.yas-parents
我自己的配置：
将以下几行添加到文件中：
typescript-mode/.yas-parents
rjsx-mode
web-mode/.yas-parents
rjsx-mode
prog-mode
js-mode
最后但并非最不重要的
有了这些配置，你现在可以实现自动导入、保存时格式化/导入、检查类型、检查定义……所有功能都实现了 :)
但我还想向您推荐另一个名为paredit 的软件包：它是一个 Lisp 语言库（如果您使用任何 Lisp 系列语言进行编程，这个软件包应该是必备的！）。一旦您掌握了快捷键，并且希望在所有语言中都能使用它们，那么可以通过以下函数调用来实现：
(sp-use-paredit-bindings)
我也使用neotree和all-the-icons来创建侧边栏。由于这篇文章已经太长了，关于这个具体的配置，我会在另一篇文章中详细介绍 :)
还可以美化符号！
我真心希望你喜欢它，也希望它对你的 Emacs 使用之旅有所帮助。
这是我的 Spacemacs 配置仓库，我的所有 Lisp 程序都在laurisp/（哈哈）目录中。
注意安全，戴口罩，待在家，用
Emacs。xoxo
编辑：今天我发现了一些奇怪的问题，import-js所以把它从教程里删除了。我会尝试用 Tide 在保存时整理导入的文件，如果成功了我会在这里更新 :)