prettier overwrites eslint array-bracket-spacing rule - eslint

Question

ESlint adds spaces inside array brackets, prettier removes them.
I use vscodium with ESLint and Prettier extensions. I run the command in package.json:
{
"lint": "eslint --fix ./index.js && prettier --write ./index.js"
}
.eslint.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["prettier"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"no-console": "off",
"array-bracket-spacing": ["error", "always"] // the rule
}
}
index.js:
const myTestFunction = () => {
const [num1] = [1, 3]; // the error
//const [ num1 ] = [ 1, 3 ]; // expected
return console.log(num1);
};
myTestFunction();

Answer 1

I solved that inside my CRA project by:
Install Create React App with Typescript
npx create-react-app my-app --template typescript
ESLint is already in CRA, no need to
install it.
Initialize it - npm init #eslint/config
Install Prettier
npm install --save-dev --save-exact prettier
Integrate it into eslint (I prefer
standard way) -
https://github.com/prettier/eslint-config-prettier#installation
npm install --save-dev eslint-config-prettier
Configure .eslintrc.json
Install Airbnb ESLint configs. It is
made for JS.
Install
eslint-config-airbnb-typescript
to bind it with typescript.
npm install --save-dev eslint-config-airbnb-typescript
Configure .eslintrc.json
Some rules are not clear for me now, so I look up and escape them.
For example
jsx-a11y/label-has-associated-control
"rules": {
"jsx-a11y/label-has-associated-control": [ "error", {
"required": {
"some": [ "nesting", "id" ]
}
}],
"jsx-a11y/label-has-for": [ "error", {
"required": {
"some": [ "nesting", "id" ]
}
}]
}
Add scripts to package.json
{
"format": "prettier --write src/**/*.{ts,tsx}",
"lint": "eslint --fix src/**/*.{ts,tsx}",
"test": "npm run format && npm run lint"
}
Profit!!! No more packages or settings are required.