zoukankan      html  css  js  c++  java
  • 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些,

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

    通过配置 ESLint 可在格式化的时候将标签自动变成自闭合形式。

    create-react-app

    如果是使用 create-react-app 创建的项目,直接在 package.json 的 eslint 配置部分加上如下配置即可:

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

    安装依赖

    安装 ESLint 相关依赖:

    $ yarn add eslint eslint-plugin-react

    如果是 TypeScript 项目,还需要安装如下插件:

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

    配置 ESLint

    通过 yarn eslint --init 向导来完成创建,

    或手动创建 .eslintrc.json 填入如下配置:

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

    安装 ESLint for Vscode

    当然了,还需要安装 VSCode 插件 dbaeumer.vscode-eslint

    然后配置 VSCode 在保存时自动进行修正动作:

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

    使用

    完成上述配置后,如果发现保存时,格式并未生效,或者只 JavaScript 文件生效,需要补上如下的 VSCode 配置:

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

    也可查看 VSCode 的状态栏,看是否有报错可确定是什么原因导致 ESLint 工作不正常,比如 mac BigSur 中细化了权限,需要点击警告图标然后点击允许。

    image

    相关资源

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

    CC BY-NC-SA 署名-非商业性使用-相同方式共享
  • 相关阅读:
    bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)
    CentOS 7下MySQL安装配置
    CentOS 7下设置DNS服务器
    MySQL Table is marked as crashed 解决方法
    supervisor使用
    Linux更改服务器Hostname
    在Linux中让打印带颜色的字
    php安装gearman扩展实现异步分步式任务
    GitLab的Gravatar头像服务不可用
    Nginx + tornado + supervisor部署
  • 原文地址:https://www.cnblogs.com/Wayou/p/14715879.html
Copyright © 2011-2022 走看看