vscode安装使⽤的详细教程
⼀、什么是vscode**
Visual Studio Code (简称 VS Code / VSC) 是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义热键、括号匹配、代码⽚段、代码对⽐ Diff、GIT 等特性，⽀持插件扩展，并针对⽹页开发和云端应⽤开发做了优化。软件跨平台⽀持 Win、Mac 以及 Linux。
⼆、Vscode版本
三、Vscode下载
可下载.zip解压版，下载解压后即可使⽤。【其是⽤electron打包的】
也可下载安装版可执⾏程序，安装后很多东西都不需要你⾃⼰配置了。
四、vscode
按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启。
注意：
如果重启后还是英⽂的，那么在商店查看已安装的插件，把中⽂插件Chinese(simplified) 重新安装⼀遍，然后重启软件即可。
成功：
五、⼏个常⽤命令说明
注意
1.Ctrl+shift+F 在⽂件中查，可以同时替换。还可以指定在什么⽂件中，同时指定要排除什么⽂件等。
2. 通过快捷键Ctrl+`后可以将命令窗⼝打开在vscode中，使⽤起来就⽐较⽅便了。
3.我们安装vscode后，可以直接在任意⼀个项⽬⽬录下，⿏标右键然后将这个项⽬在服务器上打开。（如果你已经
有打开了⼀个窗⼝，那么他会打开⼀个新窗⼝）
六、左边图标说明
七、基本使⽤
1.直接拖⼊项⽬⽂件夹进⼊软件
⽅式⼀：拖⼊⼯作区（这样的话，会保留当前以及打开的项⽬⽂件夹）
⽅式⼆：拖⼊⼯作区右边的窗⼝，这样的话会让拖⼊的窗⼝覆盖掉原本以及打开的窗⼝
（这时vscode会问你是否保存⼀个⽂件，⽤来保存原本⼯作区信息，以便下次打开此⽂件）
备注：对于左侧的⽂件夹可以直接使⽤快捷键复制粘贴等。
2.在vscode⾥⾯创建项⽬⽂件夹
3.格式化代码
在代码⾥⾯右键菜单，会弹出相应的格式化等功能选项，也有定义引⽤查等菜单。
4.在浏览器中打开⽹页
1.以file⽂件协议形式打开⽂件
安装插件：Open HTML in Default Browser
特点
⽤默认浏览器打开 HTML ⽂件
在资源管理器中，HTML ⽂件右键显⽰在浏览器中打开菜单
在编辑器中，HTML ⽂件右键显⽰
在浏览器中打开菜单  可以同时打开多个页⾯
我们在⼯作区项⽬上右键菜单就能看到在资源管理器中打开⽂件的选项
2.以服务器形式打开⽂件
⽅式⼀：
安装live server 插件，点击重新加载或者重启vscode，然后⿏标右键就可以在服务器上打开，
这种模式打开会⾃动刷新页⾯。
⽅式⼆：
1.按下快捷键：Ctrl+` 打开命令⾏终端，执⾏cnpm install live-server -g
2.安装好后每次要运⾏只需要打开终端后执⾏⼀下live-server即可
3.使⽤live-server是把整个⽹站打开到服务器上的。不管你当前定位到哪⼀个⽬录，他打开的都是默认的⾸页⽂件，如：index.html
4.如果你根⽬录下全是⽂件夹，或者没有index.html等默认⾸页⽂件，那么服务器就会显⽰⼀些⽂件夹让你选择。
如：
5.如果要关闭live-server那么只需要在控制台执⾏以下ctrl+c，然后输⼊y确认下即可关闭。
6.Live-server可以在任意项⽬根⽬录下，打开终端窗⼝，然后输⼊live-server即可让当前项⽬在服务器上打开执⾏
7.在以服务器打开的模式下，我们更改了⽂件内容后只要保存下，浏览器就会⾃动的刷新，⽽不需要我们显式的在浏览器⾥⾯刷新。
⽅式三：
也可以安装http server插件，安装完成后按下f1，然后输⼊http会看到下⾯两个选项，选择with current file那个能够创建⼀个服务器运⾏当前⽂件。另外⼀个会当前⽬录下的index.html，然后打开它。
选择⼀个后，会再让你选择在浏览器⾥⾯打开还是vscode⾥⾯打开。
其他
你也可以全局安装此模块【cnpm install http-server -g 】
安装到全局后：在终端⾥⾯输⼊hs就可以使⽤。
⼋、插件安装
安装与卸载
1. 安装：在左边最下⾯是哪个图标点击搜索插件进⾏安装即可。
2. 卸载：同样的地⽅到插件，然后进⾏卸载即可。
如果安装了某个插件后⽆法看到效果，那么请重启下vscode，或者重新加载
常⽤插件：
1.HTML Boilerplate
通过使⽤ HTML 模版插件，你就摆脱了为 HTML 新⽂件重新编写头部和正⽂标签的苦恼。你只需在空⽂件中输⼊ html，选中html:5即可⽣成⼀个新的⽹页⽂件，也可以输⼊⼀个感叹号
2.browser-plus
在编辑器内预览HTMLjavascript免费教程
通过开启端⼝(10086)监听当前打开项⽬的根⽬录，在编辑器内预览⽹站，省去了频繁切换浏览器、编辑器看页⾯效果，修改代码后⾃动刷新页⾯。
使⽤⽅法
Window Ctrl+F1 ，默认10086端⼝预览⽹页
3.CSS Peek
使⽤此插件，你可以追踪⾄样式表中 CSS 类和 ids 定义的地⽅。当你在 HTML ⽂件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
4.Color Info
这个便捷的插件，将为你提供你在 CSS 中使⽤颜⾊的相关信息。你只需在颜⾊上悬停光标，就可以预览⾊块中⾊彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
5.Auto Close Tag
⾃动闭合HTML/XML标签
6.Auto Rename Tag
⾃动完成另⼀侧标签的同步修改
7.HTML Snippets
智能提⽰HTML标签，以及标签含义JavaScript(ES6) code snippetsES6语法智能提⽰，以及快速输⼊，不仅仅⽀持.js，还⽀持.ts，.jsx，.tsx，.html，.vue，省去了配置其⽀持各种包含js代码⽂件的时间
8.Path Intellisense
⾃动提⽰⽂件路径，⽀持各种快速引⼊⽂
9.jQuery Code Snippets
  jQuery代码智能提⽰
10.Icon Fonts
这是⼀个能够在项⽬中添加图标字体的插件。该插件⽀持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
⾃动编译less⽂件为css⽂件：
安装插件 Easy LESS，保存⾃动编译，不需要配置（默认编译到当前⽬录下）
如果需要编译为不同⽂件名的css⽂件，那么在less⽂件的最上⾯加上⼀⾏注释即可：// out: new-file.css
总结
到此这篇关于vscode安装使⽤的详细教程的⽂章就介绍到这了，更多相关vscode安装使⽤内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。