您现在的位置:首页 > >

vscode代码编辑框控件_vscode写html的快捷方式和插件总结

发布时间:

简介


VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。


一、设置首选项


下载安装完成后,打开编辑器,首先要设置主题、字体大小等。


1. 设置主题


文件→首选项→颜色主题


2. 设置字体大小


文件→首选项→设置,打开了一个setting.json文件,将左边的设置复制到右边进行覆盖生效,所有编辑器的设置都在这里修改。


二、Emmet插件


最新版集成了Emmet 2.0,在文件→首选项→设置可以开启或者关闭功能


三、快捷键


所有快捷键设置:文件→首选项→键盘快捷方式


1. 在当前行中间换行到下一行:ctrl+enter


2. 当光标点击到某一行时,默认选中全行,可以直接复制剪切


3. 直接删除某一行:shift+delete或者ctrl+shift+k


4. 多行光标选择:alt+鼠标左键


5. 自动生成html结构和meta声明:首先输入“!”,然后按tab键


6. 标签自动补全:tab键


7. 折叠所有代码:ctrl+k、ctrl+0


8. 拆分编辑器:ctrl+


查找框右边的3个参数分别为:区分大小写,全字匹配,使用正则


9. 跳转行号:ctrl+G


10. 添加函数注释:在函数上方输入“/**”,然后点击enter


11. 格式化:alt+shift+f


12. 注释:ctrl+/


13. 全部保存:ctrl+k, 然后只按s一个键


14. 向上移动一行:alt+↑


15. 向下移动一行:alt+↓


16. 向上复制一行:alt+shift+↑


17. 向下复制一行:alt+shift+↓


18. 查找:ctrl+F


19. 替换:ctrl+H


20. 文件中查找:ctrl+shift+f


可以在打开的文件夹中搜索所有文件内容


21. 文件中替换:ctrl+shift+h


22. 转到定义:F12


23. 转到实现:ctrl+F12


24. 打开文件夹:ctrl+k, ctrl+o


25. 关闭文件夹:ctrl+k, 然后单按一个f


26. 选中一段代码,通过“ctrl+[”可以左移,“ctrl+]”可以右移


open in browser


插件功能描述:从浏览器中查看html文件,使用系统的当前默认浏览器


Atuo Rename Tag


修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。


fileheader


顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间


Live Sass Compiler


vscode--搭建自动编译sass环境


一,安装插件及使用步骤


1、vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server


2、点击vscode底部的Watch my Sass


3、按F1键,在输入栏中输入Live Sass: Watch Sass来监听Sass文件(?Live Sass: Stop Watching Sass 停止监听文件)


4、同样在输入栏中输入?Live Sass: Compile Sass - Without Watch Mode,就会自动编译scss文件为css文件


二,配置编译规则


1、在项目的根目录下创建一个文件夹,命名为 .vscode(只能通过Linux命令创建),并且在该文件夹下面创建一个文件settings.json


2、配置settings.json


1 {


2 "liveSassCompile.settings.savePath": "./dist/css",//指定编译完的css文件路径


3 ? ? "liveSassCompile.settings.format": "expanded",//指定编译css的样式类型,有这四种 expanded(默认), compact, compressed or nested


4 ? ? "liveSassCompile.settings.extensionName": ".css",//指定编译完的文件后缀名,.css为普通代码,.min.css为压缩代码


5 ? ? "liveSassCompile.settings.excludeFolders": [


6 ? ? ? ? "**/node_modules/**",//指定忽略的文件


7 ? ? ? ? ".vscode/**"


8 ? ? ]


9 }


三、其他注意事项


如果要对多个文件进行监听和编译,那么只要重复操作一,安装插件及使用步骤》的2/3/4步骤。(每个scss文件只要操作一次,以后一旦保存,就会自动编译)


Easy Sass


安装 Ruby 时一定要勾选?Add Ruby executables to your PATH,用来将 Ruby 添加到系统变量,这样后续可以省却很多不必要的麻烦。装好后在命令行输入?gem sass?来安装 Sass,安装完成后启动 VSCode,在拓展商店里搜索“easy sass”,并安装,安装成功后* VSCode。


接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。


一般生产环境中用到其中两个设置项(上图红框处中的代码):


/** Easy Sass 插件 **/


"easysass.formats": [


{


"format": "compressed", ?// 压缩


"extension": ".css"


}


],


"easysass.targetDir": "./" ?// 自定义css输出文件路径


1


2


3


4


5


6


7


8


其中?easysass.formats?是设置编译输出的 css 风格的,可以同时编译输出多个不同风格的 CSS 文件,此处我只设置了一个?easysass.formats?项目,所以编译时只生成一个 CSS 文件。


easysass.formats[i].format?支持四个选项用以编译生成对应风格的 CSS:


nested:嵌套缩进的 css 代码。


expanded:没有缩进的、扩展的css代码。


compact:简洁格式的 css 代码。


compressed:压缩后的 css 代码。


easysass.formats[i].extension?顾名思义就是设置编译输出的文件名了,此处可以自定义文件名,输出的 CSS 文件名会按照“当前 Sass 文件名(不含拓展名)+此处自定义文件名”的格式来生成。例如:设置?easysass.formats[i].extension?为 ".min.css",假设当前的 Sass 文件名为“style.scss”,则编译输出的 CSS 文件名为“style.min.css”。


我们的生产环境中,在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的,而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的,为此我们需要配置输出路径。


easysass.targetDir?提供 CSS 输出路径的设置,值可以是绝对路径或相对路径。例如:设置?easysass.targetDir?为 "./css/",此时保存修改完毕的 Sass 文件,VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件(见下图)。


本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式,可能比较原始,实际生产环境中大多采用自动化构建方案,比如 grunt、gulp、fis 等。


S-CSS-HTML Formatte


安装JS-CSS-HTML Formatter 右键格式化文件


---------------------


作者:周家大小姐.


来源:CSDN


原文:https://blog.csdn.net/qq_40190624/article/details/79515090







相关资源:仿易语言代码编辑框


热文推荐
猜你喜欢
友情链接: