Question 72870 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Formating file on save with ESLint – Reactjs

I have a problem, when I save my file with formatting using eslint and prettier, vscode save illegally that rules I describe in my eslint file

module.exports = {
  env: {
    browser: true,
    es2022: true,
    node: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
  ],
  plugins: ['react', '@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    'react/jsx-indent-props': ['error', 2],
    'react/jsx-indent': ['error', 2],
    indent: ['error', 2],
    'max-len': 'off',
    'react/jsx-first-prop-new-line': 'error',
  },
};

my .prettierrs.json file

{
    "printWidth": 100,
    "semi": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2
}

search in documentation of eslint, but can’t find

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    there is problem in my vscode settings was set "Spaces: 4"


  2. 0

    If you are using vs code then you can put the below two commands in your vscode
    user settings(settings.json) file for auto-formatting on save and fixing all the code according to your eslint rules.

    You can open user settings by using (Ctrl + Shift + P) and then type User settings.

    "editor.formatOnSave": true,
"editor.codeActionsOnSave": {
   "source.fixAll": true
 },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search