【发布时间】：2019-04-13 22:05:05
【问题描述】：
我有一个现有的 React/Redux 项目，并且我已经开始在我的项目中使用 typescript。我已经为扩展 airbnb eslint 配置的项目设置了我的 eslint 配置。我的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"
}
};
现在，由于我正在使用 typescript，我希望这个 eslint 配置也可以在我的 typescript 文件（或类似的 tslint）上工作，但我不想创建任何其他 tslint 文件，因为如果我会需要更新，然后我必须在 2 个地方更新。另外，我想在 VSCode 中添加prettier。所以，我的问题是：
- 如何在 typescript 文件上配置/同步 eslint？
- 如何在 vscode 上配置这个 eslint 配置？ （在此之前我使用的是 webstorm，但我想使用 vscode）
- 如何在 VSCode 中使用带有 Typescript 的 eslint 配置 prettier？
【问题讨论】：
标签： typescript visual-studio-code eslint prettier