ESLint not applying rules specified in .prettierrc.cjs

Question

I have setup eslint to enforce airbnb rules alongside prettier for stylist rules.

.eslintrc.cjs

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: [
        'airbnb-base',
        'airbnb-typescript/base',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:svelte/recommended',
        'plugin:prettier/recommended',
    ],
    plugins: ['@typescript-eslint'],
    ignorePatterns: ['*.cjs'],
    overrides: [
        {
            files: ['**/*.svelte'],
            parser: 'svelte-eslint-parser',
            parserOptions: {
                parser: '@typescript-eslint/parser',
            },
        },
    ],
    parserOptions: {
        project: './tsconfig.eslint.json',
        sourceType: 'module',
        ecmaVersion: 2020,
        extraFileExtensions: ['.svelte'],
    },
    env: {
        browser: true,
        es2017: true,
        node: true,
    },
    rules: {
        'import/no-extraneous-dependencies': 0,
    },
};

.prettierrc.cjs

module.exports = {
    bracketSameLine: true,
    useTabs: true,
    singleQuote: true,
    trailingComma: 'es5',
    printWidth: 100,
    plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
    tailwindConfig: './tailwind.config.cjs',
    pluginSearchDirs: ['.'],
    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
    semi: true,
};

The problem that I am having is the top two rules (bracketSameLine and useTabs) specified in the .prettierrc.cjs file are not being enforced. For example when I run the npm run lint (which is setup as: eslint . --ext .js,.cjs,.ts,.svelte --fix), I expect the following file to be formatted based on the prettierrc config.

Header.svelte

<script>
    import { AppBar } from '@skeletonlabs/skeleton';
</script>

<AppBar
    ><svelte:fragment slot="lead">left</svelte:fragment>(Welcome)<svelte:fragment slot="trail"
        >(actions)</svelte:fragment
    ></AppBar>

Samuel · Answer 1 · 2023-04-11T15:45:28.770

You can try to use prettier for eslint.

You need to specify it in your eslintrc :

 extends: [
    'prettier',
  ],
  plugins: ['prettier'],

And then you can put your prettier rules directly in your eslintrc like that :

 rules: {
    'prettier/prettier': [
      'error',
      {
        bracketSameLine: true,
        useTabs: true,
        singleQuote: true,
        trailingComma: 'es5',
        printWidth: 100,
        plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
        tailwindConfig: './tailwind.config.cjs',
        pluginSearchDirs: ['.'],
        overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
        semi: true,
      },
    ],
}

How to use prettier with eslint

Hope it works for you !

And if you use vs code and you want to format your files on save with eslint and prettier you can add this to your settings.json :

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.codeActionsOnSave.rules": null,
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },

ESLint not applying rules specified in .prettierrc.cjs

1 Answers1