为 TSLint (NestJs) 和 ESLint (VueJs)

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

根据这篇文章TSLint 已于 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,

};