React 代码规范配置

栏目: IT技术 · 发布时间: 4年前

内容简介:最近开始初步学习 React 的一些知识,毕竟宅家这么久,总得开始学习学习新的内容了。“工欲善其事,必先利其器”,因此今天主要是配置 VSCode 的 React 支持,折腾来折腾去,核心的配置大概就如文中所示了。注:此处为一些必须安装的插件,安装后配置才会生效VSCode 有整体的 setting.json 配置和单项目配置,个人还是推荐单项目配置,毕竟自己的开发器可能开发不仅仅就一种语言的吧,因此还是建立如下文件:

最近开始初步学习 React 的一些知识,毕竟宅家这么久,总得开始学习学习新的内容了。“工欲善其事,必先利其器”,因此今天主要是配置 VSCode 的 React 支持,折腾来折腾去,核心的配置大概就如文中所示了。

插件依赖

  • Prettier (格式化插件)
  • ESlint(格式化插件)
  • ES7 React/Redux/GraphQL/React-Native snippets (快捷指令)

注:此处为一些必须安装的插件,安装后配置才会生效

项目配置

VSCode 有整体的 setting.json 配置和单项目配置,个人还是推荐单项目配置,毕竟自己的开发器可能开发不仅仅就一种语言的吧,因此还是建立如下文件:

--
|- .vscode
      |- settings.json

然后 settings.json 内配置内容为:

{
  // 编辑器部分
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "none",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认启用的代码格式化插件
  "files.insertFinalNewline": true,
  /**
   * 代码配置
   */
  // eslint 部分
  "eslint.run": "onSave",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "typescriptreact",
    "typescript"
  ]
}

样式文件配置

因为项目使用的是 prettier 格式化插件,因此我们需要在根目录创建一个 .prettierrc 的文件,然后粘贴一下内容(从 ant design 拷贝过来的,之后根据使用习惯再做修改)

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "arrowParens": "avoid",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网站入侵与脚本技术快速防杀

网站入侵与脚本技术快速防杀

2011-1 / 56.00元

《反黑风暴·网站入侵与脚本技术快速防杀》由浅入深、图文并茂地再现了网站入侵与脚本技术快速防杀的全过程,内容涵盖:Windows系统编程基础、黑客程序的配置和数据包嗅探、Web脚本攻击与防御、基于Web的DDoS攻击与防御、流行的黑客编程技术、XSS跨站脚本攻击技术与防范、Cookie欺骗与防御技术剖析、数据库入侵与防范技术、SQL注入攻击与防范、网络上传漏洞的攻击与防范、系统后门编程技术、编程攻击......一起来看看 《网站入侵与脚本技术快速防杀》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具