如何使用打字稿同步eslint或设置类似的tslint和更漂亮？ [英] How can I synchronise eslint or setup similar tslint and prettier with typescript?
问题描述
我有一个现有的React / Redux项目，并且已经开始在项目中使用打字稿。我已经为该项目设置了eslint配置，该配置扩展了 airbnb eslint配置。我的随行附加如下：
I've an existing React/Redux project and I've started using typescript in my project. I've already setup my eslint configuration for the project which extends the airbnb eslint configurations. My eslint is as follows:
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"
}
};
现在，当我使用打字稿时，我希望此eslint配置可以在我的打字稿文件上正常工作很好（或类似的tslint），但我不想创建任何其他 tslint 文件，因为如果要更新，则必须在2个地方进行更新。另外，我想在VSCode中添加更漂亮。因此，我的问题是：
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. Also, I'd want to add prettier in VSCode. So, my questions are:
- 我如何配置/同步打字稿文件上的押尾？
- 如何在vscode上配置此eslint配置？ （我之前使用过webstorm，但我想使用vscode）
- 如何在VSCode中使用Typescript使用eslint配置漂亮的图片？
推荐答案
依次整理三个项目符号...
Answering the three bullets in order...
现在您使用的是TypeScript，最好通过ESLint切换到TSLint。 TSLint受益于使用TypeScript API访问更丰富的类型信息，因此它的规则可能比ESLint的规则更强大。例如，它的规则可以阻止您意外地处理Promises，不正确地比较错误类型的变量或以错误的方式遍历数组。
Now that you're on TypeScript it'd be a good idea to switch to TSLint over ESLint. TSLint benefits from access to much richer type information using the TypeScript APIs, so its rules can be more powerful than ESLint's. 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.
请参见 http://palantir.github.io/tslint 获取文档，并 http://palantir.github.io/tslint/rules 可以启用的规则列表。由于ESLint还有更多规则，因此有几个项目可以填补TSLint的空白，主要是：
See http://palantir.github.io/tslint for documentation and http://palantir.github.io/tslint/rules for the list of rules you can enable. There are a couple few projects that can fill in the gap for TSLint, as ESLint has some more rules, mainly:
- https://www.npmjs.com/package/tslint-eslint-rules 直接弥合差距，大约
- http://npmjs.com/package/ tslint-microsoft-contrib 具有更多特定于库的规则
- https://www.npmjs.com/package/tslint-eslint-rules directly bridges the gap, approximately
- http://npmjs.com/package/tslint-microsoft-contrib has a bunch of more library-specific rules
VS代码具有和 TSLint的扩展。无论您最终选择哪种，都可以安装该扩展程序，并且它将在您的项目具有的任何配置上进行安装。
VS Code has an extension for ESLint and an extension for TSLint. Whichever you end up choosing, you can install that extension and it'll pick up on whichever configuration your project has.
添加<$ c也是一个好主意。 $ c> .vscode / settings.json 文件可以在VS Code中微调项目的行为。专门针对TSLint，至少此设置会有所帮助：
It's also a good idea to add a .vscode/settings.json file to fine-tune your project's behavior in VS Code. Specifically for TSLint, at least this setting tends to help:
{
"tslint.alwaysShowRuleFailuresAsWarnings": true
}
这将告诉VS Code始终用绿色的波浪形而不是红色显示TSLint规则，因此您可以知道什么是TypeScript投诉（红色）与TSLint投诉（绿色）。
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).
很棒的选择！ ESLint和TSLint都有可用的默认规则集，您可以从中扩展这些默认规则集，以禁用可能与Prettier冲突或冗余的所有lint规则。
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，请参阅此页： https://prettier.io/docs/en/eslint.html 。总之，您可以使用 eslint-plugin-prettier 让ESLint本身运行Prettier，也可以使用 eslint-config-prettier 包以禁用ESLint的格式设置规则。
For ESLint, see this page: 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.
在您的 .eslintrc.json ：
{
"extends": ["prettier"]
}
对于TSLint，仅 tslint-config-prettier 可用，可用于禁用TSLint的格式规则。 https://www.npmjs.com/package/tslint-config-prettier 。
For TSLint, only tslint-config-prettier is available, which you can use to disable TSLint's formatting rules. https://www.npmjs.com/package/tslint-config-prettier.
在您的 tslint.json 中，您可以从 tslint-config-较漂亮的软件包：
In your tslint.json, you can extend from the tslint-config-prettier package:
{
"extends": [
"tslint-config-prettier"
]
}
这篇关于如何使用打字稿同步eslint或设置类似的tslint和更漂亮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
