Install eslint and setup default config files
-
Install eslint with typescript.
$ npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
Create eslint config file
touch .eslintrc.js
-
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', ], }
Create eslint ignore file
touch .eslintignore
-
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
-
Add
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
to"scripts"
section inpackage.json
{ ..., "scripts": { ..., "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, ... }
-
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)
First, let's commit what we already've done
git add .
git commit -m 'install eslint with typescript
Fix error 'module' is not defined no-undef
-
From docs
For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments.
-
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, + },
Run
npm run lint
git add -u
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
Top comments (4)
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-...
Hi, thanks. I addressed this in the replies in the another article dev.to/imomaliev/comment/1ihh5
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.
I am not sure how this error did happen. Can you maybe share what differs from my template github.com/imomaliev/vue-ts ?