| 常用快捷键 | 功能 | |
|---|---|---|
SHIFT + ALT+ A |
多行注释 | |
ALT + 单击 |
可以同时复制多个字符串 | |
CTRL + SHIFT+ SPACE |
查看参数 | |
| imrs | import React, { useState } from 'react' | |
| imbrc | import { Route, Switch, NavLink, Link } from react-router-dom' | |
rcc |
快速创建类组件 | |
rfc |
快速创建函数式组件 | |
rpc |
快速创建Purecomponent 组件 | |
| enf | export const functionName = (params) => { } | |
ALT +鼠标单击 |
同时在多个地方写 | |
ALT+ SHIFT +拖动 |
多行光标 | |
anfn |
生成箭头函数(params) => { } |
|
nfn |
const functionName = (params) => { } |
|
cp |
const { } = this.props |
|
cs |
const { } = this.state |
|
imrse |
import React, { useState, useEffect } from 'react' |
|
est |
this.state = { } |
|
cdm |
componentDidMount = () => { } |
|
sst |
this.setState({ }) |
|
ssf |
this.setState((state, props) => return { }) |
|
clg |
console.log(object) |
|
clo |
console.log(object, object) |
|
2⃣插件
代码提示
https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md
React Developer Tools 红色有虫子说明是 开发者模式 没有经过打包
console 栏会多出2个标签
1.components 查看组件树
2.Profiler 记录网站的性能 比如渲染用时，哪个组件加载最慢
3.serve
打包好的代码不需要仍到tomcat，直接全局安装serve
npm i serve -g
运行 serve dist（index.html 所在目录）