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: [
      extends: [
  4. Create eslint ignore file touch .eslintignore

  5. Edit .eslintignore to look like this.

    # don't ever lint node_modules
    # don't lint build output (make sure it's set to your correct build folder name)
    # don't lint nyc coverage output
  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
      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,
    +  //
    +  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 for error 'module' is not defined no-undef


GitHub logo imomaliev / vue-ts

Vite + Vue + TypeScript template

Top comments (4)

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.

imomaliev profile image
Sardorbek Imomaliev

Hi, thanks. I addressed this in the replies in the another article

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 :

Eventually, just changed the file extension to .cjs.

imomaliev profile image
Sardorbek Imomaliev

I am not sure how this error did happen. Can you maybe share what differs from my template ?

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git