Vscode编辑器使用教程

Vscode简介

Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。

它内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。

Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

Vscode安装

前往官网下载安装包：Visual Studio Code - Code Editing. Redefined

打开下载好的安装包依次点击：同意协议-下一步-下一步-安装

Vscode预设置

预设置一软件汉化

1. 复制扩展汉化ID：ms-ceintl.vscode-language-pack-zh-hans

2. 按照下图操作即可

预设置二登入账号同步设置

点击Vscode编辑器界面左下角的账户图标，登入账户同步软件设置，扩展等。

预设置三永久自动换行

1. 复制Editor:Word Wrap

2. 键盘按住ctrl+,键

3. 按照下图操作即可

预设置四设置颜色主题

键盘按住ctrl+k+t键就可选择自己喜欢的颜色主题，如下图。

预设置五修改默认快捷键

1. 键盘按住ctrl+k+s键

2. 在输入框内输入自己想要修改的默认快捷键，例如ctrl+s

3. 按下图操作即可

Vscode常用快捷键

默认快捷键	作用
ctrl + + 和 ctrl + -	放大和缩小视图
alt+shift+↑	向上复制一行
alt+shift+↓	向下复制一行
ctrl+c和ctrl+x	当光标定位到某一行时，默认选中全行，可以直接复制剪切。
alt+shift+鼠标左键	选中多行同一列位置的内容
ctrl+h	替换代码

Vscode常用前端扩展

扩展	作用	id	更多介绍
Chinese (Simplified) Language Pack for VS Code	中文（简体）语言包	ms-ceintl.vscode-language-pack-zh-hans	Chinese (Simplified) Language Pack for Visual Studio Code - Visual Studio Marketplace
Open in Browser	右击选择浏览器打开html文件	techer.open-in-browser	open in browser - Visual Studio Marketplace
JS-CSS-HTML Formatter	每次保存，都会自动格式化js css 和html 代码	lonefy.vscode-js-css-html-formatter	JS-CSS-HTML Formatter - Visual Studio Marketplace
Auto Rename Tag	自动重命名配对的HTML / XML标签	formulahendry.auto-rename-tag	Auto Rename Tag - Visual Studio Marketplace
CSS Peek	追踪至样式	pranaygp.vscode-css-peek	CSS Peek - Visual Studio Marketplace
GitHub Theme	GitHub风格主题颜色	github.github-vscode-theme	GitHub Theme - Visual Studio Marketplace
Live Server	静态和动态页面实时显示	ritwickdey.liveserver	Live Server - Visual Studio Marketplace
Fluent Icons	一款产品图标主题	miguelsolorio.fluent-icons	Fluent Icons - Visual Studio Marketplace
Easy LESS	保存，自动把less文件编译为css文件。	mrcrowl.easy-less	Easy LESS - Visual Studio Marketplace
cssrem	自动将px转为rem值，默认字体大小为16px。	cipchk.cssrem	px to rem & rpx (cssrem) - Visual Studio Marketplace
vetur	vue语法提示	octref.vetur
Material Icon Theme	文件图标主题	pkief.material-icon-theme	Material Icon Theme - Visual Studio Marketplace
One Monokai Theme	主题风格颜色	azemoh.one-monokai	One Monokai Theme - Visual Studio Marketplace
Bootstrap 3 Snippets	一组用于 Visual Studio 代码的 Bootstrap 3 代码段。创建一个新的 HTML 文档并输入“bs3”以查看所有可用的片段。	wcwhitehead.bootstrap-3-snippets	Bootstrap 3 Snippets - Visual Studio Marketplace
px to rem & rpx (cssrem)	rem转换，需要设置默认字体px	cipchk.cssrem	px to rem & rpx (cssrem) - Visual Studio Marketplace
Prettier - Code formatter	esbenp.prettier-vscode

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。

快速生成HTML结构语法

输入	结果
div	`<div></div>`
.text或者#text	`<div class="text"></div> 或者 <div id="text"></div>`
span.text或者span#text	`<span class="text"></span> 或者 <span id="text"></span>`
div*3	`<div></div> <div></div> <div></div>`
.text3或者#text3	`<div class="text"></div> <div class="text"></div> <div class="text"></div> 或者 <div id="text"></div> <div id="text"></div> <div id="text"></div>`
span.text3或者span#text3	`<span class="text"></span> <span class="text"></span> <span class="text"></span> 或者 <span id="text"></span> <span id="text"></span> <span id="text"></span>`
.text$2或者#text$2	`<div class="text1"></div> <div class="text2"></div> 或者 <span id="text1"></span> <span id="text2"></span>`
ul>li	`<ul> <li></li> </ul>`
div+p	`<div></div> <p></p>`
div{这里填内容}*3	`<div>这里填内容</div> <div>这里填内容</div> <div>这里填内容</div>`