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 | |
.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; |
更多推荐
Vscode编辑器使用教程
发布评论