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

Vite + Vue + TypeScript template

Top comments (4)

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-...

Collapse
 
imomaliev profile image
Sardorbek Imomaliev

Hi, thanks. I addressed this in the replies in the another article dev.to/imomaliev/comment/1ihh5

Collapse
 
muralicodes profile image
Murali-codes • Edited

Hi, Thanks for the series of articles.

At this step i faced the below error

require() of ES modules is not supported.
require() of C:\Users\dell\projects\vite\boiler-plate\.eslintrc.js from C:\Users\dell\projects\vite\boiler-plate\node_modules\@eslint\eslintrc\dist\eslintrc.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .eslintrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module"

Could fix it by following the steps from : typescript-eslint.io/docs/linting/

Eventually, just changed the file extension to .cjs.

Collapse
 
imomaliev profile image
Sardorbek Imomaliev

I am not sure how this error did happen. Can you maybe share what differs from my template github.com/imomaliev/vue-ts ?