Vscode编辑器使用教程

发布于:2023-04-27 ⋅ 阅读:(790) ⋅ 点赞:(0)

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>

.text*3或者#text*3

<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.text*3或者span#text*3

<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>

快速生成CSS样式语法

输入 结果

w200

width: 200px;

lh26px

line-height: 26px;

tac

text-align:center;


网站公告

今日签到

点亮在社区的每一天
去签到