为什么 Visual Studio 2017 不在 TypeScript 文件上使用 ESLint?
Why doesn't Visual Studio 2017 use ESLint on TypeScript files?
我在 Visual Studio 2017 年创建了一个 Web 应用程序并安装了依赖项。
package.json:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@typescript-eslint/parser": "1.7.0",
"eslint": "5.16.0",
"typescript": "3.4.5"
}
}
我已经使用最新的最佳实践为 TypeScript 设置了 ESLint,即 @typescript-eslint/parser
。
.eslintrc:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"extends": [ "eslint:recommended" ]
},
"rules": {
"quotes": [ "error", "double" ]
}
}
(注意需要双引号的规则。)
我创建了两个文件,test_js.js
和 test_ts.ts
,内容相同:
var x = 'Hello, world';
但只有JS文件显示引号lint错误:
为什么 Visual Studio 没有检查我的 TypeScript 文件?
(交叉发布在 Visual Studio 开发者社区:https://developercommunity.visualstudio.com/content/problem/552855/why-doesnt-visual-studio-2017-use-eslint-on-typesc.html)
更新:
VS现在does things well。请不要做我在下面做的事。升级 VS 并以正确的方式做事。
原答案:
我已经建立了一个临时的解决方法。
Visual Studio 2017 似乎尊重 tsconfig.json 中提供的 TSLint 设置。不幸的是,它还不接受 ESLint 的 TypeScript 规则。所以如果我想在 VS 编辑器中检查 TypeScript,我必须使用旧的 tslint.json 样式配置。
tsconfig.json:
{
"compilerOptions": {
"plugins": [
{"name": "typescript-tslint-plugin"}
],
"target": "es5"
},
"exclude": [
"node_modules"
]
}
tslint.json:
{
"rules": {
"quotemark": [true, "double"]
}
}
为了面向未来(当 ESLint 最终吸收 TSLint 时),我希望我的构建过程使用 ESLint。
.michael-eslintrc(我将其命名为这样 VS 不会使用此配置来检查 JS 文件):
{
"plugins": [
"@typescript-eslint/tslint"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"extends": [ "eslint:recommended" ],
"project": "tsconfig.json",
"sourceType": "module"
},
"rules": {
"@typescript-eslint/tslint/config": [
"warn",
{
"lintFile": "tslint.json"
}
]
}
}
这设置了我需要的所有依赖项。
package.json:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@typescript-eslint/parser": "1.7.0",
"@typescript-eslint/eslint-plugin-tslint": "1.7.0",
"eslint": "5.16.0",
"tslint": "5.16.0",
"typescript": "3.4.5",
"typescript-tslint-plugin": "0.3.1"
}
}
我已将 Webpack 配置为使用此 ESLint 配置进行 linting。所以 Visual Studio 和 Webpack 最终使用相同的 tslint.json 配置,但它们通过不同的路径达到相同的行为。
此解决方法有几个缺点:
- 我无法将新的 ESLint 原生规则用于 TypeScript linting
- 一旦 VS 最终支持使用 ESLint 的 TS linting,我将不得不更新配置
- 这只会为 TS 设置 lint 规则,而不是 JS - 即使没有 TS 规则,我也很难让 VS 处理 .eslintrc(这对我来说没什么影响,因为我正在转换一个旧的项目到 TS - 如果 JS 被检查,很多文件会失败)
我在 Visual Studio 2017 年创建了一个 Web 应用程序并安装了依赖项。
package.json:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@typescript-eslint/parser": "1.7.0",
"eslint": "5.16.0",
"typescript": "3.4.5"
}
}
我已经使用最新的最佳实践为 TypeScript 设置了 ESLint,即 @typescript-eslint/parser
。
.eslintrc:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"extends": [ "eslint:recommended" ]
},
"rules": {
"quotes": [ "error", "double" ]
}
}
(注意需要双引号的规则。)
我创建了两个文件,test_js.js
和 test_ts.ts
,内容相同:
var x = 'Hello, world';
但只有JS文件显示引号lint错误:
为什么 Visual Studio 没有检查我的 TypeScript 文件?
(交叉发布在 Visual Studio 开发者社区:https://developercommunity.visualstudio.com/content/problem/552855/why-doesnt-visual-studio-2017-use-eslint-on-typesc.html)
更新:
VS现在does things well。请不要做我在下面做的事。升级 VS 并以正确的方式做事。
原答案:
我已经建立了一个临时的解决方法。
Visual Studio 2017 似乎尊重 tsconfig.json 中提供的 TSLint 设置。不幸的是,它还不接受 ESLint 的 TypeScript 规则。所以如果我想在 VS 编辑器中检查 TypeScript,我必须使用旧的 tslint.json 样式配置。
tsconfig.json:
{
"compilerOptions": {
"plugins": [
{"name": "typescript-tslint-plugin"}
],
"target": "es5"
},
"exclude": [
"node_modules"
]
}
tslint.json:
{
"rules": {
"quotemark": [true, "double"]
}
}
为了面向未来(当 ESLint 最终吸收 TSLint 时),我希望我的构建过程使用 ESLint。
.michael-eslintrc(我将其命名为这样 VS 不会使用此配置来检查 JS 文件):
{
"plugins": [
"@typescript-eslint/tslint"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"extends": [ "eslint:recommended" ],
"project": "tsconfig.json",
"sourceType": "module"
},
"rules": {
"@typescript-eslint/tslint/config": [
"warn",
{
"lintFile": "tslint.json"
}
]
}
}
这设置了我需要的所有依赖项。
package.json:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@typescript-eslint/parser": "1.7.0",
"@typescript-eslint/eslint-plugin-tslint": "1.7.0",
"eslint": "5.16.0",
"tslint": "5.16.0",
"typescript": "3.4.5",
"typescript-tslint-plugin": "0.3.1"
}
}
我已将 Webpack 配置为使用此 ESLint 配置进行 linting。所以 Visual Studio 和 Webpack 最终使用相同的 tslint.json 配置,但它们通过不同的路径达到相同的行为。
此解决方法有几个缺点:
- 我无法将新的 ESLint 原生规则用于 TypeScript linting
- 一旦 VS 最终支持使用 ESLint 的 TS linting,我将不得不更新配置
- 这只会为 TS 设置 lint 规则,而不是 JS - 即使没有 TS 规则,我也很难让 VS 处理 .eslintrc(这对我来说没什么影响,因为我正在转换一个旧的项目到 TS - 如果 JS 被检查,很多文件会失败)