vscode写Vue的最佳配置、插件

因系统重装,VSCode的配置和插件丢失,博主记录了相关内容。插件包括Beautify、Eslint等,可实现代码美化、规范检查等功能;还提及了配置方面的内容,以方便后续使用。

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

因为一些特殊原因,导致系统重装,所以vscode的一些配置、插件也就随之丢失了。故,记录一下。

插件

  1. Beautify
     美化 javascript, JSON, CSS, Sass, 以及 HTML 。一般需要配合.jsbeautifyrc使用

  2. Eslint
     检查代码是否符合规范

  3. GitLens
     Git提示

  4. language-stylus
     stylus语法支持

  5. Markdown All in One
     Markdown语法快捷键

  6. Material Icon Theme
     多样化的文件图标

  7. One Dark Pro
     一款深黑色的主题

  8. Path Intellisense
     相对、绝对路径提示

  9. Prettier formatter
     代码格式化

  10. Python
     Python支持

  11. React Native Snippet
     React Native 语法片段扩展

  12. Setting Sync
     同步本地vscode编辑器的设置到github

  13. Vetur
     Vue语法支持。包括语法高亮、语法代码提示、语法lint检测等

  14. Vue VSCode Snippets
     Vue 语法片段扩展

  15. npm Intellisense
     import、require npm模块是自动补全

配置

{
    // 异步保存编辑器配置相关
    "sync.gist": "30exxxxxxxxxxxxxxxxxxxxxxxxxxxxxd91",    // GitHub不会保存此ID,需要本地保存,以防丢失
    "sync.quietSync": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.forceDownload": false,
    // git显示推送提示
    "git.showPushSuccessNotification": true,
    // git路径
    "git.path": "E:/Program Files/Git/bin/git.exe",
    // git自动拉取
    "git.autofetch": true,
    // 编辑器默认缩进
    "editor.tabSize": 2,
    // 编辑器图标主题
    "workbench.iconTheme": "material-icon-theme",
    // 编辑器颜色主题
    "workbench.colorTheme": "One Dark Pro Vivid",
    // 配置文件关联,以便启用对应的智能提示,比如wxss使用css
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        // xml类型文件默认都是单引号,开启对非单引号的emmet识别
        "xml": {
            "attr_quotes": "single"
        }
    },
    // 在react的jsx中添加对emmet的支持
    "emmet.includeLanguages": {
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    // 默认开启eslint
    "eslint.enable": true,
    // 文件保存时,是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": true,
    // eslint vue支持,并且支持自动格式化
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // prettier进行格式化时是否安装eslint配置去执行,建议false
    "prettier.eslintIntegration": true,
    // 如果为true,将使用单引号而不是双引号
    "prettier.singleQuote": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}
### 如何在 VSCode 中安装和配置 Vue 开发所需的最佳插件 #### 插件列表及其功能说明 以下是推荐的用于 Vue 开发的 VSCode 插件以及其主要作用: 1. **Auto Rename Tag** - 自动重命名 HTML 或 XML 的结束标签,提高编码效率[^2]。 2. **Live Server** - 提供了一个简单的 HTTP 服务器,并能够实时刷新浏览器页面,便于开发者快速查看修改效果。 3. **Vetur** - 支持 Vue 文件语法高亮、智能感知、Emmet 和格式化等功能,极大地提升了开发体验。 4. **vscode-icons** - 增强了 VSCode 的文件图标显示样式,使项目结构更加清晰易读。 5. **Debugger for Chrome** - 将 VSCode 的断点映射到 Chrome 浏览器中,从而实现更高效的前端调试过程。尽管部分用户可能觉得该工具配置复杂,但它仍然是一个强大的选项[^3]。 6. **Chinese (Simplified) Language Pack for Visual Studio Code** - 如果需要中文界面支持,则可以安装此扩展包来切换至简体中文环境[^4]。 7. **ESLint** - 集成静态代码分析工具 ESLint 到编辑器里,帮助遵循一致性的代码风格指南并发现潜在错误。 8. **Prettier - Code formatter** - 统一管理 JavaScript, TypeScript 及其他多种编程语言下的代码格式化标准,减少团队协作时因个人习惯差异带来的冲突。 9. **Path Intellisense** - 当输入路径字符串的时候提供自动补全建议,加快相对 URL 地址书速度。 #### 安装方法 要安装上述提到的一个或多個擴展程序,在 VSCode 内部操作如下: - 打开命令面板 (`Ctrl+Shift+P` 或 `Cmd+Shift+P`) 并执行 “Extensions: Install Extension”; - 输入目标插件名称进行搜索后点击右侧绿色按钮完成下载与激活流程;或者通过访问官方市场网站手动获取链接地址再返回应用内部粘贴执行相同动作即可达成目的。 #### 配置步骤概览 对于某些特定用途的附加组件而言还需要额外设置参数才能充分发挥它们各自的优势所在比如 Vetur 要求我们调整 user settings.json 来启用一些高级特性像这样: ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier" } ``` 另外如果打算利用 Debugger For Chrome 实现远程同步调试的话则务必参照文档指引正确填 launch.json 文件内容形如下面所示例子那样定义好必要的字段项以便顺利连接目标实例端口监听服务等等细节事项都需要仔细斟酌考量一番才行哦! ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值