[英]How can I synchronise eslint or setup similar tslint and prettier with typescript?
I've an existing React/Redux project and I've started using typescript in my project.我有一个现有的 React/Redux 项目,并且我已经开始在我的项目中使用 typescript。 I've already setup my eslint configuration for the project which extends the
airbnb
eslint configurations.我已经为扩展
airbnb
eslint 配置的项目设置了我的 eslint 配置。 My eslint is as follows:我的 eslint 如下:
module.exports = {
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:flowtype/recommended"
],
"plugins": [
"react",
"jsx-a11y",
"flowtype"
],
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"__DEV__": true,
"__SERVER__": true,
"__": true,
"define": true,
"describe": true,
"expect": true,
"require": true,
"test": true,
},
"ecmaFeatures": {
"arrowFunctions": true,
"binaryLiterals": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": true,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": true,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"octalLiterals": true,
"regexUFlag": true,
"regexYFlag": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"unicodeCodePointEscapes": true,
"globalReturn": true,
"jsx": true
},
"rules": {
// Strict mode
"strict": [
2,
"never"
],
// Code style
"quotes": [
2,
"single"
],
"arrow-parens": [
2,
"as-needed"
],
// Key Spacing
"key-spacing": 0,
// Best practices
"block-scoped-var": 1,
"dot-notation": 1,
"no-confusing-arrow": 1,
"no-else-return": 1,
"no-eval": 1,
"no-extend-native": 1,
"no-extra-bind": 1,
"no-lone-blocks": 1,
"no-loop-func": 1,
"no-multi-spaces": 0,
"no-param-reassign": [
"error",
{
"props": false
}
],
"vars-on-top": 1,
"max-statements": [
1,
20
],
"no-underscore-dangle": 0,
"no-undef": 1,
"no-unused-vars": 1,
"indent": [
1,
2,
{
"SwitchCase": 1
}
],
//React specific rules
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/forbid-prop-types": 0,
"react/no-unused-prop-types": 1,
//Overwriting airbnb stylings
"array-bracket-spacing": 0,
"comma-dangle": [
2,
"always-multiline"
],
"func-names": 0,
"jsx-quotes": [
2,
"prefer-double"
],
"max-len": [
2,
200,
2,
{
"ignoreUrls": true,
"ignoreComments": false
}
],
"no-console": 0,
"one-var": 0,
"prefer-const": 1,
"react/jsx-no-bind": 1,
"react/require-default-props": 0,
"space-in-parens": 0,
"spaced-comment": 0,
"no-multi-assign": 0,
//Import rules
"import/extensions": [
2,
{
"js": "never"
}
],
"import/no-unresolved": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default-member": 0,
"import/first": 0,
//Keeping below till idea supports these codestyles
"object-curly-spacing": 0
},
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": true
},
"import/resolver": "webpack"
}
};
Now, as I'm using typescript, I want this eslint configuration to work on my typescript files as well (or similar tslint) but I don't want to create any other tslint
file because then if I'll need to update then I'll have to update at 2 places.现在,当我使用打字稿时,我希望这个 eslint 配置也适用于我的打字稿文件(或类似的 tslint),但我不想创建任何其他
tslint
文件,因为如果我需要更新,那么我必须在 2 个地方更新。 Also, I'd want to add prettier
in VSCode.另外,我想在 VSCode 中添加
prettier
的。 So, my questions are:所以,我的问题是:
Answering the three bullets in order...依次回答三颗子弹……
Now that you're on TypeScript it'd be a good idea to switch to TSLint over ESLint.既然你在使用 TypeScript,那么通过 ESLint 切换到 TSLint 是个好主意。 TSLint benefits from access to much richer type information using the TypeScript APIs, so its rules can be more powerful than ESLint's.
TSLint 受益于使用 TypeScript API 访问更丰富的类型信息,因此它的规则可能比 ESLint 的更强大。 For example, it has rules that can stop you from accidentally mishandling Promises, improperly comparing wrong types of variables, or iterating over arrays the wrong way.
例如,它有一些规则可以阻止您不小心误操作 Promise、不正确地比较错误类型的变量或以错误的方式迭代数组。
See http://palantir.github.io/tslint for documentation and http://palantir.github.io/tslint/rules for the list of rules you can enable.见http://palantir.github.io/tslint的文档资料和http://palantir.github.io/tslint/rules对于您可以启用规则列表中。 There are a couple few projects that can fill in the gap for TSLint, as ESLint has some more rules, mainly:
有几个项目可以填补 TSLint 的空白,因为 ESLint 有更多规则,主要是:
VS Code has an extension for ESLint and an extension for TSLint . VS Code 有一个ESLint 扩展和一个TSLint 扩展。 Whichever you end up choosing, you can install that extension and it'll pick up on whichever configuration your project has.
无论您最终选择哪个,您都可以安装该扩展程序,它会根据您的项目具有的任何配置进行选择。
It's also a good idea to add a .vscode/settings.json
file to fine-tune your project's behavior in VS Code.添加
.vscode/settings.json
文件以在 VS Code 中微调项目的行为也是一个好主意。 Specifically for TSLint, at least this setting tends to help:特别是对于 TSLint,至少这个设置有帮助:
{
"tslint.alwaysShowRuleFailuresAsWarnings": true
}
That will tell VS Code to always show TSLint rules with green squigglies instead of red, so you can tell what's a TypeScript complaint (red) verses a TSLint complaint (green) .这将告诉 VS Code 始终显示带有绿色波浪线而不是红色的 TSLint 规则,因此您可以分辨什么是 TypeScript 投诉(红色)与 TSLint 投诉(绿色) 。
Great choice!选的好! Both ESLint and TSLint have default rulesets available that you can extend from to disable all lint rules that might conflict with or otherwise be redundant with Prettier.
ESLint 和 TSLint 都有可用的默认规则集,您可以从中扩展以禁用所有可能与 Prettier 冲突或冗余的 lint 规则。
For ESLint, see this page: https://prettier.io/docs/en/eslint.html .对于 ESLint,请参阅此页面: https ://prettier.io/docs/en/eslint.html。 In summary, you can either use
eslint-plugin-prettier
to have ESLint run Prettier itself, or use the eslint-config-prettier
package to disable ESLint's formatting rules.总之,您可以使用
eslint-plugin-prettier
prettier 让 ESLint 自己运行 Prettier,或者使用eslint-config-prettier
prettier 包来禁用 ESLint 的格式规则。
In your .eslintrc.json
:在你的
.eslintrc.json
:
{
"extends": ["prettier"]
}
For TSLint, only tslint-config-prettier
is available, which you can use to disable TSLint's formatting rules.对于 TSLint,只有
tslint-config-prettier
可用,您可以使用它来禁用 TSLint 的格式规则。 https://www.npmjs.com/package/tslint-config-prettier . https://www.npmjs.com/package/tslint-config-prettier 。
In your tslint.json
, you can extend from the tslint-config-prettier
package:在您的
tslint.json
,您可以从tslint-config-prettier
包进行扩展:
{
"extends": [
"tslint-config-prettier"
]
}
Q1 2020, the need for synchronization might not be so relevant, considering the engineering comment included with VSCode 1.42 : 2020 年第一季度,考虑到VSCode 1.42 中包含的工程评论,同步的需求可能不再那么重要:
TSLint to ESLint migration
TSLint 到 ESLint 的迁移
VS Code is mostly written in TypeScript.
VS Code 主要是用 TypeScript 编写的。 In addition to the compiler, we use linting to enforce certain style and engineering rules.
除了编译器之外,我们还使用 linting 来强制执行某些样式和工程规则。
In the past, we have used TSLint for that task, but roughly a year ago, themaintainers of TSLint announced its deprecation in favor of ESLint .过去,我们曾将 TSLint 用于该任务,但大约一年前,TSLint 的维护者宣布弃用 ESLint 。
This milestone we have migrated to ESLint - that includes our lint-configuration and our custom rules .
我们已经迁移到 ESLint这个里程碑——包括我们的lint-configuration和我们的自定义规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.