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 | |
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 |
|
.text或者#text |
|
span.text或者span#text |
|
div*3 |
|
.text*3或者#text*3 |
|
span.text*3或者span#text*3 |
|
.text$*2或者#text$*2 |
|
ul>li |
|
div+p |
|
div{这里填内容}*3 |
|
快速生成CSS样式语法
输入 | 结果 |
---|---|
w200 |
width: 200px; |
lh26px |
line-height: 26px; |
tac |
text-align:center; |