沐光

记录在前端之路的点点滴滴

React 代码规范配置

前言

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

推荐阅读:Mac 环境配置 的 “配置 VScode” 部分,通过 Sync 安装我总结的插件可不用关心以下的配置,默认配置好。

插件依赖

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

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

项目配置

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

1
2
3
--
|- .vscode
|- settings.json

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
// 编辑器部分
"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 拷贝过来的,之后根据使用习惯再做修改)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"proseWrap": "never",
"arrowParens": "avoid",
"overrides": [
{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}
]
}