DEV Community

Yogesh Galav
Yogesh Galav

Posted on

Husky pre-commit for Laravel & Vuejs.

#laravel #vue #husky #phpstan

This configuration will help you maintain ideal code quality in Laravel and Vuejs application. The best part is this configuration will help you better the code quality day by day by each developer so you don't have to do code freeze for months just to improve code quality.

1. First let's start by adding "Duster" package to Laravel 

composer require tightenco/duster --dev
Enter fullscreen mode Exit fullscreen mode

2. Now let's also add PHPstan and Larastan for laravel 

composer require --dev phpstan/phpstan composer require --dev "larastan/larastan:^3.0"
Enter fullscreen mode Exit fullscreen mode

Now add configuration file for phpstan with name of "phpstan.neon"

includes: - vendor/larastan/larastan/extension.neon - vendor/nesbot/carbon/extension.neon parameters: paths: - app/ # Level 10 is the highest level level: 5 # ignoreErrors: # - '#PHPDoc tag @var#' # # excludePaths: # - ./*/*/FileToBeExcluded.php
Enter fullscreen mode Exit fullscreen mode

3. For Frontend eslint is enough so let's add that 

npm install --save-dev husky eslint eslint-plugin-vue
Enter fullscreen mode Exit fullscreen mode

Add the following lines to package.json

"scripts": { "lint": "eslint . --fix --ignore-pattern .gitignore", "prepare": "husky" }, "lint-staged": { "*.{vue,js}": "eslint --fix" }
Enter fullscreen mode Exit fullscreen mode

Now let's add eslint configuration for Vue in latest format
create a file on root with name "eslint.config.js"

import globals from "globals"; import pluginJs from "@eslint/js"; import pluginVue from "eslint-plugin-vue"; export default [ { files: ["**/*.{js,mjs,cjs,vue}"] }, { languageOptions: { globals: globals.browser } }, pluginJs.configs.recommended, ...pluginVue.configs["flat/recommended"], { rules: { 'vue/html-indent': ['error', 2, { attribute: 1, baseIndent: 1, closeBracket: 0, alignAttributesVertically: false, }], "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }], // override/add rules settings here, such as: // 'vue/no-unused-vars': 0, }, } ];
Enter fullscreen mode Exit fullscreen mode

4. Finally let's configure Husky

The husky pre-commit file will only run above linting tools on staged files and will not stop commit if these command fails with errors.
If you want to fail commit if any error occurs then just remove "|| true" part.

npx husky init
Enter fullscreen mode Exit fullscreen mode 
# .husky/pre-commit ./vendor/bin/duster fix --dirty || true npx lint-staged || true # Get list of staged PHP files STAGED_FILES=$(git diff --cached --name-only --diff-filter=AM | grep '\.php$' | tr '\n' ' ') if [ -n "$STAGED_FILES" ]; then # Run PHPStan only on staged PHP files composer phpstan $STAGED_FILES || true else echo "No PHP files to analyze." fi
Enter fullscreen mode Exit fullscreen mode

Top comments (0)