vscode部分插件的使用方法

1、javascript console utils
选中对应的变量,然后ctrl+shift+L,而ctrl+shift+D即可删除本文件中所有的console.log()

vscode android源码中跳转 vscode 跳转代码插件_vue


vscode android源码中跳转 vscode 跳转代码插件_css_02

2、Todo Tree

vscode android源码中跳转 vscode 跳转代码插件_css_03

3、Vue Css Peek和vue-helper
这两个插件时用于css跳转和方法跳转的,按ctrl键同时点击即可完成跳转

vscode android源码中跳转 vscode 跳转代码插件_html_04

vscode android源码中跳转 vscode 跳转代码插件_vscode android源码中跳转_05

3、Css Tree
快速生成样式树,选中代码块,然后ctrl+shift+p

vscode android源码中跳转 vscode 跳转代码插件_vscode android源码中跳转_06


vscode android源码中跳转 vscode 跳转代码插件_vue_07


vscode android源码中跳转 vscode 跳转代码插件_html_08

4、KoroFileHeader

安装过后,在界面左下角点开设置,输入fileheader

vscode android源码中跳转 vscode 跳转代码插件_vscode android源码中跳转_09


然后点击settings中编辑

vscode android源码中跳转 vscode 跳转代码插件_vscode_10


最后在其中加入如下代码

"fileheader.configObj": {
    "createFileTime": true,//设置为true则为文件新建时候作为date,否则注释生成时间为date
    "autoAdd": true,//自动生成注释,老是忘记的同学可以设置
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": true//设置自定义注释可用
    },
  },
  //函数注释
  "fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },
  // 文件头部注释
  "fileheader.customMade": {
    "Description":"" ,//文件内容描述
    "Author":"cxk",//编辑人
    "Date": "Do not edit",//时间
    "LastEditTime": "Do not edit",
    "LastEditors": "cxk",
  }
文件头部注释:快捷键:crtl+alt+i
文件头部注释:快捷键:crtl+alt+t
5、GitLens — Git supercharged
这个是可以看到当前代码上一个提交的作者是谁、提交时间,在多人协作的代码里面非常好用

vscode android源码中跳转 vscode 跳转代码插件_css_11

6、Image preview
当鼠标悬浮到img时,会产生实时预览大图的功能

vscode android源码中跳转 vscode 跳转代码插件_vscode android源码中跳转_12

7、indent-rainbow
这个可以使代码排版更整齐

vscode android源码中跳转 vscode 跳转代码插件_css_13

8、px to rem & rpx & vw (cssrem)
可以快速的使px转换为rem

vscode android源码中跳转 vscode 跳转代码插件_vscode_14

vscode android源码中跳转 vscode 跳转代码插件_html_15

vscode android源码中跳转 vscode 跳转代码插件_vue_16


vscode android源码中跳转 vscode 跳转代码插件_vue_17

9、个人的settings的配置如下
{
  "editor.formatOnSave": true,
  // "eslint.autoFixOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript","vue","html"],
  "window.zoomLevel": 1,
  "editor.fontSize": 16,
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "workbench.settings.useSplitJSON": true,
  "files.autoSaveDelay": 1000,
  "browserSync.config": {
  
  },
  "beautify.language": {

    "js": {
      "type": [
        "javascript",
        "json",
        "jsonc"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautifyrc"
      ]
    },
    "css": [
      "css",
      "less",
      "scss"
    ],
    "html": [
      "htm",
      "html",
      "vue"
    ]
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "dart.debugExternalLibraries": true,
  "thiefBook.filePath": "C:\\Users\\Administrator\\Documents\\山沟皇帝.txt",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "todo-tree.tree.showScanModeButton": false,
  "vetur.ignoreProjectWarning": true,
  "emmet.excludeLanguages": [

    "markdown"
  ],
  "fileheader.configObj": {
    "createFileTime": true,//设置为true则为文件新建时候作为date,否则注释生成时间为date
    "autoAdd": true,//自动生成注释,老是忘记的同学可以设置
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": true//设置自定义注释可用
    },
  },
  "fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },
  "fileheader.customMade": {
    "Description":"" ,//文件内容描述
    "Author":"cxk",//编辑人
    "Date": "Do not edit",//时间
    "LastEditTime": "Do not edit",
    "LastEditors": "cxk",
  }

}