Is there eslint plugin for creating margins between variables?-CodePudding

I have one more variables which I want to seperate with a line. And I am looking for a plugin for my ESlint. For example:

// my code:
 const {label, size, placeholder, className, value, onChange, disabled, required, readonly, type, ...nextProps} = props;
 const [inputValue, setInputValue] = React.useState<string>('');
 const handleChange = (event:React.FormEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(event);
    }
    setInputValue(event.currentTarget.value);
  };

// desirable code:
 const {label, size, placeholder, className, value, onChange, disabled, required, readonly, type, ...nextProps} = props;

 const [inputValue, setInputValue] = React.useState<string>('');

 const handleChange = (event:React.FormEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(event);
    }
    setInputValue(event.currentTarget.value);
  };

By the way, if there is such seperation like in my desirable result above, ESlint says it is an error. Are there ways to fix it?

CodePudding user response：

You will probably need prettier to do the formatting for you. npm i -d prettier, and then if you are using VS Code you have to install the Prettier extension too. Lastly, just Ctrl Shift P on VS Code and then type Format Document, then choose prettier as your default formatter.

package.json

   "devDependencies": {
        "eslint": "^8.15.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-prettier": "^4.0.0",
        "prettier": "^2.6.2"
     }

For additional convenience, go to File > Preferences > Settings, search Format on Save, and enable it - your code will be auto-formatted everytime you save.