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

• https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/
• https://eslint.org/docs/user-guide/getting-started
• https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md

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

• https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments
• https://eslint.org/docs/rules/no-undef#nodejs
• https://stackoverflow.com/a/62335842/3627387
• https://stackoverflow.com/a/63512242/3627387

Project

imomaliev / vue-ts

Vite + Vue + TypeScript template

Comments

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

[Sardorbek Imomaliev]

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

[Murali-codes]

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.

[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 ?