---
created: 2025-02-24 09:46
updated: 2025-07-04 07:24
tags:
  - BuildTools
---

```bash
npm uninstall @typescript-eslint/eslint-plugin eslint-plugin-unused-imports eslint-plugin-vue eslint eslint-plugin-tailwindcss eslint-plugin-vue eslint-plugin-no-relative-import-paths eslint-config-prettier prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss typescript-eslint @vue/eslint-config-typescript @eslint/js
```


```bash
npm install -D eslint @typescript-eslint/eslint-plugin eslint-plugin-no-relative-import-paths eslint-plugin-unused-imports eslint-plugin-tailwindcss eslint-plugin-vue globals @eslint/js @eslint/eslintrc @vue/eslint-config-typescript @eslint/js
 
```

```bash
 npx  @eslint/migrate-config .eslintrc.json 
```

```js eslint.config.js
import vue from "eslint-plugin-vue";  
import unusedImports from "eslint-plugin-unused-imports";  
import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';  
import {defineConfigWithVueTs, vueTsConfigs} from '@vue/eslint-config-typescript';  
import tailwind from "eslint-plugin-tailwindcss";  
  
export default defineConfigWithVueTs(  
    vue.configs['flat/recommended'],  
    tailwind.configs["flat/recommended"],  
    vueTsConfigs.recommended,  
    {  
        ignores: ['vendor', 'node_modules', 'public', 'bootstrap/ssr', 'tailwind.config.js', 'resources/js/components/ui/*'],  
    },  
    {  
        rules: {  
            'vue/html-indent': ['error', 4, {  
                attribute: 1,  
                baseIndent: 1,  
                closeBracket: 0,  
                alignAttributesVertically: true,  
                ignores: [],  
            }], 
            'vue/block-lang': 'off',
            'vue/multi-word-component-names': 'off',  
            '@typescript-eslint/no-explicit-any': 'off',  
            "linebreak-style": ["error", "unix"],  
            "tailwindcss/no-custom-classname": "off",  
            "vue/no-mutating-props": "off",  
            "vue/prop-name-casing": "off",  
            "vue/no-setup-props-destructure": "off",  
            "vue/require-default-prop": "off"  
        },  
    },  
    {  
        plugins: {  
            "unused-imports": unusedImports,  
        },  
    },  
    {  
        plugins: {  
            'no-relative-import-paths': noRelativeImportPaths,  
        },  
        rules: {  
            "no-relative-import-paths/no-relative-import-paths": [  
                "warn",  
                {  
                    "allowSameFolder": false,  
                    "rootDir": "resources/js",  
                    "prefix": "@"  
                }  
            ],  
  
        },  
    },  
    {  
        settings: {  
            tailwindcss: {  
                config: './tailwind.config.js',  
                callees: ["classnames", "clsx", "ctl", 'twMerge'],  
            },  
        },  
        rules: {  
            "tailwindcss/no-custom-classname": "off",  
        }  
    },  
);
```

```js .eslintrc.json
{  
    "env": {  
        "browser": true,  
        "es2021": true,  
        "node": true  
    },  
    "extends": [  
        "eslint:recommended",  
        "plugin:vue/vue3-recommended",  
        "plugin:@typescript-eslint/recommended",  
        "plugin:tailwindcss/recommended"  
    ],  
    "overrides": [],  
    "parser": "vue-eslint-parser",  
    "parserOptions": {  
        "parser": "@typescript-eslint/parser",  
        "ecmaVersion": "latest",  
        "sourceType": "module"  
    },  
    "plugins": [  
        "vue",  
        "@typescript-eslint",  
        "unused-imports",  
        "no-relative-import-paths"  
    ],  
    "rules": {  
        "linebreak-style": [  
            "error",  
            "unix"  
        ],  
        "vue/multi-word-component-names": "off",  
        "tailwindcss/no-custom-classname": "off",  
        "vue/html-indent": [  
            "error",  
            4,  
            {  
                "attribute": 1,  
                "baseIndent": 1,  
                "closeBracket": 0,  
                "alignAttributesVertically": true,  
                "ignores": []  
            }  
        ],  
        "vue/require-default-prop": "off",  
        "vue/no-mutating-props": "off",  
        "no-relative-import-paths/no-relative-import-paths": [  
            "warn",  
            {  
                "allowSameFolder": false,  
                "rootDir": "resources/js",  
                "prefix": "@"  
            }  
        ],  
        "vue/prop-name-casing": "off",  
        "vue/no-setup-props-destructure": "off"  
    },  
    "ignorePatterns": [  
        "**/vue-i18n-locales.generated.js",  
        "**/ziggy.js"  
    ]  
}
```