DEV Community

Cover image for Creating vite vue ts template: Setup pre-commit
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on

Creating vite vue ts template: Setup pre-commit

Create pre-commit configuration

  1. pre-commit sample-config > .pre-commit-config.yaml
  2. Add prettier hook to .pre-commit-config.yaml

    +-   repo: https://github.com/pre-commit/mirrors-prettier
    +    rev: ''  # Use the sha / tag you want to point at
    +    hooks:
    +    -   id: prettier
    
  3. Add eslint hook to .pre-commit-config.yaml

    +-   repo: https://github.com/pre-commit/mirrors-eslint
    +    rev: ''  # Use the sha / tag you want to point at
    +    hooks:
    +    -   id: eslint
    +        additional_dependencies:
    +        -   eslint@7.31.0
    +        -   typescript@4.3.5
    +        -   "@typescript-eslint/eslint-plugin@4.28.5"
    +        -   "@typescript-eslint/parser@4.28.5"
    +        -   eslint-plugin-vue@7.14.0
    +        -   vue-eslint-parser@7.9.0
    +        -   eslint-config-prettier@8.3.0
    
  4. Update eslint hook to run for *.js, *.jsx, *.ts, *.tsx and *.vue

    By default only *.js files are taken into consideration. If you want to use eslint on TypeScript codebases you need to start from this template

         hooks:
         -   id: eslint
    +        files: \.([jt]sx?|vue)$  # *.js, *.jsx, *.ts, *.tsx and *.vue
    +        types: [file]
    
  5. git add .pre-commit-config.yaml

  6. pre-commit autoupdate

  7. pre-commit run --all-files

  8. git add -u

  9. git commit -m 'setup pre-commit'

Links

Project

GitHub logo imomaliev / vue-ts

Template vite vue typescript

Discussion (0)