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

Does this post include any insights on the issue? stackoverflow.com/questions/58670850/… — mico
– mico, Commented May 10, 2021 at 7:13
Unfortunately not. I've started from scratch and added the dependencies mentioned and set it to lint on save. It's processing the file but not making any changes. — Michael
– Michael, Commented May 10, 2021 at 19:26
I got it to give me errors from eslint and prettier. On save it also auto runs those. What I do not get, is that it gives the error about curly bracket on components. Is the codebase on Github actually running ok? Is it valid code? I searched similar code from Internet but could not find any reference. If I could know whether that part is a bug or not, I could determine whether my solution is meaningful or not, — mico
– mico, Commented May 10, 2021 at 19:34
I've cloned the project and ran it and the project is fine. I've looked at the components and the syntax is all correct. — Michael
– Michael, Commented May 10, 2021 at 21:56

mico · Accepted Answer · 2021-05-11 16:04:15Z

1

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

Download the ESLint and Prettier extensions for VSCode.
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
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
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

edited May 11, 2021 at 16:04

answered May 10, 2021 at 20:04

mico

12.7k13 gold badges63 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Over a year ago

What if I'm not using VSCode? I'm using WebStorm for my project. I've tried following your steps (Ignoring VSCode specific ones). I had to change the .eslint.js to .eslintrc.js for it to be found and installed eslint-plugin-vue. I'm no longer getting any errors but nothing seems to be happening.

mico Over a year ago

See my edits. They show how lint will be run automatically, so that "something happens".

Michael Over a year ago

I'd enabled lint on save before and it wouldn't make any changes on save. What version of ESLint are you using? I'm using 7.26.0 and the .eslint.js is apparently incorrect. E.g. sourceType, extraFileExtensions and exmaFeatures are unresolved. Is it using the right syntax? All examples I can find use .eslintrc.js etc. If you take my example project and use your steps in webstorm it says the eslint configuration cannot be found.

Collectives™ on Stack Overflow

Add ESLint to a Meteor + Vue + Typescript project

1 Answer 1

EDIT:

Sources:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT:

Sources:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related