文章目录
- vscode常用插件
- 汉化
- 网页运行
- 标签自动更正
- vscode常用快捷键
- 选择多行
- vscode使用miniconda
- Emmet常用语法
- 快速生成html结构
- 快速生成css样式
- 快速格式化代码
- 参考
所谓“工欲善其事,必先利其器”,想要快速高效的完成开发,必须要借助一些开发工具,毕竟“搬砖”我们也是专业的!这里推荐一个不仅用于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
参考