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",
},
...
}