sublime怎样配置TypeScript环境 sublime开发TS的必备设置-sublime-PHP中文网

sublime怎样配置TypeScript环境 sublime开发TS的必备设置

看不見的法師

发布： 2025-08-27 10:38:01

原创

342人浏览过

sublime text不直接支持typescript编译和类型检查，需通过插件和配置实现。1. 安装package control以便管理插件；2. 通过package control安装typescript插件以获得语法高亮、自动完成等基础功能；3. 安装typescript build插件以支持在编辑器内编译typescript；4. 在项目根目录创建tsconfig.json文件并配置编译选项，如target、module、sourcemap、outdir和strict等，并通过include指定需编译的文件；5. 在sublime text中创建自定义构建系统，新建typescript.sublime-build文件，配置cmd为["tsc", "-p", "."]，设置file_regex解析错误、selector为source.ts、working_dir为${project_path}；6. 按ctrl+b执行构建，代码将根据tsconfig.json配置编译到指定输出目录；7. 可选配置eslint进行代码检查，需全局安装eslint、@typescript-eslint/parser和@typescript-eslint/eslint-plugin，创建.eslintrc.js配置文件，并安装sublimelinter及sublimelinter-eslint插件；8. 为增强自动完成，建议安装lsp和lsp-typescript插件以启用typescript language server；9. 若编译报错，应检查tsconfig.json配置、构建系统命令是否正确、tsc是否已安装并加入环境变量、插件是否正常安装以及项目结构是否符合配置；10. 调试typescript代码需借助外部工具，可在chrome开发者工具中利用source map调试前端代码，或使用node.js调试器如ndb调试后端应用，确保tsconfig.json中sourcemap设为true。该配置流程完整实现了sublime text下的typescript开发环境搭建，包括编译、检查、自动完成与调试支持。

sublime怎样配置TypeScript环境 sublime开发TS的必备设置

Sublime Text本身并不直接支持TypeScript的编译和类型检查。需要通过一些插件和配置来搭建一个高效的TypeScript开发环境。核心在于安装插件，配置编译选项，并可能需要一些个性化的设置。

解决方案

安装Package Control: 如果还没有安装，这是Sublime Text管理插件的必备工具。可以通过 Sublime Text 的控制台（
```
Ctrl + ~
```
登录后复制
或
```
View > Show Console
```
登录后复制
）输入提供的代码片段来安装。
安装 TypeScript 插件: 通过 Package Control 安装
```
TypeScript
```
登录后复制
插件。这个插件提供了语法高亮、代码片段、自动完成等基本功能。
安装 TypeScript Build System: 安装
```
TypeScript Build
```
登录后复制
插件。这个插件允许你在 Sublime Text 中直接编译 TypeScript 代码。
配置
```
tsconfig.json
```
登录后复制
: 在你的项目根目录下创建一个
```
tsconfig.json
```
登录后复制
文件。这个文件定义了 TypeScript 编译器的选项，例如目标 ECMAScript 版本、模块系统、是否启用严格模式等等。一个简单的例子：
```
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}
```
登录后复制
```
target
```
登录后复制
指定了编译后的 JavaScript 版本，
```
module
```
登录后复制
指定了模块系统，
```
sourceMap
```
登录后复制
生成 source map 文件方便调试，
```
outDir
```
登录后复制
指定输出目录，
```
strict
```
登录后复制
启用严格模式。
```
include
```
登录后复制
指定要编译的 TypeScript 文件。这个配置很重要，决定了你的代码如何被编译。
配置 Sublime Text Build System: 在 Sublime Text 中，选择
```
Tools > Build System > New Build System...
```
登录后复制
，然后输入以下内容：
```
{
  "cmd": ["tsc", "-p", "."],
  "file_regex": "^(..[^:]*):([0-9]+):([0-9]+): (.*)$",
  "selector": "source.ts",
  "working_dir": "${project_path}"
}
```
登录后复制
保存为
```
TypeScript.sublime-build
```
登录后复制
。
```
cmd
```
登录后复制
指定了编译命令，
```
-p .
```
登录后复制
表示使用当前目录下的
```
tsconfig.json
```
登录后复制
文件。
```
file_regex
```
登录后复制
用来解析编译错误信息，
```
selector
```
登录后复制
指定这个 build system 用于 TypeScript 文件，
```
working_dir
```
登录后复制
设置工作目录。
编译 TypeScript 代码: 现在，打开一个 TypeScript 文件，按下
```
Ctrl + B
```
登录后复制
(或者
```
Cmd + B
```
登录后复制
在 macOS 上) 就可以编译代码了。编译结果会输出到
```
tsconfig.json
```
登录后复制
中指定的
```
outDir
```
登录后复制
目录。

壁纸样机神器
免费壁纸样机生成

0

查看详情
使用 linter (可选): 安装 ESLint 和相应的 TypeScript 插件，可以进行代码风格检查和潜在问题发现。这需要安装 Node.js 和 npm。然后，全局安装 ESLint 和 TypeScript ESLint 解析器：
```
npm install -g eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
登录后复制
在项目根目录下创建一个
```
.eslintrc.js
```
登录后复制
文件，配置 ESLint 规则。一个简单的例子：
```
module.exports = {
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": './tsconfig.json',
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    // 自定义规则
  }
};
```
登录后复制
安装 Sublime Text 的 ESLint 插件，例如
```
SublimeLinter
```
登录后复制
和
```
SublimeLinter-eslint
```
登录后复制
。配置 SublimeLinter 使用 ESLint。

Sublime Text 如何自动完成 TypeScript 代码？

Sublime Text 本身的代码自动完成能力比较弱，需要依赖插件。

TypeScript

登录后复制

插件提供了基本的自动完成功能。但更强大的自动完成功能需要配置 TypeScript Language Server (TSLS)。 TSLS 是一个独立的进程，提供了代码补全、定义跳转、重构等功能。需要安装

LSP

登录后复制

和

LSP-typescript

登录后复制

插件。安装完成后，LSP 会自动启动 TSLS。如果需要手动配置，可以参考 LSP 的文档。 TSLS 的配置选项很多，可以根据自己的需求进行调整。例如，可以配置 TSLS 使用指定版本的 TypeScript 编译器。

为什么我的 Sublime Text 编译 TypeScript 报错？

编译报错的原因有很多。首先，检查

tsconfig.json

登录后复制

文件是否正确配置。

include

登录后复制

和

exclude

登录后复制

选项决定了哪些文件会被编译。

compilerOptions

登录后复制

中的选项会影响编译结果。其次，检查 Sublime Text 的 Build System 是否正确配置。

cmd

登录后复制

命令必须能够正确执行

tsc

登录后复制

命令。如果

tsc

登录后复制

命令没有安装或者没有添加到环境变量中，编译就会失败。另外，检查 TypeScript 插件是否正确安装。如果插件没有正确安装，语法高亮和代码补全功能可能无法正常工作，编译也可能失败。最后，检查项目目录结构是否正确。 TypeScript 编译器会根据

tsconfig.json

登录后复制

文件中的配置来查找文件。如果文件结构不符合预期，编译就会失败。可以尝试在命令行中直接执行

tsc

登录后复制

命令来排查问题。如果命令行中可以正常编译，说明问题可能出在 Sublime Text 的配置上。

如何调试 Sublime Text 中的 TypeScript 代码？

Sublime Text 本身没有内置的调试器，需要借助其他工具。常用的方法是使用 Chrome 浏览器的开发者工具进行调试。首先，确保 TypeScript 代码生成了 source map 文件。在

tsconfig.json

登录后复制

文件中，将

sourceMap

登录后复制

选项设置为

true

登录后复制

。然后，在 Chrome 浏览器中打开要调试的网页。打开开发者工具，切换到 "Sources" 面板。在 "Sources" 面板中，可以找到 TypeScript 源代码。设置断点，刷新网页，就可以开始调试了。另一种方法是使用 Node.js 的调试器进行调试。首先，安装 Node.js 的调试器，例如