为 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 项目的标准设置。

我还尝试使用 prettier 作为 linter 创建一个新的 Vue 项目，并且一切正常。所以它似乎只是在与 airbnb linter 配置作斗争。

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

Answer 1

根据 this post 2019 年弃用的 TSLint。您必须将 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,
};

为 TSLint (NestJs) 和 ESLint (VueJs) 设置 VS Code linting

setting up VS Code linting for for TSLint (NestJs) and ESLint (VueJs)

javascript

eslint

visual-studio-code

vscode-settings