prettier overwrites eslint array-bracket-spacing rule

user_10298980 0
Viewed 722

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();
prettier eslint
1 Answers

I solved that inside my CRA project by:

  1. Install Create React App with Typescript

    npx create-react-app my-app --template typescript

  2. ESLint is already in CRA, no need to install it.

    Initialize it - npm init @eslint/config

  3. Install Prettier

    npm install --save-dev --save-exact prettier

  4. 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

    "rules": {
   "jsx-a11y/label-has-associated-control": [ "error", {
     "required": {
       "some": [ "nesting", "id"  ]
     }
   }],
   "jsx-a11y/label-has-for": [ "error", {
     "required": {
       "some": [ "nesting", "id"  ]
     }
   }]
 }

  5. Add scripts to package.json

{
  "format": "prettier --write src/**/*.{ts,tsx}",
  "lint": "eslint --fix src/**/*.{ts,tsx}",
  "test": "npm run format && npm run lint"
}
  1. Profit!!! No more packages or settings are required.
user_102989800
Related