aman
aman

Reputation: 391

Set ESLint higher priority than Prettier

I like using my custom rules for linting and prefer to use both ESLint and Prettier (has auto format in VS Code). Some of the rules conflict with each other e.g. @stylistic/js/array-bracket-spacing rule conflicts with Prettier. In code line const t = ['t'];, if I do not complete the array-bracket-spacing rule then VS Code throws error A space is required after '['. eslint(@stylistic/js/array-bracket-spacing) and if I do, then it throws error Delete '·' eslint(prettier/prettier). How to set ESLint rules overrule Prettier rules?

prettier.config.mjs:

/** @type {import("prettier").Options} */
const config = {
    arrowParens: "avoid",
    bracketSameLine: false,
    bracketSpacing: true,
    endOfLine: "auto",
    printWidth: 110,
    proseWrap: "preserve",
    semi: true,
    singleAttributePerLine: false,
    singleQuote: false,
    tabWidth: 2,
    trailingComma: "none",
    useTabs: true
};

export default config;

eslint.config.mjs:

import eslint from "@eslint/js";
import json from "@eslint/json";
import pluginJs from "@stylistic/eslint-plugin-js";
import pluginJsx from "@stylistic/eslint-plugin-jsx";
import pluginTs from "@stylistic/eslint-plugin-ts";
import eslintConfigPrettier from "eslint-config-prettier";
import deprecation from "eslint-plugin-deprecation";
import pluginImport from "eslint-plugin-import";
import jest from "eslint-plugin-jest";
import preferArrow from "eslint-plugin-prefer-arrow";
import eslintPluginPrettier from "eslint-plugin-prettier";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import tseslint from "typescript-eslint";

import pretterConfig from "./prettier.config.mjs";

export default tseslint.config(
    eslintConfigPrettier,
    eslintPluginPrettierRecommended,
    eslint.configs.recommended,
    tseslint.configs.eslintRecommended,
    ...tseslint.configs.recommended,
    { ignores: ["build", "coverage", "dist", "node_modules"] },
    {
        languageOptions: {
            parser: tseslint.parser,
            parserOptions: {
                ecmaFeatures: {
                    jsx: true
                },
                ecmaVersion: 2020,
                project: ["./tsconfig.json"],
                sourceType: "module"
            }
        },
        plugins: {
            prettier: eslintPluginPrettier,
            "@stylistic/js": pluginJs,
            "@stylistic/jsx": pluginJsx,
            "@stylistic/ts": pluginTs,
            "@typescript-eslint": tseslint.plugin,
            deprecation: deprecation,
            import: pluginImport,
            jest: jest,
            json: json,
            "prefer-arrow": preferArrow
        }
    },
    {
        files: ["**/*.js", "**/*.mjs", "**/*.ts", "**/*.tsx"],
        rules: {
            "prettier/prettier": ["error", pretterConfig],

            "@stylistic/js/array-bracket-spacing": [ "error", "always"],
            ...
        }
    },
    ...
);

package.json:

{
    ...
    "devDependencies": {
        "@eslint/js": "8.57.0",
        "@eslint/json": "0.5.0",
        "@stylistic/eslint-plugin-js": "2.8.0",
        "@stylistic/eslint-plugin-jsx": "2.9.0",
        "@stylistic/eslint-plugin-ts": "2.8.0",
        "@typescript-eslint/eslint-plugin": "8.5.0",
        "@typescript-eslint/eslint-plugin-tslint": "7.0.2",
        "@typescript-eslint/parser": "8.5.0",
        "eslint": "8.57.0",
        "eslint-config-prettier": "8.10.0",
        "eslint-plugin-deprecation": "3.0.0",
        "eslint-plugin-import": "2.31.0",
        "eslint-plugin-jest": "28.8.3",
        "eslint-plugin-prefer-arrow": "1.2.3",
        "eslint-plugin-prettier": "5.2.1",
        "prettier": "3.0.0",
        "prettier-eslint": "15.0.1",
        "stylelint": "16.9.0",
        "stylelint-config-standard": "36.0.1",
        "stylelint-scss": "6.7.0",
        "typescript": "4.9.5",
        "typescript-eslint": "8.5.0",
    },
    ...
}

Upvotes: -1

Views: 52

Answers (0)

Related Questions