vscode的插件

1.打印

Turbo Console Log

用法：先选择需要打印的内容==>ctrl+alt+L==>打印出了需要打印的内容
console.log("throttle -> fn", fn)

javascript console utils

用法：先选择需要打印的内容==>ctrl+shift+L==>打印出了需要打印的内容
在当前页面ctrl+shift+d 删除所有的打印

2.Auto Rename Tag

自动重命名标签

<div></div>  
修改前面的标签 后面的自动变化div==>a 
 <a></a>

3.Prettier - Code formatter

     代码自动对齐
    "editor.formatOnSave": true,

4.document this

两次ctrl + alt + D 或者/** 会有提示使用document

/**
 *
 *
 * @param {*} fn
 * @param {*} gapTime
 * @return {*} 
 */
function throttle(fn, gapTime) {   
}
  /**
     * @description
     * @param {*} aa
     */
function dd(aa){

}
   /** @type {*} */
  
var evtFuncs = {
        buttonClick: function(evt) {
			if (evt.data.type == "ok") {
				that.hide("ok");
			}
},

5.Chinese (Simplified) Language Pack for Visual Studio Code

转中文版--中文语言包

7.vscode-fileheader

ctrl+alt+i 出现注释文件在文件最上面

在 .vscode  加  settings.json
{
    "fileheader.Author": "wangjigen",
    "fileheader.LastModifiedBy": "wangjigen"
}    
使用 ctrl+alt+i

8. jsdoc

/**
* 描述
* @author wangjigen
* @date 2022-04-02
* @param {object} e
* @returns {any}
*/

快捷键

ctrl+p 搜索文件名\
ctrl+2 新建窗口
ctrl+J 切换终端

9.Color Highlight

–在代码中高亮颜色
css的颜色显示出来

10.Highlight Matching Tag

– 高亮显示匹配的标签

11.indent-rainbow

–彩虹缩进提示

12.Path Autocomplete

–路径自动补全

  // 导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    }

13.koroFileHeader

说明-链接

  "fileheader.customMade": {
    "Date": "Do not edit", // 文件创建时间(不变)
    "LastEditors": "wangjigen", // 文件最后编辑者
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    "FilePath": "Do not edit" // 文件在项目中的相对路径 自动更新
  },
头部设置
ctrl+win+i
函数注释ctrl+win+t

14.indent-rainbow

彩虹缩进 便于看行数

15.Bracket Pair Colorizer 2

给匹配的括号() 或者 对象{}… 添加对应的颜色用于区分

16.Code Spell Checker

检查单词拼写是否错误（支持英语）

17.Code Runner

一键执行各种语言代码（常用于测试）

18.Parameter Hints

提示函数的参数类型及消息

19.graph

git历史提交记录

20.draw.io

画流程图

20.ninja

可以在代码中看到打印 不用去浏览器看

settings.json

项目建.vscode 文件夹
建settings.json

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"typescript.enablePromptUseWorkspaceTsdk": true,
	  // 导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,//Path Autocomplete
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {//Path Autocomplete
        "@": "${folder}/src"
    },
     "vetur.validation.interpolation": false,
    "vetur.underline.refValue": false,
    "fileheader.Author": "wangjigen",//vscode-fileheader
    "fileheader.LastModifiedBy": "wangjigen",//vscode-fileheader
    "docthis.includeDescriptionTag": true,//document this
    "editor.formatOnSave": true,//Prettier - Code formatter
      "editor.fontLigatures": false,
    "typescript.tsdk": "node_modules/typescript/lib"
}

查看当前文件的一身

清除所有的console.log()

console\.log\(.*?\)

setting.json

{
  // 导入文件时是否携带文件的拓展名
  "path-autocomplete.extensionOnImport": true, //Path Autocomplete
  // 配置@的路径提示
  "path-autocomplete.pathMappings": {
    //Path Autocomplete
    "@": "${folder}/src"
  },
  "vetur.validation.interpolation": false,
  "vetur.underline.refValue": false,
  "fileheader.Author": "wangjigen", //vscode-fileheader
  "fileheader.LastModifiedBy": "wangjigen", //vscode-fileheader
  "docthis.includeDescriptionTag": true, //document this
  // "breadcrumbs.enabled": true,
  // 编辑之后自动保存
  "editor.formatOnSave": false, //Prettier - Code formatter
  //koroFileHeader
  "fileheader.customMade": {
    "Date": "Do not edit", // 文件创建时间(不变)
    "LastEditors": "wangjigen", // 文件最后编辑者
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    "FilePath": "Do not edit" // 文件在项目中的相对路径 自动更新
  },
  // 不填写对应属性即关闭对应功能
  // #选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // vetur 的自定义设置
   // 显示 markdown 中英文切换时产生的特殊字符 
   "editor.renderControlCharacters": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": false,
      "semi": true
    }
  },
  "files.associations": {
    "*.vue": "html"
},
  // 选中高亮的颜色
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#41706d", //选中高亮
    "editor.background": "#282c35", //背景色
    "editorCursor.foreground": "#bebebe", //编辑器光标颜色
    "editor.lineHighlightBackground": "#41706d", //光标所在行高亮内容的背景颜色
    "editor.lineHighlightBorder": "#00000000", //光标所在行四周边框的背景颜色
    "sideBar.background": "#21252b",
    "sideBar.foreground": "#b3bccc",
    "tab.inactiveBackground": "#21252b"
  },
  "files.autoSave": "onFocusChange",
  "editor.tokenColorCustomizations": {
    "comments": "#35ec10", // 注释
    "keywords": "#c678dd", // 关键字
    "variables": "#d19a66", // 变量名
    "strings": "#98c379", // 字符串
    "functions": "#e06c75", // 函数名
    "numbers": "#d19a66" // 数字
  },
}

Emmet语法介绍

子代: >
兄弟: +
父代: ^
重复 *
成组: ()
ID: #
class: .
属性:[]

例子
(div+p#test>span.test2.test3)5+p[name=“hello”]>div.test4^a4

<div>
    <p></p>
</div>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<p name="hello">
    <div class="test4"></div>
</p>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>

设置代码片段

文件 --> 首选项 --> 代码片段

	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"<div>",
			"",
			"</div>",
			"</template>",
			"",
			"<script lang='ts' setup>",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			"</style>"
		],
		"description": "Log output to console"
	}

code . 打不开 vscode

1.使用快捷键
command+shift+p
2.然后输入
shell command
3.点击确定
代码需要管理员权限才能运行

快捷键

alt+back
返回上次修改的地方