vlambda博客
学习文章列表

代码检查

• GitLens：展示作者和commit信息

自动显示光标所在行的作者和commit信息，多人合作开发必备

• CSS Peek:跳转到class和id的定义

按住ctrl/command鼠标点击要查询的样式类名/id

• Path Intellisense：路径解析

不只在js中引用模块可以用，在html标签的src/href等属性中也是有效的

使用前⬆️

使用后⬆️

• htmltagwrap

在选中的代码块外加上一层标签：alt/option+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/command+,打开setting.json文件，按照上面配置后，保存时会自动格式化