Visual Studio Code的下载安装、快捷键以及插件离线安装

文章目录一、下载安装二、使用1.中文简体2.持续更新.......一、下载安装官网下载最新版：https://code.visualstudio.com/Download下载zip版本，直接解压，运行exe即可二、使用1.中文简体点击左侧工具栏extensions或者使用快捷键【Ctrl+Shift+X】，输入chinese，点击Install安装中文简体插件，然后重启即可2.持续更新…...

文章共2,080字 · 阅读需要大约7分钟

一键AI生成摘要，助你高效阅读

问答

袁小萌同学

8094人浏览 · 2020-09-29 17:32:34

袁小萌同学 · 2020-09-29 17:32:34 发布

前言

本文首先介绍了VS code的下载安装，然后是使用，先是常用插件的总结，包括切换为中文简体，如何离线安装插件；最后是我边用边在总结的快捷键，大家按需取用就好啦，下面进入正文咯。

一、下载安装

官网下载最新版：https://code.visualstudio.com/Download
在这里插入图片描述

下载zip版本，直接解压，运行exe即可

二、常用插件总结

插件：点击左侧工具栏extensions或者使用快捷键【Ctrl+Shift+X】
在这里插入图片描述

1. 中文简体

输入chinese，点击Install安装中文简体插件，然后重启即可Chinese (Simplified) Language Pack for Visual Studio Code

在这里插入图片描述

2.Auto Close Tag
　　自动闭合HTML/XML标签
　　在这里插入图片描述

3.Atuo Rename Tag

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

在这里插入图片描述

4. beautify
格式化代码工具，美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。
在这里插入图片描述
5. Vuter
提供vue代码片段、语法支持、代码高亮等

6. Bracket Pair Colorizer

用于着色匹配括号
在这里插入图片描述

7. Color Info
提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

在这里插入图片描述

8. Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。即映射vscode上的断点到chrome上，方便调试。

在这里插入图片描述
9. HTML CSS Support

智能提示CSS类名以及id

在这里插入图片描述
10. HTML Snippets

智能提示HTML标签，以及标签含义

在这里插入图片描述

11. Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进
在这里插入图片描述

在这里插入图片描述
12. VS Code JavaScript(ES6) snippets
这个插件为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持

13. Open-In-Browser

右键文件在浏览器中打开
在这里插入图片描述

三. 插件离线安装

1.插件下载网址

所有的扩展都是存放在微软的存储库中的

https://marketplace.visualstudio.com/vscode
在这里插入图片描述

2.搜索自己需要的插件

在这里插入图片描述

3.点击插件说明的页面中,右侧就能找到下载按钮

在这里插入图片描述
点击就会下载为.vsix结尾的文件。

4.引入下载的插件包

打开VS code，扩展插件处，右上角三个小点，选择从.vsix安装，引入刚才下载的文件即可，然后重启，就可以从已安装中看见刚才安装的插件了。
在这里插入图片描述

四.VScode 快捷键（持续更新）

同时按钮键盘"ctrl"和"+“按钮

格式化代码

shift+alt+F

五、相关问题

1.Eslint-plugin-vue 报警告问题解决

在这里插入图片描述
或者
[eslint-plugin-vue] [vue/valid-v-for] Custom elements in iteration require ’ 提示警告！

解决方法：
工具栏：文件-首选项-设置-》用户-vuter倒数第二个选项Validation ：Template的对勾取消
在这里插入图片描述

2.生成代码块模板

https://blog.csdn.net/dream_summer/article/details/112778247

3.格式化换行问题

文件-首选项-设置-搜索vetur
在这里插入图片描述

"editor.formatOnSave": true, // #每次保存的时候自动格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  #让函数(名)和后面的括号之间加个空格
  // 安装了vuter插件在vue中使用的配置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 100,
      "wrap_attributes": "auto",
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 100, //一行的代码数
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
  },