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

Posted 2023-02-22

【中文标题】为 TSLint (NestJs) 和 ESLint (VueJs) 设置 VS Code linting

【英文标题】：setting up VS Code linting for for TSLint (NestJs) and ESLint (VueJs)

【发布时间】：2020-03-23 11:08:48

【问题描述】：

我正在使用带有 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 配置作斗争。

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

【参考方案1】：

根据this postTSLint 已于 2019 年弃用。您必须将 ESLint 用于 typescript。 我分享了我的配置，您可以使用它或编辑它的某些部分。

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 并安装 ESLint vscode 扩展。

我已经安装了 ESLint 但它还能处理 TS 吗？

是的，您可以使用 TSLint，但它很快就会被弃用。我建议不要使用它，因为将来不支持。