I'm using NestJs with Typescript / TSLint and VueJs with Javascript / ESLint. My VSCode extensions are ESLint, TSLint, Prettier and Vetur. When developing the backend everything is fine, the code gets formatted well. When developing with Vue, I use the airbnb linter config and I'm having problems with it.

Let's say I have this vue instance

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

and I save the file, the formatter updates the code to

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

I can't run the code because the linter throws errors based on the airbnb linter config. Although it shouldn't fix the code because I've already used the airbnb style guide.

I use settings sync so I could share my whole VSCode settings for reproduction. These are my settings

{
    "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"
}

You can see the whole gist here

So is Prettier struggling with TSLint and ESLint? I would like to have a standard setup for Typescript and Javascript projects.

I also tried to create a new Vue project using prettier as a linter and there everything worked fine. So it seems it's just struggling with the airbnb linter config.

Any ideas? Thanks for help!

I'm using NestJs with Typescript / TSLint and VueJs with Javascript / ESLint. My VSCode extensions are ESLint, TSLint, Prettier and Vetur. When developing the backend everything is fine, the code gets formatted well. When developing with Vue, I use the airbnb linter config and I'm having problems with it.

Let's say I have this vue instance

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

and I save the file, the formatter updates the code to

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

I can't run the code because the linter throws errors based on the airbnb linter config. Although it shouldn't fix the code because I've already used the airbnb style guide.

I use settings sync so I could share my whole VSCode settings for reproduction. These are my settings

{
    "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"
}

You can see the whole gist here

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

So is Prettier struggling with TSLint and ESLint? I would like to have a standard setup for Typescript and Javascript projects.

I also tried to create a new Vue project using prettier as a linter and there everything worked fine. So it seems it's just struggling with the airbnb linter config.

Any ideas? Thanks for help!

• javascript
• eslint
• visual-studio-code

1 Answer 1

According to this post TSLint Deprecated in 2019. You must use ESLint for typescript. I share my config and you can use that or edit some part of it.

tsconfig.json:

{
  "pilerOptions": {
      // 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:remended",
        "plugin:@typescript-eslint/eslint-remended",
        "plugin:@typescript-eslint/remended",
        "plugin:react/remended",
        "plugin:prettier/remended",
        "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,
};