Add ESLint to a Meteor + Vue + Typescript project

Question

I've been having trouble setting up ESLint with Meteor, Vue, Typescript and prettier. I can get it successfully parsing and formatting Typescript files but it is throwing syntax errors for the .vue files.

ESLint related dependencies

"@babel/plugin-transform-typescript": "^7.12.1",
"@meteorjs/eslint-config-meteor": "^1.0.5",
"@types/meteor": "^1.4.64",
"@types/mocha": "^8.0.3",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-vue-typescript-eslint": "^1.1.7",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",

.eslinrc.js

module.exports = {
    root: true,
    env: {
        node: true,
        webextensions: true
    },
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
        ecmaFeatures: {
            jsx: true // Allows for the parsing of JSX
        }
    },
    settings: {
        vue: {
            version: 'detect' // Tells eslint-plugin-vue to automatically detect the version of Vue to use
        }
    },
    extends: [
        'plugin:vue/recommended',
        'eslint:recommended',
        'vue-typescript-eslint',
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:prettier/recommended' // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
    ],
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
        'no-unused-vars': 'warn'
    }
};

.prettierrc.js

module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
};

SamplePageContent.vue

<template>
  <v-row>
    <h4>Sample page content</h4>
  </v-row>
</template>

<script lang="ts">

import Vue from "vue";

export default Vue.extend( {
  components: {},
  props: {
    giftList: {
      type: Object
    }
  },
});
</script>

<style scoped>
</style>

I get an ESLint: Parsing error: '}' expected. occur on the components section.

How can I get it to parse/format my .vue files correctly?

Update - Setup Info

Here is my question showing the commands used to set up my project initially. https://forums.meteor.com/t/creating-a-meteor-vue-typescript-project-that-uses-class-style-components/55778

meteor create --vue gift-list-app
meteor add typescript
meteor npm install --save-dev @types/meteor
meteor add nathantreid:vue-typescript-babel
meteor npm install --save-dev @babel/plugin-transform-typescript

Add these dev dependencies if they are missing.

"devDependencies": {
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@types/meteor": "^1.4.67",
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-decorators": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0"
}

Here is a Meteor + Vue + Typescript example project I created. If ESLint can be correctly added to this it would be perfect.

https://github.com/Michael2109/meteor-vue-typescript-example

Answer 1

I did follow the tutorial from [1] for these parts:

1. Download the ESLint and Prettier extensions for VSCode.
2. Install the ESLint and Prettier libraries into our project. In your project’s root directory, you will want to run: npm install -D eslint prettier
3. Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier
4. The last step is to make sure Prettier formats on save. Insert "editor.formatOnSave": true into your User Settings in VSCode.

I also installed Eslint as global to my Ubuntu and applied the dev-deps mentioned in the question. I also added Vetur plugin to VSCode and updated the VSCode to newest edition.

At .eslint.js file I have the following:

  parserOptions: {
      ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
      sourceType: 'module', // Allows for the use of imports
      extraFileExtensions: ['.vue'], // ADDED
      ecmaFeatures: {
          jsx: true // Allows for the parsing of JSX
      }
  },

From VSCode Settings.json I had this:

  {
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }

Just before all started to work, I got a question from VS Code, that lint is not active on some file. I activated with "do that for all files" and now lint warnings show just fine.

I tried to tell here every step I made, but cannot say 100% which made the trick.

Disclaimer

I could not verify why the mentioned curly bracket problem is on components part of constructor. I treat it as a bug but cannot say on which side: on code or lint. On other problems prettier makes good stuff and esLint finds many bugs and warnings. That said, I think this is enough to answer the question.

EDIT:

You told you use Eslint in WebStorm. There are some settings [2] where you can activate them after adding the relevant plugins.

• To configure ESLint automatically in the current project, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option.

• To configure ESLint automatically in all new projects, open the Settings for New Projects dialog (File | New Projects Settings | Settings for New Projects), go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option.

To auto fix on save:

• Open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Run eslint --fix on save checkbox.

On my source [2] are also other things but these are the things that "make it work", at least some visible way.

Sources:

[1] How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?

[2] https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_verify_code