vscode基本插件安装与配置

插件安装:

vscode基本插件安装与配置_第1张图片

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基本插件安装与配置_第2张图片

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

vscode基本插件安装与配置_第3张图片

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

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

就是github网络实在不行,我现在还没配置成,总是配到一半就哦豁了,希望路过的大佬可以推荐一下爬墙的,感谢!

你可能感兴趣的:(vscode软件,vscode,前端)