代码检查
- GitLens：作者和commit信息检查
会自动显示光标所在行的作者和commit信息，多人合作开发必备
- CSS Peek:跳转到class和id的定义
按住ctrl鼠标点击要查询的样式类名/id
- Path Intellisense：路径解析
不只在js中引用模块可以用，在html标签的src/href等属性中也是有效的
- htmltagwrap
在选中的代码块外加上一层标签：alt+w
- Indenticator：展示缩进深度
区别不大
- Bracket Pair ColorZer:颜色括号匹配
- Highlight Matching Tag：标签颜色高亮
代码快速生成
- ES7 React/Redux/GraphQL/React-Native snippets：快速生成react代码块
rfce回车
- Vue VSCode Snippets：快速生成vue代码块
vbase回车
其他自定义Snippet配置在左下角设置-用户代码片段可设置
- Auto Close Tag:自动添加HTML/XML关闭标签
使用场景：自定义的标签
在JSX中，html标签要自己加前尖括号，在修改setting.json文件后可以在JSX中和普通html一样有自动补全
"emmet.includeLanguages": {
"wxml": "html",
"javascript": "javascriptreact"
},
- Auto Rename Tag: 自动重命名配对的标签
- Document This: 快速生成注释
按下‘/**’回车自动生成注释
代码格式化
- prettier
// setting.json
{
...
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // js文件用prettier格式化
},
"prettier.jsxSingleQuote": true, // jsx中用但引号
"prettier.semi": false, // 不要分号
"prettier.singleQuote": true, // 使用单引号
"prettier.printWidth": 120, // 超过120自动换行
"editor.formatOnSave": true // 保存自动格式化
}
使用ctrl+,打开setting.json文件
