VSCode TSLint 插件开发教程

VSCode TSLint 插件开发教程

vscode-tslint A tslint integration for vscode 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-tslint

1. 项目的目录结构及介绍

vscode-tslint/
├── tslint/
│   ├── src/
│   ├── test/
│   ├── package.json
│   ├── README.md
│   └── ...
├── tslint-server/
│   ├── src/
│   ├── test/
│   ├── package.json
│   ├── README.md
│   └── ...
├── tslint-tests/
│   ├── test-files/
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
├── SECURITY.md
├── gulpfile.js
├── package-lock.json
├── package.json
├── thirdpartynotices.txt
├── tslint.json
└── vscode-tslint.code-workspace

目录结构介绍

• tslint/: 包含 TSLint 客户端的主要代码和测试文件。

  • src/: 客户端的主要源代码。
  • test/: 客户端的测试代码。
  • package.json: 客户端的依赖配置文件。
  • README.md: 客户端的开发说明文档。

• tslint-server/: 包含 TSLint 服务端的主要代码和测试文件。

  • src/: 服务端的主要源代码。
  • test/: 服务端的测试代码。
  • package.json: 服务端的依赖配置文件。
  • README.md: 服务端的开发说明文档。

• tslint-tests/: 包含手动测试文件。

  • test-files/: 手动测试的文件。

• .gitignore: Git 忽略文件配置。

• LICENSE: 项目许可证文件。

• README.md: 项目的主 README 文件。

• SECURITY.md: 项目的安全说明文档。

• gulpfile.js: Gulp 构建脚本。

• package-lock.json: 依赖包锁定文件。

• package.json: 项目的主依赖配置文件。

• thirdpartynotices.txt: 第三方通知文件。

• tslint.json: TSLint 配置文件。

• vscode-tslint.code-workspace: VSCode 工作区配置文件。

2. 项目的启动文件介绍

启动文件

• tslint/src/extension.ts: 这是 TSLint 客户端的入口文件，负责初始化插件并启动 TSLint 服务。
• tslint-server/src/server.ts: 这是 TSLint 服务端的入口文件，负责处理来自客户端的请求并执行 TSLint 检查。

启动步骤

1. 安装依赖: 在 tslint 和 tslint-server 目录下分别运行 npm install 安装依赖。
2. 编译服务端: 在 tslint-server 目录下运行 npm run compile 或 npm run watch 编译服务端代码。
3. 启动调试: 在 tslint 目录下按 F5 启动调试，VSCode 会自动启动一个新窗口并加载插件。

3. 项目的配置文件介绍

配置文件

• tslint.json: TSLint 的配置文件，定义了代码检查的规则。
• package.json: 项目的主依赖配置文件，包含了项目的依赖、脚本命令等信息。
• vscode-tslint.code-workspace: VSCode 工作区配置文件，定义了工作区的设置和文件夹结构。

配置文件示例

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

package.json

{
  "name": "vscode-tslint",
  "version": "1.0.0",
  "description": "TSLint integration for VSCode",
  "main": "src/extension.ts",
  "scripts": {
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  "dependencies": {
    "tslint": "^6.1.3",
    "vscode": "^1.1.36"
  }
}

vscode-tslint.code-workspace

{
  "folders": [
    {
      "path": "tslint"
    },
    {
      "path": "tslint-server"
    }
  ],
  "settings": {}
}

通过以上配置文件，可以定制 TSLint 的行为、管理项目的依赖，并配置 VSCode 工作区。

vscode-tslint A tslint integration for vscode 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-tslint