一、常用快捷键
- shift + ctrl + k 删除当前行
- alt + up/down 向上/向下 移动选中行
- alt +shift + up/down 向上/向下 复制选中行
- ctrl + / 单行注释
- alt + shift + a 多行注释
- ctrl + f 当前文件搜索
- ctrl + shift + f 全局搜索
- Shift + Alt + F 格式化代码
- ctrl + shift +p 打开命令行面板
- ctrl + ` 打卡集成终端
- ctrl + shift + ` 创建一个新的集成终端
- F5 启动调试
- F11 /shift + F11 单步进入 / 单步跳出
- F10 单步执行
二、基础辅助插件
- 逆天的基于机器学习的智能代码提示【必备】 TabNine
- 让vscode资源管理器目录类型图标装饰【必备】 Vscode-icons
- markdown编辑器插件 Markdown Preview Enhanced
三、React-TypeScript 代码辅助插件
- 这个插件很牛,自动完成的代码符合本文第三部分的编码规范。在新的tsx或jsx文件中输入:rc或rs或rp或pt,
上下箭头选择合适的代码模板,按TAB看效果 Airbnb react snippets - 在新的tsx文件中输入,tsrc或tsrcc,按TAB看效果 Typescript React code snippets
- 自动导入组件 Auto Import - ES6, TS, JSX, TSX
- 在VS资源管理器窗口快速创建组件的右键菜单,不支持ts React Typescript Toolbox
- 代码重构插件 选择部分jsx代码,点击小灯泡,选择合适的重构操作 VSCode React Refactor
6.在设置中添加 html辅助编写设置。 h1 -> 自动就生成 <h1></h1>
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
react开发工具浏览器插件
安装后的效果
后边还有什么工具会继续补充