当前位置:网站首页>Configure eslint to automatically format self closing tag

Configure eslint to automatically format self closing tag

2021-04-28 21:38:58 Liu wayong

For those without or without child elements HTML label , It is usually written in its self closed form to be more concise ,

- <SomeComponent></SomeComponent>
+ <SomeComponent/>

By configuring ESLint The label can be automatically changed into self closing form when formatting .

create-react-app

If using create-react-app Project created , Directly in package.json Of eslint Add the following configuration to the configuration section :

  "eslintConfig": {
    "extends": "react-app",
+   "rules": {
+     "react/self-closing-comp": [
+       "error"
+     ]
    }

Installation dependency

install ESLint Related dependencies :

$ yarn add eslint eslint-plugin-react

If it is TypeScript project , You also need to install the following plug-ins :

$ yarn add @typescript-eslint/eslint-plugin  @typescript-eslint/parser

To configure ESLint

adopt yarn eslint --init Wizard to complete the creation ,

Or create... Manually .eslintrc.json Fill in the following configuration :

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/self-closing-comp": ["error"]
  }
}

install ESLint for Vscode

Yes, of course , It also needs to be installed VSCode plug-in unit dbaeumer.vscode-eslint.

Then configure VSCode Automatic correction action when saving :

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Use

After completing the above configuration , If you find that when you save , The format is not in effect , Or just JavaScript Entry into force of documents , We need to add the following VSCode To configure :

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ]

You can also view VSCode The status bar , See if there is an error to determine what causes ESLint It's not working properly , such as mac BigSur Permissions are refined in , You need to click the warning icon and then click allow .

image

Related resources

The text was updated successfully, but these errors were encountered:

版权声明
本文为[Liu wayong]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/04/20210428213606275m.html

随机推荐