Creating vite vue ts template: Eslint and vue

Configure eslint for vue

1. From docs https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser

   If you want to use custom parsers such as babel-eslint or @typescript-eslint/parser, you have to use the parserOptions.parser option instead of the parser option. Because this plugin requires vue-eslint-parser to parse .vue files, this plugin doesn't work if you overwrite the parser option.

2. npm install --save-dev eslint-plugin-vue vue-eslint-parser

3. Update .eslintrc.js
   

   -  parser: '@typescript-eslint/parser',
   +  parser: "vue-eslint-parser",
   +  // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
   +  parserOptions: {
   +    parser: "@typescript-eslint/parser",
   +  },
      plugins: ['@typescript-eslint'],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
   +    'plugin:vue/vue3-recommended',
        'prettier',
      ],
    }
   

4. Update package.json
   

   -    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   +    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   

5. Run npm run lint

6. Run npm run format

7. git add -u

8. git commit -m 'install eslint-plugin-vue and vue-eslint-parser'

Links

• https://eslint.vuejs.org/user-guide/
• https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
• https://github.com/vuejs/vue-eslint-parser
• https://github.com/vuejs/vue-eslint-parser#parseroptionsparser

Project

imomaliev / vue-ts

Vite + Vue + TypeScript template

Comments

[Zhongkang Shen]

After run npm run lint, It throw me an error: 4:1 error 'defineProps' is not defined no-undef, what's wrong with my eslint? I have the some config like you.

[Sardorbek Imomaliev]

It looks to me like your component file did not import defineProps. Do you have a github link to this project?

[Sardorbek Imomaliev]

@shenzhongkang Hi, again. Here is proper solution for your problem dev.to/imomaliev/comment/1ihh5