VSCode插件（备忘）

So.九天

已于 2024-01-18 15:13:49 修改

阅读量444

点赞数

文章标签： vscode 前端 javascript

于 2022-12-24 22:30:26 首次发布

本文链接：https://blog.csdn.net/weixin_42127806/article/details/128432122

版权

1.Chinese (Simplified) Language Pack for Visual Studio Code（必备）

VSCode汉化版，安装后重启即可。

2.vue theme(个人喜好)

主题

3.Turbo Console Log

快速输出console.log

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

 "turboConsoleLog.insertEnclosingClass": false,
  "turboConsoleLog.includeFileNameAndLineNum": false,
  "turboConsoleLog.delimiterInsideMessage": "",
  "turboConsoleLog.logMessagePrefix": "🥳",
  "turboConsoleLog.insertEnclosingFunction": false,

4.GitLens — Git supercharged，Git Graph，Git History（git必备）

GitLens 它是一个针对 Git 文件的强大可视化工具，能够在你的代码中提供更好的可视化和信息呈现鼠标放到代码行上，每一行代码的变动都一清二楚~上班必备Git。安装后左边的侧边栏会出现Gitlens
Git History它是Git历史记录，搜索和更多内容（包括git log）。

5.Path Intellisense (必备)

自动提示文件路径，支持各种快速引入文件，Import、Require模块路径自动补全

"path-intellisense.extensionOnImport": true,
"path-intellisense.autoSlashAfterDirectory": true,
"path-intellisense.autoTriggerNextSuggestion": true,
"path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "components": "${workspaceFolder}/src/components",
},

6.Auto Import、Auto Close Tag、Auto Rename Tag（必备）

标签自动化，Auto Import可以根据你引入的组件，自动导入提示；
Auto Rename Tag 当你修改标签的时候，自动完成另一侧标签的同步修改；
Auto Close Tag 自动闭合HTML/XML标签

7.Live Server（必备）

在线部署调试的工具，相当于模拟了一个服务器启动，对于不太懂服务器部署的童鞋来说，初期还是比较方便的

8.Code Spell Checker （必备）

可以检验你的英语命名，并且给你推荐你可能需要的英语命名

9.JavaScript(ES6) code snippets

ES6语法智能提示，以及快速输入

10.Vue VSCode Snippets，Vue Language Features (Volar)

vue2、vue3的语法提示，可自定义语法片段
Vue Language Features (Volar) Vue 3 的语言支持

11. koroFileHeader

用于生成文件头部注释和函数注释的插件
顶部注释模板，可定义作者、时间等信息，
文件头部注释快捷键
window：ctrl+win+i,mac：ctrl+cmd+i, linux: ctrl+meta+i,Ubuntu: ctrl+super+i
函数注释快捷键
window：ctrl+win+t,mac：ctrl+cmd+t,linux: ctrl+meta+t, Ubuntu: ctrl+super+t

12. Prettier， ESLint ，ESLint Chinese Rules（必备格式化）

Prettier 是一个广泛使用的代码格式化工具，支持多种编程语言，可以自定义配置规则
ESLint它是一个语法检查工具，可以检测 JavaScript 代码中的语法错误、提供纠错建议，帮助提高代码质量和可读性。ESLint 支持自定义配置和集成到开发环境中，使用起来非常方便
ESLint配置详解：ESLint配置详解_ecmafeatures_风火一回的博客-CSDN博客

13.Material Icon Theme || vscode-icons

无需配置----文件目录中的图标更加美观，同时也会更加直观，便于你快速识别文件类型。这个插件简单易用，让你在代码整理和查找的时候更加舒适

14. Code Runner

无需配置----它是一个可以在 VSCode 中展示代码执行结果的工具，运行js文件，支持多种编程语言，特别适用于与学习或调试相关的工作。使用 Code Runner 可以省去许多在命令行下运行代码的时间。

15.Better Comments

更好的注释扩展将帮助您在代码中创建更人性化的注释。使用此扩展，您将能够将注释分类为：警报、查询、待办事项、强调、注释掉的代码也可以设置样式，以使代码不应该存在、您可以在设置中指定任何其他注释样式。

如果需要支持vue文件

打开插件的配置文件夹，即 c盘 -> 用户 -> 用户名 -> .vscode文件夹
extensions目录 -> bttter-comments配置文件夹
打开配置文件 aaron-bond.better-comments-3.0.2 -> out -> parser.js
修改配置文件，添加如下代码
case “vue”:
this.setCommentFormat(“//”, “/", "/”)
break; 保存代码，重启vscode即可

**16.Todo Tree **

TODO展示把你的TODO事项以树形结构列出来，再也不担心忘记点啥呢

settings配置

//todo-tree 标签配置  标签兼容大小写字母(很好的功能!!!)
    "todo-tree.regex.regex": "((%|#|//|<!--|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
    "todo-tree.general.tags": [
        "todo", //添加自定义的标签成员,将在下面实现它们的样式
        "bug",
        "tag",
        "done",
        "mark",
        "test",
        "update"
    ],
    "todo-tree.regex.regexCaseSensitive": false,
    "todo-tree.highlights.defaultHighlight": { //如果相应变量没赋值就会使用这里的默认值
        "foreground": "black", //字体颜色
        "background": "transparent", //背景色
        "icon": "check", //标签样式 check 是一个对号的样式
        "rulerColour": "transparent", //边框颜色
        "type": "tag", //填充色类型  可在TODO TREE 细节页面找到允许的值 
        "iconColour": "transparent" //标签颜色
    },
    "todo-tree.highlights.customHighlight": {
        //todo 		需要做的功能
        "todo": {
            "icon": "alert", //标签样式
            "foreground": "#c9c552", //背景色
            "iconColour": "#c9c552" //标签颜色
        },
        //bug		必须要修复的BUG  
        "bug": {
            "foreground": "#eb5c5c",
            "icon": "bug",
            "iconColour": "#eb5c5c" //标签颜色
        },
        //tag		标签
        "tag": {
            "foreground": "#38b2f4",
            "icon": "tag",
            "iconColour": "#38b2f4",
        },
        //done		已完成
        "done": {
            "foreground": "#5eec95",
            "icon": "check",
            "iconColour": "#5eec95",
        },
        //mark     	标记一下
        "mark": {
            "foreground": "#f90",
            "icon": "note",
            "iconColour": "#f90",
        },
        //test		测试代码
        "test": {
            "foreground": "#df7be6",
            "icon": "flame",
            "iconColour": "#df7be6",
        },
        //update  	优化升级点
        "update": {
            "foreground": "#d65d8e",
            "icon": "versions",
            "iconColour": "#d65d8e",
        }
    },