三菱系统面板锁了怎么解锁

其实官方文档已经写的很清楚了，这玩意儿旨在优化 Typescript 代码的 编写体验。所以想利用这玩意儿改变编译结果或是想自创新语法的还是省省吧 嗯，我在说我自己呢！
那么 Typescript Service Plugins 的可以用来做哪些事呢？
官方也有明确的回答：

plugins are for augmenting the editing experience. Some examples of things plugins might do:

Provide errors from a linter inline in the editor
Filter the completion list to remove certain properties from window
Redirect “Go to definition” to go to a different location for certain identifiers
Enable new errors or completions in string literals for a custom templating language

同样官方也给出了不推荐使用 Typescript Service Plugins 的场景：

Examples of things language plugins cannot do:

Add new custom syntax to TypeScript
Change how the compiler emits JavaScript
Customize the type system to change what is or isn’t an error when running tsc

好了，相信读到这里大家一定对 Typescript Service Plugins 有了一个大致的了解，下面我会介绍一下 Typescript Service Plugins 的安装与使用。
如何安装以及如何配置 Typescript Service Plugins
Typescript Service Plugins 的安装方法

就像安装普通的 npm 包一样

npm install --save-dev your_plugin_name
复制代码如何在 tsconfig.json 中配置 Typescript Service Plugins
{
“compilerOptions”: {
/** compilerOptions Configuration … /
“noImplicitAny”: true,
“plugins”: [
{
/* 配置插件名称，也可以填写本地路径 /
“name”: “sample-ts-plugin”
/* 这里可以给插件传参 … /
}
/* 支持同时引入多个插件 … */
]
}
}
复制代码几个需要注意的地方:

如果使用 VSCode 开发，记得务必 using the workspace version of typescript，否则可能导致插件不生效。
Typescript Service Plugins 产生的告警或者报错不会影响编译结果。
如果配置完了不生效可以先尝试重启你的编辑器。

市面上已有的 Typescript Service Plugins 举例介绍

具体使用细节请用编辑器打开我提供的 demo，自行体验。

示例插件：typescript-plugin-css-modules
插件安装
npm install --save-dev typescript-styled-plugin typescript
复制代码配置方法
在 tsconfig.json 中增加配置
{
“compilerOptions”: {
“plugins”: [
{
“name”: “typescript-styled-plugin”
/** 具体配置参数请查看官方文档 /
}
]
}
}
复制代码插件基本介绍与使用场景
此插件可以用来缓解在使用 CSS Module 时没有代码提示的困境，主要思路就是通过读取对应的 CSS Module 文件并解析成对应的 AST，并生成对应的类型文件从而支持对应的代码提示。但是根据反馈来看，似乎某些场景下表现并不尽人意，是否值得大规模使用有待商榷。
类似实现思路的还有 typings-for-css-modules-loader，功能来说肯定是 webpack loader 更加强大，但是 Typescript Plugin 更加轻量、入侵度也越低，取舍与否，见仁见智吧
示例插件：typescript-eslint-language-service
插件安装
npm install --save-dev eslint typescript-eslint-language-service
复制代码配置方法
在 .eslintrc. 文件中，添加对应的 eslint 配置
在 tsconfig.json 中增加配置
{
“compilerOptions”: {
“plugins”: [
{
“name”: “typescript-eslint-language-service”
/** 默认会读取 .eslintrc.* 文件 /
/* 具体配置参数请查看官方文档 /
}
]
}
}
复制代码插件基本介绍与使用场景
此插件可以让 Typescript 原生支持 eslint 检查及告警，编辑器不需要安装任何插件即可自持，但是报错并不影响编译结果。
示例插件：typescript-styled-plugin
插件安装
npm install --save-dev typescript-styled-plugin typescript
复制代码配置方法
在 tsconfig.json 中增加配置
{
“compilerOptions”: {
“plugins”: [
{
“name”: “typescript-styled-plugin”
/* 具体配置参数请查看官方文档 */
}
]
}
}
复制代码插件基本介绍与使用场景
此插件可以为 styled-components 的样式字符串模板提供 属性/属性值 做语法检查。
同时也推荐安装 VSCode 插件 vscode-styled-components，为你的样式字符串模板提供代码提示以及语法高亮。
如何自己写一个 Typescript Service Plugins
未完待续…
参考资料链接

Using the Compiler API
Using the Language Service API
Writing a Language Service Plugin
Useful Links for TypeScript Issue Management

总结
未完待续…
Q&A（欢迎评论区补充）
可以利用 Typescript Service Plugin（例如配置 eslint 规则）阻塞编译或者在编译时告警吗？
答：不可以，所有可以使用 Typescript Plugin 的场景一定都是编码阶段的，而且官方对 plugins 的定位局限在了 只改善编写体验 这方面，你并不能自定义语法或者自定义规则来改变编译结果，不过你可以考虑使用自定义 compiler，当然这是另一个话题了。
以下引用自官方文档：

TypeScript Language Service Plugins (“plugins”) are for changing the editing experience only. The core TypeScript language remains the same. Plugins can’t add new language features such as new syntax or different typechecking behavior, and plugins aren’t loaded during normal commandline typechecking or emitting.