最新VisualStudioCode最全实用插件_vscode常用前端插件_vscode插件配置

vscode插件大全,最完美配置vscode教程

工欲善其事必先利其器,开发前先把提升效率的利器搭好会让今后慢慢的编程长路舒服很多,vscode如果把插件配置好,比jb家的差不了多少,在这里推荐一些自用插件,再使用作者的插件配置会让你的使用感觉强过其他任何编辑器!

代码美化

  • Beautify: 一个用于美化代码的插件,支持多种语言格式化。
  • Prettier - Code formatter: 一款代码格式化工具,支持大多数语言,并提供多种格式化配置选项。

代码提示

  • python snippets: 为Python语言提供代码片段。
  • Reactjs code snippets: 为 ReactJS 提供常用代码片段。
  • Vue 3 Snippets: 为 Vue 3 提供常用代码片段。
  • Vue VSCode Snippets: 为 Vue 2 提供常用代码片段。
  • wechat-snippet: 为微信小程序提供代码片段。
  • GitHub Copilot Nightly: 由 GitHub 开发的 AI 代码助手,提供代码自动生成功能。

在这里插入图片描述

代码检查

  • ESLint: JavaScript 代码检查工具。

  • Pylance: Microsoft 出品的 Python 语言服务器,支持代码补全、类型检查等。

  • Error Lens: 在代码中直接显示错误和警告信息。

在这里插入图片描述

  • koroFileHeader: 为代码文件添加头部注释。

在这里插入图片描述

  • Search node_modules: 快速查找项目中的 node_modules 目录。

在这里插入图片描述

文件操作

  • Auto Rename Tag: 自动重命名 HTML/XML 标签的插件。

在这里插入图片描述

  • file-jump: 快速跳转到工作区内的文件。

在这里插入图片描述

  • SFTP: 支持 SFTP 和 FTPS 协议的文件传输工具。

    {
        "host": "",    //ip 
        "port": 22,    //端口
        "username": "", //服务器账号
        "password": "",//服务器密码
        "protocol": "sftp", 
        "agent": null,  
        "privateKeyPath": null,
        "passphrase": null,
        "passive": false,
        "interactiveAuth": false,
        "remotePath": "/www/wwwroot/vuepress/dist", //需要同步的服务器文档位置 
        "context": "c:/Users/zzy19/Desktop/md/press/dist",        //本地位置
        
        "uploadOnSave": true,  
        "syncMode": "update",
        "watcher": {           
            "files": false,    
            "autoUpload": false,
            "autoDelete": false
        },
        "ignore": [           
            "**/.vscode/**",
            "**/.git/**",
            "**/.DS_Store"
        ]
    }
    

    SFTP使用

    首先使用快捷键ctrl +shift+p 调出配置 选择Sftp会自动生成配置文件,自己填写好账号密码以及其他配置信息就可以

请添加图片描述

请添加图片描述

前端开发

  • CSS Navigation: 快速浏览 CSS 样式。

    请添加图片描述

  • Live Sass Compiler: 实时编译 Sass/SCSS 文件。

    请添加图片描述

  • Live Server: 实时预览 Web 页面。

请添加图片描述
请添加图片描述

  • Markdown All in One: 提供 Markdown 编辑支持,包括预览、自动补全等功能。

  • Markdown Preview Github Styling: 为 Markdown 预览提供 Github 风格。

  • Markdown Preview Mermaid Support: 为 Markdown 预览提供 Mermaid 图表支持。

  • Vetur: 为 Vue 2/3 提供编辑支持。

  • vue-helper: 为 Vue 2 提供代码提示和自动补全。

  • WXML - Language Service: 为小程序 WXML 提供代码提示和自动补全。

代码截图

  • CodeSnap: 通过代码生成漂亮的图片和 SVG。

请添加图片描述

其他

  • Image preview: 支持预览多种图片格式。
    在这里插入图片描述

  • Jupyter: vscode的python扩展。

  • Jupyter Keymap: vscode的python扩展,为 Jupyter Notebook 提供快捷键支持。

  • Path Intellisense: 路径智能提示。

请添加图片描述

  • Python: 支持 Python 语言的开发环境。

  • Prettier - Code formatter: 一款代码格式化工具,支持大多数语言,并提供多种格式化配置选项。

微信小程序开发

  • wechat-snippet: 提供微信小程序的代码片段。
  • WXML - Language Service: 为小程序 WXML 提供代码提示和自动补全。

插件配置

关注WX公众「网络弧线」发送vscode获取

前端开发中,VSCode有很多实用插件可以提高开发效率。其中一些插件包括: 1. Chinese (Simplified) Language Pack for Visual Studio Code :该插件VSCode提供了简体中文界面,方便中国开发者使用。 2. Delete All Console.log :这个插件可以帮助你快速删除代码中的所有console.log语句,减少调试时的冗余输出。 3. Highlight Matching Tag :该插件可以突出显示匹配的开始和/或结束标签,适用于HTML和JSX等官方支持的标记。此外,其他样式如XML、Vue、Angular、PHP也可以使用该插件,但并不能保证完全兼容。 4. Markdown Preview Enhanced:这是一个用于预览Markdown文档的插件,可以在状态栏中显示标记的路径,方便查看和编辑Markdown文件。 除了以上插件,还有很多其他的VSCode插件可以用于前端开发,如Prettier用于自动格式化代码、ESLint用于静态代码检查、Live Server用于实时预览网页等等。根据你的需求和个人喜好,你可以在VSCode插件市场中找到更多有用的插件来提升前端开发的效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [最新最全 VSCODE 插件推荐(2023版)](https://blog.csdn.net/u011262253/article/details/113879997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值