DEV Community

Cover image for Creating vite vue ts template: Install eslint
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on

Creating vite vue ts template: Install eslint

Install eslint and setup default config files

  1. Install eslint with typescript.

    $ npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
    
  2. Create eslint config file touch .eslintrc.js

  3. Edit .eslintrc.js to look like this.

    module.exports = {
      root: true,
      parser: '@typescript-eslint/parser',
      plugins: [
        '@typescript-eslint',
      ],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
      ],
    }
    
  4. Create eslint ignore file touch .eslintignore

  5. Edit .eslintignore to look like this.

    # don't ever lint node_modules
    node_modules
    # don't lint build output (make sure it's set to your correct build folder name)
    dist
    # don't lint nyc coverage output
    coverage
    
  6. Add "lint": "eslint . --ext .js,.jsx,.ts,.tsx" to "scripts" section in package.json

    {
      ...,
      "scripts": {
        ...,
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
      },
      ...
    }
    
  7. Run npm run lint

    $ npm run lint
    
    > vite-vue-typescript-starter@0.0.0 lint
    > eslint . --ext .js,.jsx,.ts,.tsx
    
    /path/to/project/vue-ts/.eslintrc.js
      1:1  error  'module' is not defined  no-undef
    
    ✖ 1 problem (1 error, 0 warnings)
    
  8. First, let's commit what we already've done git add .

  9. git commit -m 'install eslint with typescript

Fix error 'module' is not defined no-undef

  1. From docs

    For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments.

  2. Fix previous error by editing .eslintrc.js to look like this.

     module.exports = {
       root: true,
    +  // https://eslint.org/docs/rules/no-undef#nodejs
    +  env: {
    +    node: true,
    +  },
    
  3. Run npm run lint

  4. git add -u

  5. git commit -m "fix: error 'module' is not defined no-undef"

Links

Links for error 'module' is not defined no-undef

Project

GitHub logo imomaliev / vue-ts

Template vite vue typescript

Discussion (1)

Collapse
goudekettingrm profile image
Robin Goudeketting

Note that using the lates version of Vite (that uses SFC Script Setup), you will probably run into errors like defineProps is undefined.

eslint.vuejs.org/user-guide/#does-...