web前端-番外-vscode和emmet语法

所谓“工欲善其事，必先利其器”，想要快速高效的完成开发，必须要借助一些开发工具，毕竟“搬砖”我们也是专业的！这里推荐一个不仅用于web前端开发也可以用于其他编程语言的“神器”– vscode。vscode优点：

• 跨平台
• 丰富插件支持多种编程语言
• 支持Emmet语法，高效书写代码

vscode常用插件

安装不表，下面介绍几个web前端开发常用插件

汉化

• Chinese (Simplified) Language Pack for Visual Studio Code：将页面中文化

• 打开vscode-左侧extension图标-弹出栏搜索“chinese”-选择“Chinese (Simplified) Language Pack for Visual Studio Code”安装，安装完成重启vscode即可
  

网页运行

• Open in browser
  
• 快捷键alt+B在默认器运行网页代码
• 快捷键alt+shift+B下拉菜单选择其他浏览器运行网页代码
• 需要注意当代码改动时需要保存才能在浏览器看到刷新后的效果
  

标签自动更正

• Auto Rename Tag
  成对标签只需要更改第一个标签，配对标签即可自动更改
  

vscode常用快捷键

选择多行

以mac为例：
option+shift+鼠标下拉选择

vscode使用miniconda

在windows系统中vscode使用conda，可以通过以下步骤实现：

• 1.下载和安装miniconda：在miniconda选择windows 64位下载，随后正常安装即可，配置的时候可以勾选上加入环境变量，或者也可以自行加入环境变量。安装完成之后，win+R+cmd+enter打开命令行，执行conda -V可以看到版本号则没有问题，否则大概率是没添加到环境变量所致。可以在起始窗口搜索"conda"，找到conda的安装目录随后将以下目录(绝对路径)添加到环境变量中：

C:\miniconda3\
C:\miniconda3\Scripts\
C:\miniconda3\Library\bin\

在起始小窗口搜索“环境变量”，找到编辑系统环境变量-环境变量-系统变量下的“Path”-编辑-新建-粘贴上上述路径-确定保存即可

• 2.在vscode中通过conda新建环境，例如：

conda install -c bioconda bioawk -y

如果打开vscode提示无法加载文件 \WindowsPowerShell\profile.ps1，因为在此系统上禁止运行脚本，需要在起始窗口搜索"powershell"，右键以管理员运行，设置成set-ExecutionPolicy RemoteSigned，在conda使用后还是建议改回set-ExecutionPolicy Restricted

PS C:\WINDOWS\system32> get-ExecutionPolicy # 查看脚本执行安全策略
Restricted
PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned

如果下载失败，可以尝试配置.condarc文件的搜索镜像源，具体可自行搜索这里不赘述。

• 2.在vscode中，ctrl+shift+p，搜索框中输入"python select interpreter"对所运行脚本选择对应conda环境即可

Emmet常用语法

Vscode集成了Emmet，Emmet是由Zen coding演变而来的，集成了html/css的语法结构可以快速编写相应代码，使用时键入关键字按tab即可智能补全

快速生成html结构

• !+tab生成html整体框架
• 标签名+tab生成标签对
• 标签名*次数+tab生成多对标签
• 生成父子标签，例如ul>li*3+tab生成3个li子标签
• 生成兄弟标签，例如div+p+tab生成div和p兄弟标签
• .类名和#id名+tab生成相应类和id的div
• 标签.类名和标签#id名+tab生成相应类名和id名的标签
• 标签.类名$*次数和标签#id名$*次数+tab生成多个相应类名和id名的标签
• 标签{内容}+tab生成自带内容的标签
• ctrl+/快速注释当前行
• lorem10+tab:随机生成10个单词，便于填充文本测试

快速生成css样式

• 样式名称首字母+值+tab生成样式，例如
  w200+tab生成width: 200px;
bc+tab生成background-color: #fff;
tac+tab生成text-align: center;
  由此可见只要对属性名和值有大概印象，即可使用样式单词首字母快速完成样式设置

快速格式化代码

• 右键-格式化代码自动整理代码格式
• 保存时自动格式化代码：设置-搜索emmet.include-在settings.json中编辑-粘贴如下代码保存：

"editor.formatOnType": true,
"editor.formatOnSave": true

参考

黑马pink老师