VSCode插件 npm包

最新推荐文章于 2025-09-13 10:20:26 发布

原创最新推荐文章于 2025-09-13 10:20:26 发布 · 1.5w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #web #npm #visual studio #VSCode

前端轮子专栏收录该内容

14 篇文章

订阅专栏

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

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

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"
    },
}