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

Question

我将NestJs与Typescript/TSLint一起使用，将VueJs与Javascript/ESLint一起使用。我的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

那么，漂亮一点的人在与TSLint和ESLint抗争吗？我想为Typescript和Javascript项目建立一个标准设置。

我还尝试创建一个新的Vue项目，使用prettier作为一个过梁，在那里一切都很好。看来它只是在与airbnb linter配置抗争。

有什么想法吗？谢谢你的帮助！

Answer 1

根据这篇文章，TSLint在2019年被弃用。您必须对typescript使用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,
};