vscode基本插件安装与配置

这篇具有很好参考价值的文章主要介绍了vscode基本插件安装与配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

插件安装:

vscode基本插件安装与配置

Auto Rename Tag: 重命名标签时,自动更新结尾配对的标签

Chinese: 汉化

ESLint: 规范化代码,对应的setting配置(全局所有项目都有效),对应这个本身也不是很了解,也是上网搜的,有个详细的教程可以帮助了解

CSS Navigation:  css跳转,ctrl+样式名可以跳转到对应的具体的css样式中(elementui组件上的样式也可进行跳转)

CSS Peek: css跳转,ctrl+样式名可以跳转到对应的具体的css样式中(只能是div等原生元素上的样式才能跳转)

file-jump: 路径跳转,ctrl+别名,可以跳转到对应的文件中

GitLens-Git supercharges: 鼠标放在每行代码末尾的时候,可以看到最近一次是谁提交的,以及提交时候的描述等信息

HTML Snippets: 自动补全html代码,但是现在停止维护,好像弃用了

JavaScript(ES6) code snippets: 自动补全js代码

Live Server: 右键open in live server运行html代码,会自动保存和刷新浏览器页面

open in broswer: 右键打开文件

Prettier - code formatter: 保存自动格式化

px2vw: px转为vw

Vetur: 识别vue文件的,vue项目必备

vscode-elm-jump:  变量跳转插件

vue-helper: 也是自动跳转的

code spell checker: 检查英文单词拼写是否有错的

插件安装我觉得这个写的挺好的,可以看看这个:

vscode 前端常用必备插件汇总。_itmonkey-cn的博客-CSDN博客_vscode 前端插件

setting的配置:也是上网搜的,下面链接可能会对理解有些帮助

浅析ESlint的作用、演进历史、ESLint校验文件方式及常见配置介绍、2种配置方式、eslint检测配置文件的机制 - 古兰精 - 博客园

{
  // eslint代码自动检查相关配置,保存自动修复
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.validate": [
    "javascriptreact",
    "vue",
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "vetur.format.enable": true,

  // prettier配置
  // 使用单引号代替双引号
  "prettier.singleQuote": true,

  // html css suport配置
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 保存时自动格式化
  "editor.formatOnSave": false,
  // 规定html的格式化为prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "editor.fontSize": 20,
  "window.zoomLevel": 1,
  "files.autoSave": "afterDelay",
  "files.trimTrailingWhitespace": true,
}

现在才发现,我跳转的装了好多,纯粹是可以用,但不知道是哪个起什么作用。

vue的项目里如果想要自动保存和刷新的,文件=>自动保存:

vscode基本插件安装与配置

 vue项目去除行尾空格:设置里面 搜索 trim trailing whitespace,选择启用:

vscode基本插件安装与配置

最后,假如换了电脑或者公司,肯定不想重新再配置一次了,可以同步一下到github,链接如下:

 简单一步到位同步你的 VSCode 全部配置_imkaifan的博客-CSDN博客_vscode同步

就是github网络实在不行,我现在还没配置成,总是配到一半就哦豁了,希望路过的大佬可以推荐一下爬墙的,感谢!文章来源地址https://www.toymoban.com/news/detail-456195.html

到了这里,关于vscode基本插件安装与配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VScode】的 安装--配置--使用(中文插件下载不了怎么办?)

    🖊作者 : D. Star. 📘专栏 : VScode 😆今日分享 : ”兰因絮果“是世间定律吗? 一段美好爱情开始时你侬我侬、缠缠绵绵,最后却以相看两厌结尾,让人唏嘘。清代词人纳兰容若于是咏出「人生若只如初见,何事秋风悲画扇」一句,触动人心,千古流传。而在中华悠久灿烂的文

    2024年02月04日
    浏览(62)
  • vscode删除后重装还有原来的配置问题,彻底删除vscode,删除vscode安装过的插件和缓存

    VSCode卸载后进行重新安装,发现新安装的还有原来的一些配置,卸载的不彻底,有时候也容易出问题,可按照如下方法卸载干净: 1.进入控制面板卸载VSCode,也可以在VSCode的安装目录下用程序自带的卸载程序 2.这样卸载完后还有一些配置文件,要想完全卸载,还需要将一下文

    2024年01月16日
    浏览(37)
  • Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】

    把插件的更新也一起取消了 字体对开发也很重要,不同字体,字母形态都不太一样,尤其是标点符号,逗号和分号的区分,有的字体看着这两者就很像 这样打开了很多个文件,就不会导致有的打开的文件被隐藏 相当于idea 查看当前类或接口的结构 Structure 支持快捷键与鼠标右

    2023年04月16日
    浏览(100)
  • VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

    Visual Studio Code 是一个轻量级功能强大的源代码编辑器,支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持,并为其他语言和运行

    2024年02月03日
    浏览(64)
  • VSCode配置c/c++环境 MinGW-W64 下载、安装与配置(支持最新版的GCC,目前 GCC 13.2.0) 彻底删除vscode(包括插件及配置!)

    目录 一、简介 二、下载 1  旧版安装(8.1.0)  从 sourceforge.net 下载 2  新版安装(本次采用较新版本~~~) 从 github 下载 从 镜像站点 下载  自己编译 三、安装与配置 1. 在线安装(这里仅作参考了解) 2. 离线安装(这是本文安装的重点,也是本机安装的版本~~~)★★★ 1   下载

    2024年01月19日
    浏览(52)
  • vscode怎么安装python插件包,vscode怎么安装python插件

    大家好,小编来为大家解答以下问题,visual studio code怎么安装python插件,如何安装vscode并配置python环境,现在让我们一起来看看吧! 一、VS Code下载与安装 1.下载方法 登录VScode的官网下载,官网链接 Visual Studio Code - Code Editing. Redefined 【----帮助Python学习,以下所有学习资料文

    2024年01月18日
    浏览(31)
  • vscode实用配置、常用插件

    一、配置自动保存 文件--首选项--设置--输入“自动保存” 在Files:Auto Save中  选择afterDelay 在Files: Auto Save Delay中配置延迟保存的时间 二:插件vetur 常用功能: 1、使.vue代码高亮 安装激活vetur插件, 代码就有高亮,显示彩色 不仅仅vue文件,vetur还支持很多语言的代码高亮,如下

    2024年02月09日
    浏览(42)
  • vscode重命名文件时卡住,错误信息Error: EPERM: operation not permitted, rename xxx -> xxx

    本人小白,最近使用vscode编写学习设计动态网页时,发现无法重命名文件,并且vscode会卡住导致其他文件也无法访问,只能重启vscode,或是等设置的运行时长结束后弹出报错信息才会恢复。 看了很多大佬的文章并尝试后也是药不对症。最后在不断的摸索下找到了我这种情况的

    2024年02月13日
    浏览(58)
  • VsCode 常用好用插件/配置+开发Vue 必装的插件

    1、实时刷新网页的插件:LiveServer 2、open in browser 支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari 补充一下:LiveServer 和 open in browser 区别:注意观察浏览器地址栏 open in browser:直接打开HTML文件就是通

    2024年02月08日
    浏览(49)
  • Git-简单使用/VSCode配置与插件

    代码缩进:设置:搜索 tab size 。Editor:Tab size =2 格式化:设置:搜索 format。 Editor:Format On Save 勾选 vetur eslint Prettier - Code formatter Path Autocomplete 在VSCode中编辑setting.json  上述配置,配置完三个相关插件的即可。 C盘下的 prettierrc 文件,可以直接新建 txt 文本文档,去掉后缀改成

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包