VSCode插件 npm包_vscode 查看npm包大小-优快云博客

本文链接：https://blog.youkuaiyun.com/Silencer_1/article/details/106525163

本文介绍了VSCode的一些必备插件，如Vetur、GitLens、Prettier等，用于提高开发效率。同时推荐了npm常用包，包括webpack、@vue/cli等，以及开发中常用的lodash和nodemon等工具。此外，还提及了VSCode的个性化配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有补充的请在评论区留言谢谢

VSCode插件

minapp(微信小程序)
Chinese(汉化包)
gitlens(Git的各种功能)
Beautify(格式化)
javascript console utils(快速console.log)
vetur(Vue各种功能)
Image preview(图片预览)
Code Spell Checker(英文单词拼写检查)
Rainbow Brackets(拯救面条地狱)
Visual Studio Intellicode(在编码时提供建议)
Path Intellisense(路径)
Bracket Pair Colorizer(用不同的颜色标识区分括号)
Import Cost(查看导入文件的大小)
Prettier(格式化代码)
Color Highlight(显示颜色值)
Bracket Pair Colorizer 2(用颜色标识匹配的括号)
Color Highlight(高亮对应的颜色)
CSS Peek(匹配的css文件)
Highlight Matching Tag(高亮匹配标签)
Version Lens(显示包版本)

npm包

nrm(测试当前的镜像哪个快)
gulp(自动化构建)
bower(包管理)
nvm(很好用,node版本管理,切换)
js-cookie(顾名思义)

npm常用包

webpack
@vue/cli
nrm
webpack-cli

开发常用的包

lodash
qs
cross-env 跨平台设置环境变量
Day/Moment 日期格式化
Husky (git hooks)
mock/faker (假数据生成)
nodemon node热更新
live-server html热更新

个人的vscode配置

{
    "workbench.iconTheme": "vscode-icons",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "workbench.startupEditor": "newUntitledFile",
    "diffEditor.ignoreTrimWhitespace": false,
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "explorer.confirmDelete": false,
    "prettier.singleQuote": true,
    "prettier.proseWrap": "preserve",
    "prettier.printWidth": 200,
    "eslint.autoFixOnSave": true,
    "vetur.format.options.tabSize": 4, // tab 缩进的空格数
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 120, // 换行长度
            "wrap_attributes": "aligned-multiple",
            "end_with_newline": true // 文件结尾添加新行
        },
        "prettyhtml": {
            "printWidth": 120,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        },
        "prettier": {
            "semi": false, // 格式化是否添加分号
            "singleQuote": true, // 格式化以单引号为主
            // "trailingComma": "none", // 末尾不加逗号
        }
    },
    "editor.wordWrapColumn": 120,
    "editor.wordWrap": "wordWrapColumn",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
}