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