vscode基本插件安装与配置

阿物

已于 2023-06-07 23:06:21 修改

阅读量3.5k

点赞数

分类专栏： vscode软件文章标签： vscode 前端

于 2022-11-04 18:38:46 首次发布

本文链接：https://blog.csdn.net/weixin_43561423/article/details/127693711

版权

vscode软件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

插件安装：

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的项目里如果想要自动保存和刷新的，文件=>自动保存：