为TSLint（NestJs）和ESLint（VueJs）设置VS Code linting

Question

我正在使用带有Typescript / TSLint的NestJs和带有Javascript / ESLint的VueJs。我的VSCode扩展是ESLint，TSLint，Prettier和Vetur。开发后端时，一切都很好，代码格式正确。在使用Vue开发时，我使用了airbnb linter配置，但遇到了问题。

假设我有这个Vue实例

<script>
export default {
  components: {},
  data() {
    return {
      foo: '',
    };
  },
};
</script>

然后保存文件，格式化程序将代码更新为

<script>
export default {
  components: {},
  data() {
    return {
      foo: ""
    };
  }
};
</script>

我无法运行代码，因为linter根据airbnb linter配置抛出错误。尽管它不应该修复代码，因为我已经使用过airbnb样式指南。

我使用设置同步，因此可以共享整个VSCode设置以进行复制。这些是我的设定

{
    "vetur.validation.template": true,
    "eslint.autoFixOnSave": true,
    // ...
    "javascript.updateImportsOnFileMove.enabled": "always",
    // ...
    "typescript.updateImportsOnFileMove.enabled": "always",
    "prettier.singleQuote": true,
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,
    "editor.formatOnSave": true,
    // ...
    "vetur.format.defaultFormatter.html": "prettier"
}

你可以在这里看到整个要点

https://gist.github.com/matthiashermsen/9620a315960fa7b9e31bf6cda8583e84

那么，Prettier是否正在与TSLint和ESLint进行斗争？我想要一个用于Typescript和Javascript项目的标准设置。

我还尝试使用更漂亮的皮毛来创建一个新的Vue项目，并且一切正常。所以看来，这只是在与airbnb linter配置苦苦挣扎。

有任何想法吗？感谢帮助！

Answer 1

根据这篇文章TSLint Deprecated in 2019. 您必须将 ESLint 用于打字稿。我分享我的配置，你可以使用它或编辑它的一部分。

tsconfig.json：

{
  "compilerOptions": {
      // Target latest version of ECMAScript.
      "target": "esnext",
      // path to output directory
      "outDir": "./dist",
      // enable strict null checks as a best practice
      "strictNullChecks": true,
      // Search under node_modules for non-relative imports.
      "moduleResolution": "node",
      // Process & infer types from .js files.
      "allowJs": true,
      // Don't emit; allow Babel to transform files.
      "noEmit": true,
      // Enable strictest settings like strictNullChecks & noImplicitAny.
      "strict": true,
      // Import non-ES modules as default imports.
      "esModuleInterop": true,
      // use typescript to transpile jsx to js
      "baseUrl": "./src",
      "module": "esnext",
      "removeComments": true,
      "alwaysStrict": true,
      "allowUnreachableCode": false,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": true,
      "noFallthroughCasesInSwitch": true,
      "forceConsistentCasingInFileNames": true,
      "importHelpers": true,
      "typeRoots": [
        "src/@types",
        "node_modules/@types"
      ]
  }
}

.eslintrc.js

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended",
        "prettier/@typescript-eslint",
    ],
    env: {
        "browser": true,
        "es6": true,
        "node": true
    },
    overrides: [
        {
            "files": ["*.tsx"],
            "rules": {
                "react/prop-types": "off"
            }
        },
        {
            "files": ["*.js"],
            "rules": {
                "@typescript-eslint/no-var-requires": "off"
            }
        }
    ]
}

.prettierrc.js

module.exports =  {
  semi:  true,
  trailingComma:  'all',
  singleQuote:  true,
  printWidth:  120,
  tabWidth:  2,
};